Image Optimization Checklist

Use JPG for photographs

Best compression for complex photographic images. Quality 75-85 is a good starting point.

Use PNG for graphics with transparency

Screenshots, logos with transparent backgrounds, and images with sharp edges.

Use WebP as the modern default

25-35% smaller than JPG with similar quality. Serve with JPG/PNG fallback using <picture>.

Use SVG for icons and logos

Infinite scalability, tiny file size for simple graphics. Not suitable for photographs.

Compress all images before upload

Use tools like Image Compressor to reduce file sizes without visible quality loss.

Target under 200KB for most images

Hero images can be larger (up to 500KB), but most content images should be well under 200KB.

Strip unnecessary metadata

Remove EXIF data, GPS coordinates, camera info, and other metadata unless needed. Metadata Remover Tool →

Serve images at their display size

Don't serve a 4000px image in a 400px container. Resize to the actual display dimensions.

Use responsive images with srcset

Provide multiple image sizes and let the browser choose the best one for the device.

Always specify width and height

This prevents layout shifts (CLS) while images load. The browser reserves space based on these attributes.

Use native lazy loading for below-the-fold images

Add loading="lazy" to images that appear below the initial viewport.

Don't lazy-load the LCP image

The largest contentful paint image should load immediately. Use fetchpriority="high" instead.

Preload critical fonts

If using custom fonts, preload the most important weights to prevent FOIT/FOUT.

Use the <picture> element for format fallbacks

Serve WebP with JPG fallback, or AVIF with WebP fallback, using the picture element.

Use Content Delivery Networks for static assets

CDNs serve images from locations closer to users, reducing latency.