1. Classify the image before you optimize it
Inventory images by template. Record each image’s role, largest and smallest rendered width, initial-viewport status, and whether small screens need another crop. This turns file-size work into decisions you can test on important pages.
Photos often tolerate reviewed lossy compression. Logos, interface symbols, line art, and charts may suit SVG or a raster format that protects sharp edges. SVG is suited to line art, diagrams, and charts, not detailed photos.
Keep essential detail and provide text that conveys the image’s purpose.
Use an empty alternative text; do not make it the only source of important information.
Name the action or destination, not merely the image’s pixels.
2. Size for the rendered slot, then offer responsive candidates
Match intrinsic dimensions to the CSS slot. A desktop-scale file in a narrow card wastes transfer; a small raster stretched too far becomes soft. Account for device pixel ratio, but validate visually rather than assuming every screen needs the largest candidate.
For one composition at several widths, use srcset width descriptors and use sizes to state the actual slot width. The browser then chooses a candidate. Use picture for art direction: a small-screen crop that preserves the subject is different from merely shrinking the desktop image. Keep an img fallback with src and alt inside picture.
Same composition, different pixel dimensions.
Different crop or composition when scaling hides the message.
Keep src on img for clients that do not use responsive attributes.
3. Choose format and compression by image characteristics
WebP and AVIF can reduce raster transfer in appropriate cases, but format is not a quality guarantee. Test representative faces, fine texture, brand gradients, baked-in text, and transparency. JPEG remains a common photo fallback; PNG can suit lossless raster detail or transparency. Check AVIF support and operational fit for your audience and delivery stack.
Lossy compression removes information to save bytes and is usually more forgiving on detailed photos than sharp lines or text. Lossless compression preserves encoded pixels but may save less. Choose quality by side-by-side review at the rendered size, not a copied numeric setting. Remove metadata only after confirming orientation, color, and workflow needs.
Compare lossy AVIF, WebP, and JPEG fallback at display size.
Prefer suitable SVG or protect crisp raster edges through testing.
Confirm alpha appearance in every delivered format and fallback.
4. Make markup protect speed and layout stability
Give every content img width and height attributes matching its intrinsic aspect ratio. The browser can reserve space before the file arrives, reducing layout movement. CSS can still set the displayed dimensions.
Use loading=lazy only outside the initial viewport. Do not lazy-load an image likely to be visible at load, particularly a Largest Contentful Paint candidate. LCP is the render time of the largest image, text block, or video visible in the viewport. fetchpriority=high is only a relative hint; apply it sparingly and measure the result. Use HTML image markup for content that needs alternative text or image discovery; Google documents that it does not index CSS images.
Set width and height, including on lazy-loaded gallery images.
Keep likely LCP images eager and inspect request priority.
Lazy-load offscreen images and test scrolling on a constrained network.
5. Preserve meaning, discovery, and visual quality
Alternative text depends on purpose and context. Describe essential information for an informative image, use alt="" for decoration, and name the function of a linked or button image. For a complex chart or diagram, provide an equivalent explanation in nearby text. Do not use keyword lists.
For discoverable content images, use standard HTML image elements, relevant nearby text, short descriptive filenames where practical, and a fallback source with responsive markup. Do not turn decorative backgrounds into redundant content merely for discovery.
Review compressed files at largest and smallest intended sizes.
Prefer regular text; otherwise provide equivalent wording.
Place informative images near relevant page text.
6. Verify the page, not only the asset
Test representative pages at narrow and wide viewports. In browser developer tools, inspect the srcset candidate, transfer size, rendered dimensions, and layout movement. Throttle the network to reveal late hero images and slow galleries. An export comparison cannot reveal an inaccurate sizes value, unexpected crop, or production transformation problem.
Use lab and field signals when available. Lighthouse and PageSpeed Insights can identify improperly sized images; field LCP reflects real visits over time. Compare the same template, device class, release version, and measurement window. Do not credit images for a metric change when server time, scripts, fonts, or third parties also changed. Stage shared-template changes and retain a rollback path until validated.
Confirm the slot does not select an unexpectedly oversized candidate.
Check crop, sharpness, color, alternatives, and layout stability.
Name the owner, expected signal, and reversal path.