Image optimization checklist

Images are usually the single heaviest thing on a typical web page, and they're one of the easiest things to fix without touching a line of application code. This checklist goes deeper than the general performance checklist specifically on getting images right.

Choosing a format

• Photographic images use a modern, efficient compressed format where the platform and audience's browsers support it, with a JPEG fallback for compatibility
• Illustrations, logos and images with flat colors or transparency use a format suited to that content (typically SVG for vector graphics, PNG where transparency is needed and the image isn't a vector)
• Animated content is evaluated for whether it needs to be a heavy GIF at all—a compressed video format is usually dramatically smaller for the same result
• SVG files used on the site are cleaned of unnecessary editor metadata, which can otherwise bloat an SVG far beyond what the actual graphic needs

Compression

• Every image is run through compression before upload—a free browser-based tool such as Squoosh (from Google's Chrome team) makes this easy to check visually before committing to a setting
• Compression is checked visually at real size, not just judged by file size alone—the goal is the smallest file with no visible quality loss at the size it's actually displayed
• Images aren't uploaded at a far larger resolution than any layout on the site will ever display them at
• A build step or CMS media pipeline handles compression automatically wherever possible, so it doesn't depend on every contributor remembering to do it by hand

Responsive images

• Images that appear at different sizes across breakpoints use srcset/sizes (or an equivalent CMS feature) so mobile visitors aren't downloading a desktop-sized file
• Art-directed images—where the crop itself should change between mobile and desktop, not just the size—use the <picture> element rather than one fixed crop for every screen size
• Retina/high-density displays are accounted for without simply doubling every image's size regardless of need

Loading behavior

• Images below the fold are lazy-loaded so they don't compete for bandwidth with what's immediately visible
• The single largest above-the-fold image (often the page's LCP element) is not lazy-loaded, and is prioritized to load as early as possible
• Every image has explicit width and height (or a defined aspect ratio) in the markup so the browser reserves space before the file arrives, preventing layout shift

Delivery

• Images are served from a CDN or the host's built-in image delivery, so visitors download from a server close to them
• Image URLs are cacheable and don't change unnecessarily on every deploy, so returning visitors benefit from browser caching
• Broken images (wrong path, deleted file, failed upload) are checked for across the whole site, not just spot-checked on a couple of pages

Accessibility & SEO

• Every meaningful image has descriptive alt text; purely decorative images use an empty alt="" (see the accessibility checklist)
• Image file names are descriptive rather than generic, which also helps image search discoverability
• Product and content images intended to appear in image search or rich results are large enough and clear enough to actually be useful there

Once images are optimized, re-check the page with Google PageSpeed Insights or Lighthouse and confirm the Largest Contentful Paint improved—for most content-heavy or image-heavy sites, this single checklist has the biggest visible impact on the performance checklist as a whole.