Image Optimization Checklist for Web Developers

A practical, copy-paste-ready checklist covering every image-related performance fix that matters in 2026.

The complete image optimization checklist for 2026. Run through it on every new project. Bookmark for code reviews.

Pre-upload (do BEFORE images get to production)

[ ] Resize source to max display width. No source larger than the largest responsive breakpoint × device pixel ratio.
[ ] Convert to WebP (and optionally AVIF). Use PNG to WebP or Image Compressor.
[ ] Compress at quality 80-85. Visually lossless, ~50% smaller than source.
[ ] Strip metadata if the image is being shared publicly. Use EXIF Remover for sensitive content.
[ ] Verify dimensions. Sanity-check the longest side matches your design's max display width.

HTML markup

[ ] width and height on every <img>. Prevents layout shift.
[ ] alt text on every <img>. Empty alt="" only for purely decorative images.
[ ] loading="lazy" on offscreen images. Default for content below the fold.
[ ] loading="eager" on the hero image. Never lazy-load the LCP candidate.
[ ] fetchpriority="high" on the hero image. Boosts download priority.
[ ] decoding="async" on non-hero images. Allows the browser to decode off the main thread.
[ ] <picture> element for next-gen formats. AVIF first, WebP second, JPEG fallback.

Example template:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Descriptive alt text"
       width="1600" height="900"
       loading="lazy" decoding="async">
</picture>

Responsive images

[ ] srcset for each format. Multiple sizes at different w descriptors.
[ ] sizes attribute matches your CSS-defined display width per breakpoint.
[ ] DPR variants: ship 1x, 2x, and 3x where appropriate.

Example:

<img src="hero-800.webp"
     srcset="hero-400.webp 400w,
             hero-800.webp 800w,
             hero-1600.webp 1600w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="...">

Performance hooks

[ ] Preload the hero image if it's the LCP candidate:

<link rel="preload" as="image" href="hero.avif" type="image/avif">

[ ] Preconnect to image CDN:

<link rel="preconnect" href="https://images.yourdomain.com">

CSS

[ ] CSS aspect-ratio on parent containers when intrinsic dimensions can't be on the <img>.
[ ] object-fit: cover for cropped fills.
[ ] No background-image for content images. CSS-loaded images are de-prioritized; use <img> for LCP candidates.

Server / CDN

[ ] CDN for image delivery. Reduces latency, can do format conversion automatically.
[ ] Long cache headers. Images that won't change → 1 year max-age.
[ ] Image transforms via CDN. Auto-resize and auto-format based on Accept header.
[ ] HTTP/2 or HTTP/3. Multiplexed image downloads.

Auditing

[ ] PageSpeed Insights for the homepage and 2-3 key pages.
[ ] Lighthouse CI in CI pipeline. Fail builds that regress LCP > 2.5s.
[ ] Real-User Monitoring (RUM). Capture field LCP, INP, CLS.
[ ] Chrome DevTools Network panel: confirm WebP/AVIF actually served, not JPEG.

Common mistakes to verify against

[ ] No image > 500 KB above the fold.
[ ] No PNG used for photographs.
[ ] No CSS background-image as the LCP element.
[ ] No lazy-loaded hero.
[ ] No image without alt or aria-label.
[ ] No image without width and height.
[ ] No <picture> element with WebP before AVIF.

Tools used

Image Compressor: multi-format batch compression
PNG to WebP: single-purpose PNG → WebP
AVIF Converter: AVIF encoding
Social Media Image Resizer: resize to specific dimensions
EXIF Remover: strip metadata before sharing

All client-side, no uploads. Safe for any image content.

Try Image Compressor, free in your browser

No uploads, no account. Your images never leave your device.

Open Image Compressor