Images often account for the largest share of page weight. Unoptimized images slow sites, hurt Core Web Vitals, and waste bandwidth. The right format, size, and delivery strategy make a big difference. This guide covers image formats, compression, responsive images, lazy loading, and accessibility so your images load fast and work for everyone.
Why Image Optimization Matters
Large images delay First Contentful Paint and Largest Contentful Paint. Mobile users on slow connections suffer most. Search engines factor page speed into ranking. Optimized images improve performance, reduce bounce rates, and save bandwidth. A few hundred kilobytes per image adds up quickly across a page.
Image Formats
WebP
WebP offers strong compression—often 25–35% smaller than JPEG at similar quality. Supported in all modern browsers. Use for photos and complex images. Provide a JPEG fallback for older browsers with <picture>.
AVIF
AVIF can be even smaller than WebP. Growing support but not universal. Use with fallbacks. Good for new projects where you can serve multiple formats.
JPEG
Universal support. Good for photos. Use quality 75–85—higher rarely improves perceived quality. Avoid for graphics with sharp edges or text.
PNG
Lossless, supports transparency. Use for logos, icons, and graphics that need sharp edges. Larger than JPEG for photos. Consider PNG-8 for simple graphics.
SVG
Vector format—scales without quality loss. Ideal for icons, logos, and illustrations. Tiny file size for simple graphics. Inline or reference via <img> or CSS.
Compression
Tools
Squoosh, ImageOptim, and Sharp (for automation) compress images well. Aim for the smallest file that looks acceptable. Test at different viewport sizes—what looks fine on desktop may show artifacts on large displays.
Quality Settings
JPEG: 75–85 is usually sufficient. WebP: try 80–85. Aggressive compression saves bytes but can introduce banding or blur. Balance size and quality per use case.
Responsive Images
srcset and sizes
Serve different image sizes for different screen widths. Use srcset to list image sources and widths. Use sizes to tell the browser how much space the image will occupy. The browser picks the appropriate source. Avoid serving a 2000px image to a 400px viewport.
picture Element
Use <picture> for format fallbacks (WebP with JPEG fallback) or art direction (different crops for mobile vs desktop). Multiple <source> elements with type or media attributes.
Dimensions
Always set width and height attributes. This reserves space before the image loads, preventing layout shift (CLS). Use CSS to scale if needed. Intrinsic dimensions help the browser calculate aspect ratio.
Lazy Loading
Use loading="lazy" for images below the fold. The browser defers loading until the image is near the viewport. Saves bandwidth and speeds initial load. Don't lazy load above-the-fold images—use loading="eager" or fetchpriority="high" for the LCP image.
Alt Text
Every meaningful image needs alt text. Describe the image for screen readers and when the image fails to load. Decorative images: alt="". Be concise but descriptive. Alt text also helps SEO when relevant.
CDN and Caching
Serve images from a CDN for faster delivery. Set long cache headers—images rarely change. Use immutable caching when possible. Consider image CDNs (Cloudinary, imgix) that can resize and convert on the fly.
Common Pitfalls
- Oversized dimensions—Don't serve 3000px images for 400px display. Resize to match display size.
- Wrong format—PNG for photos is wasteful. JPEG or WebP for photos; SVG for icons.
- Missing dimensions—Causes layout shift. Always set width and height.
- Lazy loading LCP image—The main hero image should load immediately. Don't lazy load it.
Getting Started
Audit your images: format, size, dimensions. Convert photos to WebP with JPEG fallback. Resize to match display sizes. Add width, height, and alt. Enable lazy loading for below-fold images. Use a CDN. Measure before and after—Lighthouse and WebPageTest show the impact. Image optimization is one of the highest-impact performance improvements you can make.
Need help optimizing your website images?
Get a Free Quote