Image Compression for Web Developers: JPEG, PNG, WebP, and AVIF Explained

Images account for roughly half of the total bytes on the average web page. I audited a client's e-commerce site last year and found that switching from uncompressed PNGs to properly compressed WebP images reduced page weight from 8.2MB to 1.4MB. Load time on mobile dropped by 3.7 seconds. No layout changes. No redesign. Just compression. Understanding how image formats work and when to use each one is the single highest-impact performance optimization most sites are leaving on the table. Lossy vs lossless: the fundamental trade-off Lossless compression reduces file size without discarding any data. The decompressed image is identical to the original, pixel for pixel. PNG and GIF use lossless compression. Lossy compression discards data that the algorithm considers visually unimportant. The decompressed image is an approximation of the original. JPEG, WebP (lossy mode), and AVIF use lossy compression. The key insight is that human visual perception has known limitations. We are bad at