Images account for the majority of bytes on most web pages. Compressing them properly can cut page load times in half and significantly improve Core Web Vitals scores.
Lossy vs Lossless Compression
Lossy compression permanently removes some data to achieve smaller sizes. JPEG uses lossy compression. Lossless compression reduces file size without losing any data. PNG uses lossless compression. For most web images, lossy compression at quality 80-85% is undetectable to the human eye.
Which Format Should You Use?
- JPEG: Photos and complex images with many colors
- PNG: Images with text, logos, or transparency
- WebP: Modern format that beats both JPEG and PNG in size
- AVIF: Newest format, smallest sizes, less browser support
Target File Sizes
- Hero images: under 200KB
- Blog post images: under 100KB
- Thumbnails: under 30KB
- Icons and logos: under 10KB