Your website photo looks small on a phone, but the browser may still download the large desktop file. CSS can shrink the displayed box without reducing the bytes transferred. Start by checking what the device actually requests.
For a business service page or product catalogue, the objective is a suitably sharp image with a sensible download cost. This is a focused image-delivery review, rather than a promise that changing one setting will fix every website performance problem.
Original illustration of appropriately sized image variants for different screens, not a performance measurement or genuine browser interface.
Compare the displayed image with the downloaded file
Choose a real landing page and identify its main image and repeated thumbnails. In browser developer tools, record the requested image URL, transfer size, pixel dimensions and the size of its displayed box. Repeat with a narrow viewport and a fresh page load so a previously cached larger file does not confuse the comparison.
Do not judge solely by file extension or a designer’s export name. A compressed photograph can still be unnecessarily large, and a small file can look poor if it lacks detail for its actual use. Check the real content at a readable zoom level.
Give the browser an accurate choice
Google’s responsive-image guidance explains how candidate files and layout information help the browser choose an appropriate resource. With width descriptors, srcset identifies the available image widths, while sizes describes the expected display slot. Those hints should reflect the layout rather than a copied generic value.
A high-density phone can reasonably request more image pixels than its CSS display width. A request for a larger candidate is not automatically a defect. The browser also has its own selection behaviour, so avoid acceptance rules that demand one exact file on every device.
ITZ’s website speed optimisation service can review the delivered assets and their markup together. Review Your Website Image Delivery with a slow page and the images that matter most to customers.
Separate resizing from changing the composition
A smaller copy of the same photo helps efficient delivery. A different crop may be needed when a wide desktop composition makes the subject unreadable on mobile. MDN’s responsive-image guide distinguishes resolution switching from art direction using the picture element.
Have a business reviewer confirm that every crop still communicates the intended service or product. Keep meaningful alt text consistent with what the visitor receives. Avoid cropping away safety information, a product variant or another detail that changes the image’s meaning.
Handle the first image and later images appropriately
Review whether the main visible image is delayed by a lazy-loading rule intended for content farther down the page. Conversely, loading a long catalogue’s full-size images immediately can add unnecessary work. Choose behaviour according to placement and test it on the actual page.
Reserve the image’s layout space with appropriate dimensions or a matching aspect ratio, and inspect whether the page shifts while it loads. Preserve a valid fallback for unsupported formats and check that every referenced variant exists. Optimising a file that the page never uses has no customer benefit.
Use a repeatable before-and-after check
- Keep the page, viewport, connection simulation and cache conditions comparable.
- Check that the intended responsive candidates appear in the rendered markup and identify the file actually requested.
- Compare transfer size and visual quality for the hero and several repeated thumbnails.
- Check narrow and wide layouts, a high-density display and a longer page reached by scrolling.
- Confirm image links, alt text, social previews and enquiry controls still work.
The broader website performance guide covers loading, responsiveness and stability. Image changes should be reviewed alongside other resources and available real-user evidence. A lower image byte count is an implemented improvement; ranking, conversion and Core Web Vitals gains need their own measurements.
Keep future uploads under control
Document the required crops, candidate widths and editorial workflow. If staff can upload new images through a CMS, check whether its processing pipeline creates and serves the variants automatically. Include a sample new upload in the release checklist so the improvement survives the next content update.
Review Your Website Image Delivery
Share the page address, device symptoms and examples of imagery that must remain clear. ITZ can discuss responsive files, crop choices, loading behaviour and verification. Review Your Website Image Delivery through this article’s enquiry form.
Primary references reviewed on 8 November 2026. No measured performance, search-ranking or lead gain is claimed.
