Slow page loads kill conversions. Studies show 40% of users abandon a site that takes more than 3 seconds. The biggest cause? Unoptimized images. A single 5 MB photo on your homepage can balloon load time even on fast connections.

The image optimization checklist

Right dimensions — don't ship a 4000px image where you display 800px
Right format — modern WebP/AVIF, fallback JPG/PNG
Right compression — 75–85% quality for photos, lossless for graphics
Right delivery — lazy loading, responsive srcset

Recommended dimensions in 2026

Hero images: 1920×1080 (Full HD) or 2560×1440 (2K) max
Blog post hero: 1200×675 (16:9)
Product photos: 1500×1500 with zoom support, 800×800 default display
Avatars: 256×256 (thumbnails will downscale)
Open Graph (social share): 1200×630
Favicon: 32×32, 192×192, 512×512 PNG

Resize photos to these dimensions with our image resize tool before uploading.

Formats: when to use what

WebP: Default for 95% of web images. 25–35% smaller than JPG at same quality. Universal browser support.
AVIF: Even smaller (50% smaller than JPG). Use for hero images. Newer browsers support it.
JPG: Photographs without transparency. Excellent compatibility.
PNG: Logos, screenshots, anything with transparency. Lossless.
SVG: Vector graphics, icons, simple illustrations. Tiny file size, infinite scaling.

Convert between these formats with PDF7 Image Convert.

Compression: how aggressive is too aggressive?

For photos: start at 85% quality. Drop to 75% for bandwidth-critical pages. Below 70%, artifacts become visible. Use our image compress tool to find the right balance.

Responsive images with srcset

Don't serve a 2K image to a phone. Use HTML's srcset attribute:

<img srcset="hero-800.webp 800w, hero-1200.webp 1200w, hero-1920.webp 1920w" sizes="100vw" src="hero-1200.webp">

The browser picks the smallest image that fits. You'll need 3 sizes per image.

Lazy loading

Add loading="lazy" to all images below the fold. Modern browsers don't load them until the user scrolls near, saving bandwidth on every page load.

The 100KB rule

Aim for individual images under 100KB. Hero images can stretch to 200KB. If a single photo is more than 500KB, you've messed up — re-resize and re-compress.

Image Optimization for Web: Complete Guide