Part of this blog post is based on Google Chrome Developers' talk: Image compression deep-dive. I encountered this compression protocol when I was trying to use the DeMoN dataset and found it pretty impressive in terms of the visual quality and the compression ratio.
Common Image Compression Methods
Lossy | Lossless | Vector |
JPEG | PNG | SVG (can be computationally expensive for CPUs during rendering) |
WebP | GIF (lossless with 256 colors BEFORE compression) | |
| Lossless WebP (different compression from lossy WebP!) | |
How Image Compression Generally Works
Lossy | Lossless | Vector |
Increases size with sharp edges, small details in otherwise undetailed areas | Increases size with frequent, unpredictable, large changes in color, and a large number of colors | Increases size with the number of shapes, shape complexity |
Humans are more accustomed to observing a loss in brightness rather than a loss in colors, for instance, the picture below is high-resolution in brightness but low-resolution in color:
While the image below has low-resolution brightness but high-resolution color, although containing the same amount of data as the above image,
Some helpful links:
Squoosh: https://squoosh.app/
Chroma subsampler: https://goo.gle/yuv
DCT Quantizing: https://goo.gle/2YGkpQt
Here is an example of a heavily compressed JPEG,
We can observe the squares of pixels due to the compression and the color bleeding. Generally, WebP is just better compared to JPEG as it can select different sizes of squares, and when it starts a square, it can use a nearby square as a starting point, also JPEG has to use the same mathematical operation for every 8 x 8 block at the given channel, while WebP can be more adaptive to high and low detail areas, also WebP supports transparency channel while JPEG doesn't. The only benefit of JPEG would be better compatibility as some browsers don't support WebP.