A phone with a 400-pixel-wide screen doesn't need a 2400-pixel photo, but a large high-resolution monitor does. Responsive images let you offer several versions of an image and let the browser download the best one for each device.
The result is faster pages on phones, sharp images on large screens and less wasted data. Images are usually the biggest files on a page, so this is one of the most effective speed improvements you can make, and page speed affects both visitor patience and search rankings.
This lesson builds on HTML Images. Make sure you're comfortable with src, alt, width and height first.
srcset and sizes: offering several image widths
<img
src="cake-800.jpg"
srcset="cake-400.jpg 400w, cake-800.jpg 800w, cake-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 600px"
alt="Lemon drizzle cake" width="800" height="533">srcsetlists the files and their real widths.400wmeans the file is 400 pixels wide.sizestells the browser how wide the image will be displayed: "on screens up to 600px wide, the full width of the screen; otherwise 600px".- The browser combines that with the screen's pixel density and picks the smallest file that will still look sharp.
srcis the fallback for very old browsers.
The browser has to choose an image before it knows your CSS layout, which is why you describe the display size in sizes. If you leave sizes out, the browser assumes the image fills the whole screen width.
Density descriptors for fixed-size images
For images that always display at the same size, such as a logo, use 1x and 2x instead:
<img src="logo.png" srcset="logo.png 1x, logo@2x.png 2x" alt="Bloom Bakery logo" width="160" height="40">Screens with high pixel density get the double-resolution file, and everyone else gets the smaller one.
The picture element: art direction and modern formats
The <picture> element lets you choose a different image or format depending on conditions:
<picture>
<source type="image/avif" srcset="hero.avif">
<source type="image/webp" srcset="hero.webp">
<img src="hero.jpg" alt="Mountain lake at sunrise" width="1200" height="600">
</picture>The browser uses the first <source> it supports and falls back to the <img>. You can also add media="(max-width: 600px)" to a source to show a tighter crop on phones. Choosing a different crop for different screens is called art direction.
srcset or picture: which one to use?
- Use
srcsetandsizeswhen every version is the same picture at a different size. This covers most photos on most sites. - Use
<picture>when you want a different file format with a fallback, or a genuinely different image, such as a square crop on phones and a wide banner on desktops.
You can combine them: each <source> inside <picture> can have its own srcset and sizes.
Responsive Images Syntax
Responsive image patterns
<!-- different sizes -->
<img src="a-800.jpg" srcset="a-400.jpg 400w, a-800.jpg 800w" sizes="100vw" alt="…">
<!-- different formats / crops -->
<picture>
<source media="(max-width: 600px)" srcset="a-square.jpg">
<img src="a-wide.jpg" alt="…">
</picture>Responsive Images Summary
- Responsive images let each device download a suitably sized file.
srcsetlists files with their widths;sizesdescribes the display width.- Use
1xand2xdescriptors for images shown at a fixed size. <picture>with<source>offers modern formats and art direction.- The
<img>inside<picture>is required and holdsalt,widthandheight.
Responsive Images Examples
Each example runs in the page. Edit the code and press Run to see what changes.
srcset in action
Open this in the Playground and use the phone/tablet buttons to resize. The browser picks a file to match. (The numbers in the image show which one loaded.)
<img
src="https://placehold.co/800x400?text=800w"
srcset="https://placehold.co/400x200?text=400w 400w,
https://placehold.co/800x400?text=800w 800w,
https://placehold.co/1600x800?text=1600w 1600w"
sizes="(max-width: 600px) 100vw, 600px"
alt="Placeholder showing which image width was chosen"
width="800" height="400"
style="max-width: 100%; height: auto;">Line-by-line explanation
- Line 2The fallback image for browsers that don't understand
srcset. - Lines 3 to 5Three versions with their real widths.
- Line 6Up to 600px wide screens: image fills the viewport. Bigger screens: it's 600px wide.
- Line 9A little CSS so the image never overflows its container.
Art direction with picture
Resize the result narrower than 500px: the wide banner swaps to a square crop.
<picture>
<source media="(max-width: 500px)" srcset="https://placehold.co/400x400/17a865/fff?text=Square+crop">
<img src="https://placehold.co/900x300/4467ff/fff?text=Wide+banner" alt="Summer sale banner" width="900" height="300" style="max-width:100%;height:auto">
</picture>Line-by-line explanation
- Line 2On small screens, a square image that fits phones better.
- Line 3The default wide image.
<img>is always last and carries the alt text.
Common Responsive Images Mistakes
Missing sizes with w descriptors
<img srcset="a-400.jpg 400w, a-800.jpg 800w" src="a-800.jpg" alt="…"><img srcset="a-400.jpg 400w, a-800.jpg 800w" sizes="(max-width: 600px) 100vw, 600px" src="a-800.jpg" alt="…">Without sizes, the browser assumes the image is the full viewport width and often downloads a bigger file than needed.
Putting alt on source
<picture>
<source srcset="a.webp" alt="Dog">
<img src="a.jpg">
</picture><picture>
<source srcset="a.webp" type="image/webp">
<img src="a.jpg" alt="Dog">
</picture>Only <img> takes alt, width and height.
Responsive Images in Real Projects
Big sites rely on this
News sites, online shops and image-heavy blogs serve dozens of image sizes. Image CDNs such as Cloudinary or Imgix generate the sizes automatically from one upload. Switching a site to responsive WebP or AVIF images often halves its page weight, which is a big win for phone users on slow connections.
Responsive Images Exercises
Answer each one and check it instantly. If you get stuck, open the hint before the answer.
Tell the browser the real widths of each file.
<img src="dog-800.jpg" srcset="dog-400.jpg , dog-800.jpg " sizes="100vw" alt="Happy dog">400w and 800w describe each file's real pixel width.Which element must always be inside <picture>?
<img> displays the result and holds alt.What does sizes="(max-width: 600px) 100vw, 600px" mean?
sizes describes display width, which the browser uses to choose from srcset.This <picture> puts the alt text in the wrong place and has no fallback <img>. Fix it so the WebP source stays, and add an <img src="https://placehold.co/300x150?text=JPG" alt="Product photo">.
<picture>
<source type="image/webp" srcset="https://placehold.co/300x150/webp?text=WEBP" alt="Product photo">
</picture>- There's an img inside picture
- The img has the alt text
- The source has no alt
- The WebP source is kept
Responsive Images Quiz
3 questions to check what you learned.
What does the
2xinsrcset="logo@2x.png 2x"mean?- Make the image twice as big on screen
- Load it twice
- It's 2 KB
- Use this file on screens with double pixel density (retina)
Why put AVIF and WebP sources before a JPG
<img>?- They look different
- Browsers that support the smaller modern formats use them; others fall back to JPG
- JPG must always be last for SEO
- To show all three
What is "art direction" in responsive images?
- Choosing image colours
- Adding captions
- Showing a different crop or image at different screen sizes
- Compressing images
Responsive Images Challenge
Modern format with fallback
Build a <picture> with:
- A
<source type="image/webp">usingsrcset="https://placehold.co/400x200/webp?text=WebP" - A fallback
<img>withsrc="https://placehold.co/400x200?text=JPG", meaningful alt,width="400"andheight="200"
- A WebP source inside picture
- A fallback img inside picture
- The img has meaningful alt
- width and height set