Responsive Images: srcset, sizes and the picture Element Explained
A phone does not need the same file as a 4K monitor. Responsive images let the browser download only what it needs, which cuts page weight without hurting quality. This guide explains the problem, the tools HTML gives you, and how to put them to work.
The problem: one file for every screen
If you serve a 2000-pixel picture to every visitor, a phone with a 390-pixel-wide screen downloads several times more data than it can show. On a mobile connection that costs time and money, and it slows down the page for people who can least afford it.
Serving a small file to everyone is not the answer either, because large and high-density screens would show it soft and blurry. Responsive images solve this by providing several versions of the same picture and letting the browser choose the right one.
The three tools: srcset, sizes and picture
| Tool | What it does | Use it for |
|---|---|---|
srcset with width descriptors | Lists several files and their pixel widths | Offering different sizes of the same picture |
sizes | Tells the browser how wide the image will be displayed | Helping it choose from srcset before layout is known |
picture with source | Lets you offer different formats or crops | Serving WebP or AVIF with a fallback, or a tighter crop on phones |
A basic example looks like this: <img src="photo-800.jpg" srcset="photo-480.jpg 480w, photo-800.jpg 800w, photo-1600.jpg 1600w" sizes="(min-width: 1024px) 800px, 100vw" alt="...">.
The src is the fallback for old browsers. The browser combines the layout width, the screen density and its own judgement, so you describe the choices rather than dictate one.
Pros and cons of responsive images
Pros
- Smaller downloads on phones and slow connections, often a large saving.
- Sharp images on high-density screens without penalising everyone else.
- Better scores for speed measures such as Largest Contentful Paint.
- Works with standard HTML, with no JavaScript.
Cons
- More files to create, name and manage for each image.
- More markup, and a
sizesvalue that must roughly match your layout to work well. - If
sizesis wrong, the browser may pick a larger file than necessary. - Art direction with
picturemultiplies the number of versions, so use it only where it matters.
Most content management systems and image CDNs generate the versions and the markup for you, which removes the main drawback.
Step by step: implement responsive images
- 1Decide your widths. Common choices are 480, 800, 1200 and 1600 pixels. Fewer is fine for small sites.
- 2Resize from the largest original. Use Resize Image to produce each width, with the aspect ratio kept. Never resize from an already shrunk copy.
- 3Compress each version. Run each through Compress Image. Quality 75 to 85 suits most photos.
- 4Write the
srcsetlisting every file with its width in pixels followed byw. - 5Add
sizesthat matches your layout, for example(min-width: 1024px) 800px, 100vw: full width on small screens, 800 pixels on large ones. - 6Keep a
srcfallback and an accuratealt. - 7Add
widthandheightso the layout does not jump while loading. - 8Test by resizing the browser window and checking in the network panel which file is downloaded.
Using picture for modern formats and art direction
To offer modern formats with a safe fallback, wrap sources in a picture element: <picture><source type="image/avif" srcset="photo.avif"><source type="image/webp" srcset="photo.webp"><img src="photo.jpg" alt="..."></picture>. The browser uses the first source it supports, so nobody sees a broken image.
Create the WebP version with JPG to WebP. The format guide explains when AVIF is worth the extra effort.
The same element can show a different crop on small screens using media attributes, for example a tighter square crop on phones. Crop Image helps prepare each version. Keep this for cases where the subject really needs it, because every version adds work.
Common mistakes
- Writing a
sizesvalue that does not match the layout. The browser then picks the wrong file. - Creating versions by resizing a copy of a copy, which loses quality.
- Lazy loading the first image. See the lazy loading guide.
- Forgetting
widthandheight, which causes layout shifts. - Hand-writing everything when your CMS already generates
srcset. Check the HTML first.
Frequently asked questions
What is the difference between srcset and sizes?
srcset lists the available files and their widths. sizes tells the browser how wide the image will be displayed, so it can choose the best file before the page layout is known.
When should I use the picture element?
Use it when you want to offer modern formats such as WebP or AVIF with a fallback, or when a different crop works better on small screens. For simply providing different sizes of the same picture, srcset on an img element is enough.
How many image sizes do I need?
Three or four widths cover most sites, for example 480, 800, 1200 and 1600 pixels. More versions give a closer fit but add work and storage.
Does WordPress do this automatically?
Yes, WordPress generates several sizes and adds srcset to images in content. Check your theme and plugins to make sure they keep that markup, and optimise the original before uploading.
Do responsive images help SEO?
Indirectly. Smaller downloads improve speed and Core Web Vitals, which supports page experience. They do not change how search engines understand the picture, so keep good alt text and file names.