Image Optimization Calculator

For photographs: AVIF is best (50%+ smaller than JPEG), followed by WebP (25–35% smaller). Fall back to JPEG. For graphics, logos, icons: WebP with transparency or SVG. For animations: WebP or AVIF (both support animation, much smaller than GIF). PNG for lossless screenshots. Use the HTML picture element with multiple source elements to serve the best format each browser supports, with JPEG/PNG as fallback.

Lossy compression (JPEG, WebP lossy, AVIF) permanently discards some image data to achieve smaller files. The quality setting controls the trade-off: lower quality = smaller file but more artifacts. Quality 75–85 is usually the sweet spot for photos — visually indistinguishable from the original. Lossless compression (PNG, WebP lossless) preserves all data but achieves less compression. Use lossy for photos, lossless for screenshots, UI elements, and images with text.

Use the srcset attribute with width descriptors: <img srcset='img-400.webp 400w, img-800.webp 800w, img-1200.webp 1200w' sizes='(max-width: 600px) 400px, (max-width: 1024px) 800px, 1200px' src='img-800.webp' alt='...' width='1200' height='600'>. The browser picks the most appropriate size based on device width and pixel density. Always include the sizes attribute so the browser can calculate the correct source before layout.

Lazy loading (loading='lazy') defers image loading until the image is about to enter the viewport. This reduces initial page weight and speeds up LCP for above-the-fold content. Use it on all below-the-fold images. Never use it on the LCP image (hero image) — that would delay your most important metric. Modern browsers support native lazy loading; no JavaScript needed. For older browser support, use an Intersection Observer-based library as fallback.

An Image CDN (Cloudinary, Imgix, Cloudflare Images, Vercel Image Optimization) automatically resizes, compresses, and converts images to the optimal format based on the requesting device. Instead of serving a 2MB 4K photo to a mobile phone, the CDN serves a 50KB WebP at the appropriate resolution. URL-based transformations: ?w=800&f=webp&q=80. This eliminates manual image processing, saves bandwidth, and dramatically improves LCP. Most modern hosting platforms include image optimization.