In short
Images are often the heaviest thing on a page. Serving the right size in a modern format can cut megabytes, which matters a lot for users on mobile data.
Serving appropriately sized, modern-format (WebP/AVIF) images with proper compression — often the single biggest lever for improving page load performance.
Think of it like this
Packing for a weekend trip
You don't carry a giant suitcase for two days in Lonavala. You pack a small bag with just what you need. Don't send a 4000px photo to a 400px phone slot either. Pack the right size for each screen.
Watch it happen
How the browser picks one file
1/5The browser reads the picture element and its three candidates: AVIF, WebP, then JPEG.
The big ideas
What you need to know
Right size for the slot
srcset offers several widths and sizes tells the browser how wide the image will display, so it picks the smallest that looks sharp.
Modern formats
AVIF and WebP are usually much smaller than JPEG at similar quality. Use picture to offer them with a JPEG fallback.
Always set dimensions
width and height let the browser reserve space before the image loads, so the layout doesn't jump.
Next.js does it for you
next/image resizes, converts formats and lazy loads automatically. You still provide alt text and dimensions or fill.
See it in code
Walk through the code
1<picture>2 <source type="image/avif" srcset="/hero-640.avif 640w, /hero-1280.avif 1280w" sizes="100vw" />3 <source type="image/webp" srcset="/hero-640.webp 640w, /hero-1280.webp 1280w" sizes="100vw" />4 <img5 src="/hero-1280.jpg"6 srcset="/hero-640.jpg 640w, /hero-1280.jpg 1280w"7 sizes="100vw"8 width="1280" height="720"9 alt="Students at the college fest"10 fetchpriority="high"11 />12</picture>1/3Offer AVIF first, then WebP. Each source lists two widths and how wide the image displays.
The browser picks the first format it supports and the smallest width that fits. fetchpriority="high" tells it this hero image matters most.
Save yourself the pain
Common mistakes
Oops
Uploading a 5MB camera photo and shrinking it with CSS.
Do this instead
CSS only changes the display size. The full 5MB still downloads. Resize the file itself.
Oops
Using PNG for photos.
Do this instead
PNG suits logos and screenshots with sharp edges. For photos, use AVIF, WebP or JPEG.
Your mission
Shrink your portfolio's images
Quick check
Your 3000px-wide image is displayed at 300px wide using CSS. What does the user download?
Go deeper
- 1Convert a few large images to WebP and compare file sizes.
- 2Use responsive `srcset`/`sizes` (or `next/image`) to serve appropriately sized images per device.
- 3Audit a real page's images with Lighthouse and fix the flagged ones.
More topics at this stop
Lazy Loading
Memoization
Bundle Splitting
Virtualization
Tree Shaking
Code Splitting
Caching
Lighthouse
Core Web Vitals
Web Vitals
Prefetching
Preloading
Stuck on this topic? Ask an Insider
Get 1:1 guidance from people who've walked this exact path — on the InsideEdge app.
