Image Optimizer Checklist

WebP is the modern default — it's ~30% smaller than JPEG at the same quality and is supported by all major browsers. AVIF is even better (~50% smaller than JPEG) but encoding is slower. For photographs, use WebP or AVIF. For icons and logos with transparency, use WebP or SVG. For vector graphics, always use SVG.

A typical desktop hero is 1200–1920px wide. However, you should serve responsive images with srcset, providing at least three sizes: 400w (mobile), 800w (tablet), 1200w (desktop). Never serve a 1920px image to a 375px mobile device — that wastes bandwidth and hurts LCP.

Lazy loading defers off-screen images until the user scrolls near them. Use loading='lazy' on all images below the fold. Never lazy-load above-fold images (hero, logo) as it delays LCP. The browser natively supports this attribute in all modern browsers — no JavaScript library needed.

For JPEG: quality 70–85 is the sweet spot — visually lossless for most photos. Below 60 introduces visible artifacts. For WebP: quality 75–85 gives better results than equivalent JPEG quality. For thumbnails or card images: quality 60–70 is fine. Always check visually after compression.

Setting explicit width and height on <img> elements lets the browser reserve space before the image loads, preventing Cumulative Layout Shift (CLS). It also enables the browser to calculate the aspect ratio before the image downloads. This is required for good CLS scores in Core Web Vitals.

Yes — a CDN dramatically improves image delivery for global users by serving images from edge nodes close to each visitor. Image CDNs like Cloudinary, Imgix, and Cloudflare Images also offer automatic format conversion (WebP/AVIF), resizing, and compression on the fly, so you don't need to manually convert every image.