Web Image Optimization: The Fundamentals
Images are the largest assets on most web pages, accounting for 50–80% of total page weight. Optimizing images is the single most impactful performance improvement you can make for a website.
Web image optimization has three components: choosing the right format, resizing to display dimensions, and compressing to reduce file size. Doing all three can reduce a typical page's image weight by 80–90%.
Target File Sizes for Web Images
These are the file size targets you should aim for when optimizing web images:
Best Image Formats for Web
WEBP is the best format for modern web use. It achieves 25–35% smaller files than JPEG at equivalent quality and supports both lossy and lossless compression. All modern browsers support WEBP.
JPEG is the universal fallback. Use JPEG at 75–80% quality for photographs and complex images. It's supported by every browser and email client.
PNG should only be used for images requiring transparency (logos, icons, UI elements). PNG files are significantly larger than JPEG for photographic content.
Avoid GIF for anything other than simple animations. Use WEBP animations instead for better quality and smaller file sizes.
Core Web Vitals and Image Compression
Google's Core Web Vitals directly measure the impact of image optimization on user experience:
| Metric | What It Measures | Image Impact | Target |
|---|---|---|---|
| LCP | Largest Contentful Paint | Hero image load time | Under 2.5s |
| CLS | Cumulative Layout Shift | Images without dimensions | Under 0.1 |
| INP | Interaction to Next Paint | Heavy images blocking JS | Under 200ms |
Web Image Compression Workflow
Step 1: Resize to display dimensions. Never serve a 4000px image in a 800px container. Use the PixelTools Image Resizer to match dimensions to your layout.
Step 2: Compress at 75–80% quality. Use the PixelTools Image Compressor. This reduces file size by 60–70% with no visible quality loss.
Step 3: Convert to WEBP. Use the JPG to WEBP converter for an additional 25–35% reduction. Serve WEBP with a JPEG fallback using the HTML picture element.
Step 4: Set width and height attributes. Always specify width and height on img tags to prevent layout shift (CLS).
Step 5: Add lazy loading. Add loading='lazy' to all images below the fold to improve initial page load time.