Why Image Size Should Match the Screen
Responsive images serve different-sized files to different devices so a phone does not download a 2000px-wide image meant for a desktop monitor. Without responsive images, mobile visitors download far more data than their screen can display — a 1920px hero image viewed on a 375px phone wastes roughly 80% of the downloaded pixels.
The srcset and sizes attributes on <img> tags give the browser a menu of available image sizes. The browser picks the best match based on the viewport width and the device’s pixel density, downloading only the file it actually needs.
How srcset Works
The srcset attribute lists multiple versions of the same image at different widths:
<img srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w" sizes="(max-width: 600px) 100vw, 800px" src="photo-800.jpg">
The browser reads the sizes attribute to determine how wide the image will display, then picks the smallest file from srcset that covers that display width at the current pixel density. A phone with a 375px viewport and 2x display would select the 800w version. A desktop at 1x would also pick 800w. A 2x desktop would pick 1600w.
WordPress and Responsive Images
WordPress has generated responsive images automatically since version 4.4. When you upload an image, WordPress creates multiple sizes (thumbnail, medium, medium_large, large, and any custom sizes registered by your theme). It adds the srcset attribute to images in post content automatically.
However, WordPress can only include sizes it has actually generated. If your theme does not register intermediate sizes, there may be large gaps between available widths — jumping from 300px to 1024px with nothing in between. This forces mobile visitors to download the larger file.
The LCP Connection
When your hero image is the LCP element, responsive images directly affect your Largest Contentful Paint score. A mobile visitor downloading a 400KB desktop-sized hero image instead of a 100KB mobile-optimized version waits three to four times longer for the LCP element to appear. Properly sized responsive images can cut LCP by hundreds of milliseconds on mobile.
Common Gaps
Page builder images, background images set via CSS, and dynamically inserted images often bypass WordPress’s responsive image system entirely. These images may be served at their full uploaded resolution to every device. Check your page builder’s image settings — many support responsive image output, but it may need to be explicitly enabled.
Also watch for images served via CSS background-image. The srcset mechanism only works on <img> elements. Background images require media queries or the image-set() function to serve different sizes — and most WordPress themes and builders do not implement this.
Further Reading
- Serve responsive images (web.dev) — Step-by-step guide to srcset, sizes, and choosing the right breakpoints.
- Responsive images (MDN) — Technical reference covering srcset, sizes, and the picture element.