Responsive images let a browser choose an appropriate file for the displayed image and device. Making an image appear smaller with CSS does not by itself reduce the downloaded file.
What WordPress supplies
When an image is uploaded, WordPress can generate several sizes, depending on registered sizes and the image-processing support on the server. For supported attachment output, WordPress can add srcset candidate URLs and a sizes hint to the HTML.
The browser chooses a candidate using the rendered size, available hints and device pixel density. A high-density phone can legitimately download a larger file than its CSS width suggests.
A remote image URL pasted into a block does not automatically become a Media Library attachment or receive generated local variants. Upload your own permitted image through the library when you need WordPress's attachment handling.
Check a real image
- Open the public page and inspect the image using browser developer tools.
- Look for srcset and sizes on the image element. Also note its width and height.
- Use the Network panel, filter for images and reload at a mobile viewport.
- Inspect the requested file, transferred size and displayed dimensions.
- Repeat at desktop width under the same conditions. Browsers can reuse a cached larger candidate, so use a clean reload when comparing.
If the page displays a small image but requests the original huge upload, inspect the block's selected resolution, theme output and any image plugin. Do not infer successful delivery from the file extension alone.
Improve the source before adding tools
Crop to the intended composition and upload a sensible maximum dimension for the design. Avoid shipping a print-resolution photograph for a small card. Keep an original copy outside WordPress before applying destructive compression.
Choose an appropriate Image block resolution where available. Supply useful alternative text for informative images; decorative images should have empty alt text. Do not put text essential to understanding the page only inside a photograph.
Preserve the image's aspect ratio and dimensions so the browser can reserve space. An image that arrives without reserved space can move surrounding content.
Handle the image at the top of the page
The image that becomes the page's Largest Contentful Paint needs timely loading. Check actual HTML and network requests before adding lazy loading or preload rules. Lazy loading an important visible hero image can delay it.
WordPress and plugins can adjust loading behavior. Avoid several optimization tools making competing changes to the same image. Use the LCP guidance to distinguish late discovery, download time and rendering delay.
When variants are missing
A newly activated theme can request sizes that older uploads do not have. Investigate which files exist and whether a supported regeneration tool is needed. Back up uploads before a bulk operation, confirm storage capacity and test a small set first.
For format conversion, compare image-plugin trade-offs, including server compatibility, remote processing and how replacement files are delivered. Creating a WebP file is only useful if visitors receive it.
Sources & verification
Sources checked October 1, 2026. Documented behavior is distinct from hands-on testing.