Think about a single banner image on your website. A visitor on a phone needs maybe 400 pixels of width. A visitor on a big desktop monitor might need 1600. If you serve the same giant file to both, the phone user downloads far more than they can use. Responsive images solve that, and the syntax is less scary than it first looks.
The basic idea
You prepare the same image at several widths, then tell the browser what’s available. The browser looks at the visitor’s screen size and pixel density and downloads just the best fit. You don’t write any JavaScript. It’s all done with two HTML attributes.
A simple example
<img
src="cafe-800.jpg"
srcset="cafe-400.jpg 400w,
cafe-800.jpg 800w,
cafe-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 800px"
width="800" height="533"
alt="Customers at a small corner cafe">Reading it line by line
src is the fallback. Browsers that don’t understand srcset use this one.
srcset is the menu. Each entry is a file name followed by that file’s real width in pixels, marked with a w. So cafe-400.jpg 400w means “this file is 400 pixels wide.”
sizes tells the browser how wide the image will actually appear on the page. In the example, on screens up to 600 pixels wide the image fills the full width (100vw), and on larger screens it displays at 800 pixels. The browser combines that with the screen’s pixel density to choose a file from the menu.
An important detail: the browser is making the final decision, not you. It may pick a larger file on a sharp high-density display. That’s by design.
How many sizes do you need?
Three or four is usually plenty. Something like 400, 800, 1200 and 1600 pixels wide covers most layouts. More versions mean more files to manage with diminishing returns. You can create each size from your original using a resizer. Always start from the original so quality stays high, as explained in resizing without losing quality.
What about WordPress?
Good news: WordPress generates several sizes of each upload automatically and adds srcset to your images for you. If you use the standard image block, you’re probably already getting responsive images. The catch is that WordPress can only create smaller versions of what you give it, so uploading a reasonably sized original, not a 6000-pixel camera file, still matters. See our guide to WordPress featured image size for the settings.
The picture element for formats
If you want to offer a modern format like WebP or AVIF with a JPG fallback, wrap the image in a picture element with multiple source tags. Browsers pick the first format they support. It’s a good way to adopt newer formats safely. We talk about those in what is AVIF and the best image format for web.
Common mistakes
- Forgetting the width and height attributes, which causes layout shifts
- Writing a
sizesvalue that doesn’t match how the image actually displays - Uploading one huge original and relying on the browser to shrink it, which still downloads the huge file
Is it worth the effort?
For image-heavy sites, yes. It cuts the amount of data mobile visitors download, speeds up pages, and helps with the speed metrics Google measures. For a small site with a handful of images, getting the basics right (resize, compress, set dimensions) matters more.
Need the multiple sizes for your own images? Run your original through our online image resizer once per width and you’re set.