Why Does My Website Download Large Images on Mobile?
Understand why CSS resizing may still download a huge image, and check responsive source selection using the actual file requested on mobile.
Part of our guide: The Complete Guide to Website Speed for Business Owners
An image can look small on a phone while the browser still downloads a large original. CSS controls how an image is displayed; it does not necessarily change which file is requested.
Responsive image delivery supplies alternatives and enough information for the browser to choose between them. Check which file the browser downloads as well as how the picture fits on screen.
Compare display size and source size
Choose a visibly large image on an important page. Ask the developer to record its rendered size, intrinsic pixel dimensions and actual network transfer.
A fictional service card might display a photograph about 350 CSS pixels wide while requesting a much larger original. High-density screens can legitimately need more source pixels than the CSS width, but that does not justify every oversized download.
Use a fresh, controlled test so an earlier cached image does not confuse the comparison.
Understand the browser’s choices
MDN’s responsive-image guide explains how srcset supplies candidate images and sizes describes the intended display slot. The picture element can support art direction or format alternatives.
The browser considers the available candidates and viewing conditions. Do not promise that every phone will request one fixed filename.
A sizes value that describes the image as much wider than its actual layout can encourage an unnecessarily large selection even when smaller files exist.
Inspect one image end to end
| Check | Evidence |
|---|---|
| Layout slot | Width at the tested viewport |
| Candidate files | Available dimensions and formats |
| Markup hints | Whether they reflect the actual layout |
| Selected source | The URL the browser chose |
| Transfer | Size of the requested resource |
Record browser, viewport and device pixel ratio with the result. That makes a later before-and-after comparison interpretable.
Do not compare a cached desktop request with a fresh mobile request and attribute the difference entirely to the image change.
Keep cropping separate from resolution
A narrow card may need a different crop, not merely a smaller version of the same wide picture. Check that the important subject remains visible.
For an illustrative team photograph, shrinking a wide group into a tiny square may make every face unreadable. A deliberate mobile crop can solve a communication problem that compression alone cannot address.
Keep that editorial decision separate from the technical choice of file dimensions.
Check how your platform generates variants
Some content systems create several sizes on upload. Others need an image service or build process. Existing variants are useful only if the rendered page actually references them correctly.
Ask who maintains the pipeline and what happens when an editor replaces an image. Avoid a setup where every new upload silently bypasses the optimisation process.
The image-format guide covers encoding choices. Format, dimensions and responsive selection should work together.
Do not confuse responsive images with lazy loading
Lazy loading changes when an image is requested. Responsive selection changes which candidate is used. Both can matter, but they solve different problems.
The lazy-loading guide explains why important initially visible images need different treatment from content far down the page.
A huge image delayed until later remains huge when it eventually loads.
Verify the customer-facing result
Test a narrow phone layout and a wider view after the change. Check both the downloaded resource and visible quality, including the focal crop and layout stability.
Use the speed guide to relate the result to useful page behaviour. Record actual measured changes without promising the same savings on every page or device.
Check that the image setup selects suitable files consistently across screen sizes and conditions.
Thinking about your own rebuild?
Tell us about your business, your current website and what you would like to improve. We will help you work out the next step.
