Web image optimization is a sequence of decisions: how large the image is displayed, which format fits the content, how much data is sent, and how the browser loads it. Start with the page’s real layout rather than a universal file-size target.
1. Identify the display size
Inspect the image’s CSS size on the devices that matter. An image should not be sent at a dramatically larger width than the layout requires unless a higher device pixel ratio or an editing workflow justifies it. Include width and height information so the browser can reserve space.
2. Select a suitable format
Photographs, transparent graphics, line art and animations have different format needs. Consider JPEG, PNG, WebP, AVIF or SVG according to the content and the browsers or applications that must open the result. When using modern formats, provide an appropriate fallback where the delivery setup requires one.
3. Create responsive candidates
For layouts that change across viewports, `srcset` and `sizes` can describe several image candidates. The browser can then choose a source closer to the rendered size. Keep the set of variants manageable; adding many files also adds maintenance and cache complexity.
4. Choose loading behavior
Images below the initial viewport can often use lazy loading. The main image that establishes the first view should be treated differently and measured in context. Avoid lazy-loading every image by default.
5. Measure the page after publishing
Use browser developer tools or PageSpeed Insights to compare the page before and after the change. Record the URL, device emulation, network profile, image candidates loaded and any visible quality or layout issue. A tool result for one file is not a performance result for the whole site.
A page-level measurement record
For each before-and-after comparison, record the page URL, viewport, network profile, image URL, requested candidate, transferred bytes, displayed dimensions and any layout movement. This separates image optimization from unrelated changes such as script, font or server timing changes.
A common failure pattern
A smaller source file can still produce a slower page if the browser downloads an oversized candidate, the main image is lazy-loaded, or the page contains several competing assets. Inspect the network waterfall and the rendered layout instead of judging the source file in isolation.
Acceptance details
A result is acceptable only when it meets the destination requirement, opens correctly and passes the visual or technical check described above. The output may be smaller, similar in size or larger than the source; record what actually happened instead of replacing the observation with a target percentage.
Sources and further reading
web.dev: Image performance provides examples for sizing, `srcset`, `sizes`, formats and lazy loading. Google Search Central’s image guidance covers discoverability and useful alt text.