Inspect the file the browser selects, not only the dimensions shown in the media library.
Compare display size with selected file
A photograph displayed in a narrow mobile column does not necessarily download a small source. Responsive images can offer candidates through srcset, while sizes describes the expected display width. Google's guidance explains how these help the browser choose a suitable resource. Theme output and page-builder settings influence what is actually delivered.
Inspect one representative image
Choose an article photograph and open the page at a mobile viewport. In developer tools, select its img element and inspect currentSrc to see the chosen URL. Record its transferred bytes, intrinsic dimensions and displayed width. Test a fresh load at the target viewport; changing the window after a larger candidate loads can produce a misleading comparison.
Find where the markup comes from
Check whether the image is inserted as a normal WordPress image, an external embed or a CSS background. Do not assume all three have the same responsive behavior. If the theme emits a sizes value that does not match the layout, give the developer the actual column width and markup. If no suitable smaller candidate exists, investigate how the image sizes were generated.
Check visual quality rather than a fixed ratio
Export or generate a suitable candidate and inspect it on the devices readers use. Look at text embedded in the image, faces and fine product details. A high-density display can legitimately require more pixels than its CSS width. The objective is an appropriate file for the viewing conditions, not the smallest possible file at any cost.
Repeat across templates
Check an article, a product gallery and a landing-page hero. Record each component's selected resource. Keep hero-loading strategy separate from responsive sizing: a correctly sized file can still start too late. Use the worksheet to show the responsible theme or builder component exactly where excessive image data is being downloaded.
Put it into practice
- Open a fresh mobile-sized page load.
- Record currentSrc, bytes and display width.
- Inspect srcset and sizes where present.
- Identify the component producing the markup.
- Review quality on representative devices.
AI-assisted educational content prepared for the Velonic resource library. How these guides are prepared.