Digital Media, Web and Interactive Production
This domain tests the translation of print skills into screen deliverables: resolution logic, file formats, colour on screen, accessibility, performance budgets and repurposing print assets for web and email.
Core rules
- Resolution: the web works in CSS pixels, and 72 ppi is a convention, not a rule. A 1440 CSS px hero on a 2× device needs a 2880 px asset; serve both with srcset or picture elements.
- Formats: JPEG for photographs, PNG for lossless images with transparency, SVG for logos and icons, WebP and AVIF for compressed delivery, GIF only for simple legacy animation.
- Colour: hex and rgb() are interpreted as sRGB by default; wide-gamut P3 exists on modern displays; CMYK has no place in a web stylesheet.
- Accessibility (WCAG 2.2 AA): 4.5:1 contrast for body text, 3:1 for large text and UI edges; meaningful alt text; semantic HTML headings; visible keyboard focus; never convey information by colour alone.
- Performance: set a page-weight budget, compress images, lazy-load below-the-fold media, subset fonts and deliver WOFF2, prioritise above-the-fold assets.
- Screen typography: minimum body size around 16 px, measure of 60–80 characters, system-font or web-font fallback stacks, and a plan for FOUT/FOIT with variable fonts.
- Email: a 600 px design width, inline CSS, and alt text on every image because images are blocked by default in many clients.
Worked example
A hero image is 1440 CSS px wide and will be served to 2× screens. Prepare three renditions: 2880 px wide for 2× desktop (AVIF quality 50, roughly 110 KB), 960 px for tablets, 480 px for phones. A single uncompressed JPEG at 2880 px would run to about 350 KB; multiplied across eight page images that alone would exceed a 1 MB budget. Declare the options in srcset with sizes so the browser selects, and lazy-load everything beyond the first viewport.
Traps that cost marks
Uploading 300 ppi print images and calling them optimised; JPEG for a logo or for transparency; icon buttons with no accessible label; text baked into images so it cannot be resized or read by assistive technology; colour-only status indicators; missing fallback fonts.
Key points
- CSS pixels, not ppi, define screen size; serve 2× assets via srcset.
- JPEG for photos, PNG for transparency, SVG for vectors, AVIF/WebP for weight.
- Web colour defaults to sRGB; P3 is wide-gamut, CMYK is irrelevant.
- WCAG 2.2 AA: 4.5:1 body contrast, alt text, visible focus.
- Set a page-weight budget and lazy-load below the fold.
- Email: 600 px width, inline CSS, alt text mandatory.