Website Image Optimization Checklist 2026

Format selection

Photos and complex images: use WebP with JPG fallback
Graphics, logos, icons: use SVG where possible, PNG otherwise
Screenshots with text: use PNG (no compression artifacts on text)
Consider AVIF for maximum savings if your stack supports it

Detailed comparison: Best Image Format for Web in 2026

Dimensions and sizing

Never upload images larger than they display (a 4000px image in an 800px slot wastes bandwidth)
Provide 2x dimensions for retina displays (1600px for an 800px display slot)
Use the HTML srcset attribute for responsive images
Set explicit width and height attributes to prevent layout shifts (CLS)

Resize to exact specs: Image Cropper

Compression

Compress all images before upload -- even WebP benefits from tuning
JPG quality 75-85 for web (visually identical to 100, much smaller)
Strip EXIF metadata (saves 5-30 KB per image, removes GPS data)
Target under 200 KB for content images, under 500 KB for hero images

Free tool: Image Compressor

Loading performance

Add loading="lazy" to all images below the fold
Do NOT lazy-load the hero image or LCP element
Add fetchpriority="high" to the hero image for faster LCP
Use decoding="async" on non-critical images
Preload critical above-the-fold images with <link rel="preload">

SEO and accessibility

Add descriptive alt text to every image (not keyword stuffing)
Use descriptive file names (red-running-shoes.webp not IMG_4392.webp)
Include images in your XML sitemap if they are important for search
Ensure images are crawlable (not blocked by robots.txt or noindex)

Hosting and delivery

Serve images from a CDN (most modern hosts include one)
Set long cache headers for images (Cache-Control: max-age=31536000)
Use immutable cache for versioned image URLs
Enable HTTP/2 or HTTP/3 for parallel image loading

Tools summary

All of these tools run in your browser. No upload, no account, no watermark.

Image Compressor -- reduce file size
Image Cropper -- resize to exact dimensions
WebP to JPG | JPG to WebP -- format conversion
PNG to JPG | JPG to PNG -- format conversion

Frequently asked questions

How do I know if my images are slowing down my site?

Run Google PageSpeed Insights or Lighthouse. Look for the Properly size images and Serve images in next-gen formats opportunities. These tell you exactly which images to fix and the potential savings.

Is it worth switching all images to WebP?

For most sites, yes. WebP reduces image payload by 25-35% with no visual quality loss. The main exception is if you need to support very old browsers, in which case serve WebP with JPG fallback using the picture element.

How does image optimization affect Core Web Vitals?

Images directly impact LCP (Largest Contentful Paint) and CLS (Cumulative Layout Shift). Optimized images load faster (better LCP) and setting explicit dimensions prevents layout jumps (better CLS). Both are Google ranking factors.

Website Image Optimization Checklist