Why Is WebP So Much Smaller Than PNG?

If you have ever converted a PNG image to WebP, you have probably been surprised by the dramatic file size reduction. A 2.5 MB PNG photograph can shrink to 400 KB in WebP lossy mode, or around 1.8 MB in WebP lossless mode, all without a visible difference in quality. This is not magic but rather the result of fundamentally different compression algorithms. While both formats can produce identical visual output in lossless mode, WebP uses more advanced compression techniques developed decades after PNG's algorithm was designed. This article breaks down the technical reasons behind WebP's size advantage in a way that is accessible even if you are not a computer scientist.

How PNG Compression Works: DEFLATE

PNG uses a compression algorithm called DEFLATE, which is the same algorithm used in ZIP files and gzip. DEFLATE was developed in the early 1990s and works in two stages. First, it applies a prediction filter to each row of pixels. PNG offers five simple filters (None, Sub, Up, Average, and Paeth) that predict each pixel's value based on its immediate neighbors. The filter calculates the difference between the predicted value and the actual value, which ideally results in many small numbers and zeros that are easier to compress.

After filtering, DEFLATE combines LZ77 pattern matching with Huffman coding. LZ77 finds repeated sequences of bytes and replaces them with short references pointing back to the first occurrence. Huffman coding then assigns shorter binary codes to more frequent values. This two-step approach works well, but it is limited by the simplicity of its prediction model and the fact that it processes data as a one-dimensional stream, unable to take full advantage of the two-dimensional patterns that naturally occur in images.

How WebP Lossy Compression Works: VP8

WebP lossy mode is based on the VP8 video codec, which Google acquired when it purchased On2 Technologies in 2010. VP8 was designed for video, where compression efficiency is critical because you are encoding 30 or more frames per second. The techniques VP8 uses are far more sophisticated than DEFLATE.

VP8 divides the image into macroblocks of 16x16 pixels. For each block, it performs intra-prediction, which predicts the block's content based on already-decoded neighboring blocks using multiple prediction modes (horizontal, vertical, DC, and various diagonal modes). The difference between the prediction and actual content is then transformed using a Discrete Cosine Transform (DCT), which converts the spatial pixel data into frequency coefficients. High frequency details that the human eye is less sensitive to can then be quantized, meaning their precision is reduced, which is where the lossy compression happens. Finally, the remaining data is encoded using arithmetic coding, which is more efficient than Huffman coding for this type of data.

How WebP Lossless Compression Works

WebP lossless uses a completely different algorithm than its lossy mode. Instead of VP8, it employs a suite of specialized techniques designed specifically for lossless image compression. These techniques work together to exploit patterns in image data more effectively than PNG's DEFLATE can.

The WebP lossless encoder applies several transform passes before the final entropy coding stage. These include a spatial predictor that uses up to 13 different prediction modes (compared to PNG's 5 filters), choosing the best one for each pixel. It also applies a color transform that decorrelates the RGB channels, exploiting the fact that color channels in natural images are often related. A subtract-green transform is particularly effective, removing redundancy between channels. Additionally, the encoder can build a color cache of recently seen pixel values and a palette for images with few unique colors. All of these intermediate results are then compressed using a combination of LZ77 and Huffman coding, similar to DEFLATE but with more sophisticated preprocessing that reduces the data's entropy before the final encoding step.

Key Technical Differences Explained

Real File Size Comparisons

Here are real-world file size comparisons for common image types at 1920x1080 resolution, demonstrating how the compression differences translate to actual savings:

Why This Matters for Web Performance

The file size difference between PNG and WebP has real, measurable impact on website performance. Every byte saved reduces the time visitors spend waiting for your page to load. On a 3G mobile connection, downloading a 2.5 MB PNG photograph takes approximately 8 seconds. The same image as a 350 KB WebP file loads in just over 1 second. This difference directly affects bounce rates, user engagement, and search engine rankings. Google's research shows that 53% of mobile users abandon pages that take longer than 3 seconds to load, making image optimization one of the most impactful performance improvements you can make.

At scale, the bandwidth savings are substantial. A website serving 50,000 page views per month with just 5 images per page could save over 500 GB of data transfer annually by switching from PNG to WebP. This translates to lower hosting costs, faster global delivery, and a better experience for every user, particularly those on mobile devices or in regions with slower internet connections.

Frequently Asked Questions