Image Optimization Checklist for Websites 2026

Q: What is the most important image optimization for websites?

Converting images to WebP or AVIF and resizing them to their display dimensions are the two highest-impact optimizations. Together, they typically reduce image payload by 50–80%, directly improving LCP scores and page load speed.

Q: What image size is best for a website?

Images should be no larger than their display size. For a hero image displayed at 1200px, serve a 1200px (or 2400px for retina) image. For thumbnails displayed at 400px, serve a 400px or 800px image. Use the srcset attribute to serve appropriate sizes to different screen widths.

Q: Should I use WebP or AVIF for my website?

AVIF offers better compression (typically ~50% smaller than JPG vs WebP's ~30%), but use the picture element to serve AVIF with a WebP fallback and JPG as the base fallback for maximum compatibility. AVIF is supported in all major browsers as of 2023, but serving fallbacks is still best practice.

Q: Does image optimization affect SEO?

Yes, directly and indirectly. Directly: optimized images improve Core Web Vitals (particularly LCP), which are ranking signals. Indirectly: proper alt text, descriptive file names, and image sitemaps help Google understand and index your images, contributing to image search visibility and overall page relevance.

Format Selection (Steps 1–4)

Format

1 Use WebP for all photos and general web images High Impact
WebP achieves ~30% smaller files than JPG at equivalent perceptual quality. It's supported in all modern browsers. Convert with IMGVO JPG→WebP or PNG→WebP.
2 Use AVIF where maximum compression is needed High Impact
AVIF is ~50% smaller than JPG. Serve it via the <picture> element with a WebP fallback. All major browsers support AVIF since 2023.
3 Use PNG only for images requiring lossless quality or transparency Medium
PNG makes sense for logos, icons, screenshots, and UI graphics where exact pixel values matter. For photos, PNG is wasteful — use WebP or AVIF instead.
4 Never use GIF for new images Medium
GIF is limited to 256 colors and produces large files. Replace animated GIFs with <video autoplay loop muted playsinline> using WebM/MP4, which is 5–10x smaller.

Compression & File Size (Steps 5–8)

Compression

5 Compress all images before uploading High Impact
Run every image through a compressor before adding it to your site. Use IMGVO Compress — quality 75–85 for photos, 85–90 for product images with fine detail.
6 Target under 200 KB for most web images High Impact
Hero images should be under 300 KB. Card thumbnails under 80 KB. Icons under 20 KB. These are starting targets — adjust based on visual quality requirements.
7 Strip EXIF metadata from all published images Medium
Camera photos embed GPS coordinates, device info, and timestamps in EXIF metadata — adding unnecessary bytes and potentially exposing private data. Use IMGVO EXIF Remover.
8 Use lossless compression for PNG icons and logos Medium
For PNG files, use a lossless optimizer (like IMGVO's compress tool at quality 100) or run through tools like pngquant which uses quantization to reduce palette size without visible quality loss.

Sizing & Responsive Delivery (Steps 9–12)

Sizing

9 Resize images to their display dimensions before uploading High Impact
Never upload a 4000px image for an 800px display slot. Use IMGVO Resize to export at the correct dimensions. For retina displays, export at 2x the CSS display size.
10 Use srcset for responsive images High Impact
Provide multiple resolutions and let the browser pick the right one: srcset="img-400.webp 400w, img-800.webp 800w, img-1600.webp 1600w" paired with a sizes attribute.
11 Always specify width and height attributes on every img element High Impact
This prevents layout shift (CLS) by letting the browser reserve space before the image loads. It's the single easiest CLS fix available.
12 Add CSS max-width: 100% to prevent overflow on small screens Low
Even with width/height set, add img { max-width: 100%; height: auto; } globally to prevent images from breaking the layout on narrow viewports.

Loading Strategy (Steps 13–15)

Loading

13 Add loading="lazy" to all below-the-fold images High Impact
This defers download of images not visible in the viewport, reducing initial page weight and improving LCP. Apply to all images except the hero/LCP image.
14 Preload the LCP (hero) image and add fetchpriority="high" High Impact
Add <link rel="preload" as="image" href="hero.webp"> in the <head> and fetchpriority="high" on the img element. This is the most impactful single LCP optimization.
15 Never lazy load the LCP image High Impact
Applying loading="lazy" to the hero image delays the LCP metric and directly worsens your Core Web Vitals score. Check this carefully after any template changes.

SEO & Metadata (Steps 16–18)

SEO

16 Write descriptive alt text for every image High Impact
Alt text is how Google understands image content. Be specific and descriptive. Keep it under 125 characters. Include keywords naturally but don't stuff. Decorative images should have alt="".
17 Use descriptive, keyword-relevant file names Medium
Name files fresh-sourdough-bread.webp, not IMG_4892.webp. Use hyphens, not underscores. This is a minor but free signal for Google Image Search.
18 Add image entries to your XML sitemap Medium
Use image:image extensions in your sitemap to help Google discover and index all your images, especially important for e-commerce product images and portfolios.

Delivery & Infrastructure (Steps 19–20)

Delivery

19 Serve images from a CDN Medium
A CDN serves images from edge nodes geographically close to each user, reducing latency. Most modern hosting platforms (Netlify, Vercel, Cloudflare Pages) include CDN delivery automatically.
20 Set long Cache-Control headers for images Medium
Images rarely change — set Cache-Control: max-age=31536000, immutable (1 year) so repeat visitors load images instantly from browser cache. Use a content hash in filenames to bust cache on updates.

Frequently Asked Questions

What is the most important image optimization for websites?

Converting to WebP/AVIF and resizing to display dimensions are the two highest-impact steps — they typically reduce image payload by 50–80%, directly improving LCP and PageSpeed scores.

What image size is best for a website?

Images should match their display size. Hero images: serve at 1200–2400px wide. Card thumbnails: 400–800px. Icons: 64–128px. Use srcset to serve appropriate sizes to different screen widths.

Should I use WebP or AVIF for my website?

Use both via the picture element: AVIF as the primary source, WebP as fallback, JPG as the base. AVIF is ~50% smaller than JPG; WebP is ~30% smaller. This approach gets maximum compression for supporting browsers while ensuring universal compatibility.

Does image optimization affect SEO?

Yes — both directly through Core Web Vitals (LCP is a ranking signal) and indirectly through alt text, file names, and image sitemaps which help Google understand and index your images.

How do I check if my images are optimized?

Run your page through Google PageSpeed Insights (pagespeed.web.dev). It flags unoptimized images, oversized images, and lazy loading issues with specific file-by-file recommendations.