Practice & Assessment
Test your understanding of Image and Font Optimization
Multiple Choice Questions
5You have a logo PNG at 200KB with no transparency. What is the best optimization action?
A browser on a 375px wide 3× DPR phone processes `srcset="img-600.jpg 600w, img-1200.jpg 1200w"` with `sizes="100vw"`. Which image will it download?
Which font-display value completely prevents both FOIT and layout shift, at the cost of possibly never showing the web font?
Why should you never add loading="lazy" to the LCP image?
What does the `unicode-range` descriptor in @font-face do?
Coding Challenges
1Convert a JPEG gallery to modern formats with srcset
Given a folder of 5 JPEG photos (provided, each 2–4MB), write a Node.js script using sharp that: (1) converts each to WebP at quality 80 and AVIF at quality 60, (2) generates 400w, 800w, and 1200w variants of each format, (3) outputs the correct HTML <picture> element for each image with srcset and sizes attributes. Input: 5 JPEG files in ./images/. Output: 30 converted files in ./images/optimized/ and an index.html with the 5 <picture> elements. Estimated time: 25–30 minutes.
Mini Project
Optimized Image Gallery Page
Build a 10-image photo gallery page from scratch. Requirements: (1) use Sharp in a build script to generate WebP and AVIF variants plus 400w/800w/1200w sizes for every image, (2) implement the <picture> element with AVIF > WebP > JPEG fallback for each image, (3) add proper srcset and sizes attributes for responsive delivery, (4) lazy-load all gallery images, (5) self-host one display font using font-display: swap and a preload link, (6) ensure zero CLS by setting explicit width and height on all images, (7) measure before/after total page weight using DevTools Network tab. Deliverable: the gallery HTML, build script, and a README with before/after file size comparison.