Implement responsive srcset with fallback formats for all images.
Save for later 0
Use × to move an item here. You can restore it when you’re ready.
Your checks and saved items stay in this browser. Nothing is submitted.
Why this matters
Delivering appropriately sized images with modern formats and fallbacks improves loading speed, mobile performance, and image SEO visibility.
Hypothetical standard operating procedure
Adapt this example to your site, access, tools, and change process. It is our suggested procedure, informed by the sources below.
- Audit current images to identify those lacking srcset or fallback formats.
- Generate multiple image sizes optimized for common breakpoints and device pixel ratios.
- Create srcset attributes referencing these sizes and include type-based fallback sources for WebP, AVIF, and JPEG/PNG.
- Update HTML markup or CMS templates to embed responsive srcset with correct width, height, and aspect-ratio attributes.
- Test pages on desktop and mobile devices to confirm appropriate images load and no layout shifts occur on load.
Watch for
Serving large or camera-resolution images without resizing harms page speed and user experience, especially on mobile.
Definition of done
Images load with device-appropriate sizes and formats, verified by inspecting srcset attributes and network requests in browser dev tools showing WebP/AVIF with fallback.
Sources & attribution
Original checklist wording and example SOP by Best SEO Checklist, using source-grounded AI assistance. Editorial contact: Ted Kubaitis, @tedkubaitis on Teams. Check current source guidance before implementation.