How to Optimize Images for Web: Complete Guide

Images are typically the largest assets on a webpage, often accounting for 50-70% of total page weight. Optimizing them is one of the highest-impact changes you can make for web performance and SEO.

Step 1: Choose the Right Format

Format choice alone can reduce file sizes dramatically:

• Photographs — use WebP (or JPG as fallback)
• Graphics with transparency — use WebP or PNG
• Icons and logos — use SVG for vector, WebP/PNG for raster
• Animations — use WebP or MP4 (not GIF)

Step 2: Resize to Display Dimensions

Never serve a 4000x3000 pixel image that will be displayed at 800x600. Resize images to their actual display dimensions (or 2x for retina screens). This single step often reduces file size by 75% or more.

Step 3: Compress Appropriately

For lossy formats (JPG, WebP lossy), a quality setting of 80-85% is usually the sweet spot. Below 80%, artifacts become noticeable. Above 85%, file size increases without visible improvement.

Step 4: Use Modern Formats

Converting from legacy formats to modern ones yields significant savings:

• PNG to WebP — save 26%+ on lossless images
• JPG to WebP — save 25-34% on photographs
• PNG to AVIF — save 40%+ with newest compression

Step 5: Implement Lazy Loading

Add loading="lazy" to images below the fold. This tells the browser to load these images only when the user scrolls near them, reducing initial page load time.

Impact on SEO

Google uses page speed as a ranking factor. Core Web Vitals, particularly LCP (Largest Contentful Paint), directly measure how quickly your largest image loads. Optimized images improve LCP scores, which can boost your search rankings.

Quick Wins

1. Convert all PNG photos to WebP (saves 25-50%)
2. Resize oversized images to actual display dimensions
3. Add lazy loading to below-fold images
4. Serve 2x resolution for retina displays (not more)