You switch Chrome to a phone-sized view, open the Network tab and see it: a photo displayed about the width of a thumb is being downloaded at 2048 pixels wide. WordPress made smaller copies when you uploaded it. You can see them in the uploads folder. So why is the phone getting the big one?
The answer is in two small attributes on the image tag. This post explains the responsive images srcset attribute and its partner, sizes, in plain language, how WordPress fills them in, and the common ways themes and page builders stop them from working, so that phones get a copy that fits.
The problem srcset solves
A single image tag with one file address forces every visitor to download the same file. Make it big enough for a wide desktop screen and phones download far more than they need. Make it small enough for phones and it looks soft on a large monitor.
Responsive images fix this by offering the browser several copies of the same picture at different widths and letting it pick. The browser knows things the website does not: how wide the screen is, how dense its pixels are, and how wide the image will be once the layout is worked out. Given a list, it can choose sensibly.
This matters most on mobile, where data is slower and often costs money. If phones on your site feel much slower than desktop, oversized images are one of several possible reasons, all covered in our post on why a website is slow on mobile.
Reading responsive images srcset and sizes in plain language
srcset: the menu
The srcset attribute is a list of files with their widths. In words, it says: “here is this photo at 300 pixels wide, here it is at 768, here at 1024, here at 1536.” Each entry is a file address followed by its width, written with a w, such as 768w.
On its own, that is not enough. The browser knows the screen width, but when it starts downloading images it has not yet laid out the page, so it does not know how wide this particular image will appear. A photo might fill the whole screen, sit in a half-width column, or be a small card in a grid of four.
sizes: the hint
The sizes attribute fills that gap. It tells the browser roughly how wide the image will display at different screen widths. In words, a typical value says: “on screens up to 768 pixels wide this image is the full width of the screen; on bigger screens it is about 600 pixels wide.”
The browser combines the two. If the screen is 400 pixels wide and the image fills it, the browser looks for a copy of at least 400 pixels, adjusted for the screen’s pixel density, and downloads the smallest one that fits.
Why a phone may still pick a fairly large copy
Modern phones have high-density screens that pack two or three physical pixels into every pixel the layout uses. A photo displayed 400 pixels wide on such a phone needs a copy of around 800 to 1200 pixels to look sharp, and the browser will choose that. This is correct behaviour. The problem to look for is the phone downloading a copy far larger than even that, such as the 2048-pixel original.
Fixed-size images
For images that always display at the same size, such as a logo, srcset can instead list copies for different pixel densities, written as 1x and 2x. The browser picks the sharper one only on high-density screens.
How WordPress fills these in
When you upload an image, WordPress creates several resized copies. When an image inserted through the editor is shown on a page, WordPress builds the srcset list from the copies that have the same shape as the original and adds a sizes attribute automatically. You do not have to do anything for this to happen.
Two details catch people out:
- Cropped sizes are left out. A square thumbnail is a different shape from a wide photo, so it is not offered as an alternative. If your theme only creates cropped sizes, the list may be short.
- The default sizes value is a cautious guess. Unless the theme changes it, WordPress tells the browser the image may display up to the full width of the chosen size. For an image placed in a narrow column, that guess can be much wider than reality, and the browser downloads a bigger copy than it needs. Recent versions can also add an “auto” value for lazy-loaded images, which lets supporting browsers use the real layout width instead.
Well-built themes adjust the sizes value to match their layout. Many do not, or only do it for blog content and not for their own templates.
How themes and page builders break it
On a plain blog post, responsive images usually work. Elsewhere, these are the common ways they stop working:
- Background images. A hero section or banner built with a background image in CSS has no srcset at all. Every device downloads the same file. Some page builders let you set a separate background image for mobile, which helps if someone remembers to use it.
- “Full size” selected in the widget. Choosing the full or original size in an image widget makes the main address the largest file. Depending on the builder, the srcset may still be there, but sometimes it is dropped.
- Images added by address. Pasting an image URL into a custom HTML block, or a theme option that stores only the file address, gives WordPress nothing to build srcset from.
- Custom fields and templates. Theme code that prints an image address from a custom field, rather than using WordPress’s image functions, produces a plain image tag with no alternatives.
- Sliders and galleries. Many slider plugins write their own image markup and load one size for everyone.
- Missing copies. If you changed theme after uploading, the sizes the new theme expects may never have been created. The list is then built from whatever exists.
Checking which copy a phone actually downloads
- Open the page in Chrome and press F12. Click the device toolbar icon and choose a common phone size.
- Go to the Network tab, tick “Disable cache”, filter by Img and reload.
- Look at the file names. WordPress copies have the dimensions in the name, such as -768×512. An address with no dimensions is the original upload, and one ending in -scaled is WordPress’s own reduced version of a very large upload.
- Compare that with how wide the image appears on the simulated phone, allowing for the device pixel ratio shown in the toolbar.
- For any image that looks too large, right-click it on the page, choose Inspect and check whether the image tag has srcset and sizes at all, and whether sizes makes sense for the layout.
Do this on the home page, a typical inner page and, if you have one, a product page. They are usually built differently and break in different ways. For reading the Network tab in more depth, see our guide to the DevTools Network tab.
Fixes, from simple to technical
Things you can do in the editor or builder
- Use a normal image block or widget for important pictures instead of a section background, so WordPress can add srcset.
- Pick “Large” rather than “Full Size” where the display area is a normal content width.
- Where the builder offers a mobile background image, upload a smaller version for it.
- Replace images added by pasted address with images inserted from the media library.
Things that need a developer
- Correct the sizes value in theme templates so it matches the real column widths.
- Register an extra image size if there is a big gap between the copies, for example between a medium copy and the original for a wide hero.
- Change custom field and template code to use WordPress image functions that output srcset.
- For a different crop on mobile, such as a tall hero image on phones and a wide one on desktop, use a picture element with separate sources. That is called art direction, and it is a design decision as much as a speed one.
After changing image sizes, existing uploads need their copies regenerated. That process, and the reasons images can look blurry or cropped once sizes change, are covered in our post on WordPress image sizes that look wrong. Responsive images are about choosing a copy that is light enough; that post is about copies that look right.
Responsive images are one of several image fixes. For how they fit with format, compression and lazy loading, see our overview of images that slow a website down, and for everything else that affects load time, the full guide to website speed.
Frequently asked questions
Do I need a plugin to serve smaller images on mobile in WordPress?
Usually not. WordPress adds srcset and sizes to images inserted through the editor on its own. A plugin or developer help is needed when your theme, page builder or slider outputs images without these attributes, or when the sizes value does not match your layout and phones keep picking copies that are too large.
Why does my phone download a bigger image than my laptop?
Phones often have denser screens than laptops, so they need more pixels for the same displayed width, and the browser chooses accordingly. It can also happen when the image fills the whole width on mobile but only a narrow column on desktop. Check the displayed width and device pixel ratio before treating it as a fault.
Does srcset work with WebP images and image CDNs?
Yes, as long as the plugin or CDN keeps the srcset list when it rewrites image addresses. Most mainstream image plugins do. If you switch on a CDN image feature and the Network tab suddenly shows one large file for every device, check whether the srcset attribute is still present in the page source.
Will fixing srcset make my images look worse on desktop?
It should not. Desktop browsers still pick a copy wide enough for their display. Quality only drops if the largest copy offered is smaller than the space it fills, which is a sign that the right image size was never created or that the original upload was too small.
When phones still download far too much after the settings are right, the cause usually sits in theme code or builder templates. Image optimisation is part of our website speed optimisation service, and the audit traces where the oversized copies come from before anything is changed.
Next in this series: Do YouTube Embeds Slow Down Your Website? Use a Facade
