FE5: Loading less, loading later
Serving the right images
🎯You'll be able to
Serve images at the right size and format for each screen.
🏠The everyday picture
You don't send a wedding album's poster-sized print by WhatsApp to show a friend one photo. You send a smaller copy that looks just as good on their phone.
📘What it really is
- Images are often the heaviest part of a page. Four levers:
- Size: serve images close to the size they're shown. A 3,000 px photo shown at 400 px wastes most of its bytes.
- Format: WebP and AVIF are usually much smaller than JPEG or PNG at similar quality. Use SVG for logos and icons.
- Compression: a quality setting around 70–80 is usually indistinguishable for photos.
-
Responsive images:
srcsetandsizeslet the browser choose the right file for the screen width and pixel density. -
Framework image components (such as Next.js's
Image) and image CDNs can resize and convert automatically. - Always write meaningful
alttext for content images (FE6), and set width and height to prevent layout shift (FE4). - Check uploads: staff-uploaded product photos straight from a phone camera are often 3–5 MB each.
📝A worked example
Kirana's product photos before and after an image pipeline:
| Measure | Before | After |
|---|---|---|
| Typical file | 3.2 MB JPEG, 4,000 × 3,000 | 45 KB WebP at 600 px wide (90 KB at 1,200 px for sharp screens) |
| Listing page with 40 products | 18 MB | 1.9 MB |
| Format fallback | — | JPEG for the rare browser without WebP |
Uploads now go through a step that creates three sizes in WebP and AVIF, and the page uses srcset so phones get the smaller files.
🌍Where it's used
- Shops and marketplaces with thousands of product photos.
- News and blogs with large header images.
- User-uploaded content such as reviews and profiles.
📝Case scenario
A restaurant site's menu page takes 20 seconds to load on mobile data. Each dish photo is a 4 MB original from a professional camera. Converting to WebP at display size cuts the page from 60 MB to 2.5 MB, and the restaurant notices fewer people leaving the menu page before ordering.
🖱️Try it
Take five large photos, and for each produce a WebP at 600 px and 1,200 px wide. Use srcset and sizes on your Kirana product page,
and check in the Network tab which file the browser chose on a phone-sized screen.
⚠️Common mistakes
- Sending a 1200 px image to a 300 px slot. Sign: image bytes far above the content shown. Fix: use
sizesand resized versions. - Leaving out width and height. Sign: layout shifts as images arrive. Fix: set them, or set an aspect ratio.
🛠️For your project
The kit's product images are 1200 px JPEGs and the hero is 2400 px; Project 3's image budget is 900 KB.
✅Quick check
What do srcset and sizes do?
Show the answer
They let the browser pick the most suitable image file for the screen width and pixel density.
Name two image formats that are usually smaller than JPEG at similar quality.
Show the answer
WebP and AVIF.