Images typically account for 50-70% of a webpage's total size. Optimizing them is one of the most impactful things you can do to improve your website's loading speed and user experience.
Use WEBP for most web images, with JPG as a fallback. Use PNG only when you need transparency or pixel-perfect rendering of graphics and text. Consider using the HTML picture element to serve different formats to different browsers.
For photographs, a quality setting of 75-85% usually provides an excellent balance between file size and visual quality. Most users cannot distinguish between a 100% quality image and an 80% quality image, but the file size difference can be dramatic — often 60-70% smaller.
Never serve a 4000x3000 pixel image if it will only be displayed at 800x600 pixels. Resize images to their actual display dimensions (accounting for retina displays by serving 2x resolution). This alone can reduce file sizes by 80% or more.
Add loading="lazy" to images that are not immediately visible in the viewport. This tells the browser to only load these images when the user scrolls near them, significantly reducing initial page load time.
Content Delivery Networks cache your images at edge locations worldwide, reducing latency for users far from your origin server. Most modern hosting providers include CDN functionality.
| Optimization | Typical size reduction | Effort |
|---|---|---|
| Format conversion (JPG→WEBP) | 25-35% | Low |
| Quality compression (85%) | 40-60% | Low |
| Proper resizing | 50-90% | Medium |
| Lazy loading | N/A (deferred load) | Low |
| All combined | 70-95% | Medium |