Looking at a New Image Format
JPEG has been around a really really long time and a few people have tried to replace it over the years. JPEG 2000 never panned out (despite it being actually very good). WebP seems to be making some inroads thanks to Google’s willingness to add it to chrome.
There’s another new format now called BPG, which stands for “Better Portable Graphics.” The format is based on techniques and algorithms developed for video encoding. It produces surprisingly good quality imagery for low bandwidth images. You can read all about it here.
What I always find disingenuous about tests like these is that they test well outside of the natural compression ranges that people actually use for JPEG. In fact, in order to get files as small as they use, I have to go down to quality level 0 in Photoshop’s Save For Web dialog. See, JPEG has a big Achilles heel – at some point the DCT algorithm becomes useless and the image patterns over the discrete 8×8 block aren’t significant enough to produce any data. This results in a visual artifact called “macroblocking.”
Most web sites know enough to stay above that threshold. If your images are macroblocking, you have to up the quality and suck up the bandwidth usage. To do an adequate comparison of an image format, you have to compare it to the sorts of things we do now, not some theoretical new workflow we could adopt later.
So here’s an unscientific test – the 4 images below represent images more like what you’d see on an actual website.
The original image compressed in the standard way came out to around 147KB, so I generated a BPG file around the same size and I think it looks really great. For once, you can see that the newer algorithm really does work in a real-world scenario.
The last image (compression level 26) was the highest compression level that I thought still produced a high enough quality image to use on a website. It weighs in at 77KB – roughly half the size.
If you haven’t clicked through to Fabrice Bellard’s site yet, you should definitely check out the examples. The comparisons with JPEG are kind of ridiculous edge cases, sure, but BPG also supports animation, 12-bit channels, and full translucency. Imagine not having to go with an incredibly wasteful lossless PNG just to get a translucent image on your website – or having an animated image that’s smaller than a GIF but can also display true color. These are huge gaps in the web developer’s/designer’s arsenal and BPG could fill those gaps nicely.
Translucency in 11KB
Animation in only 48KB
Compare the GIF, which clocks in at 1.9MB
At this point it really isn’t much more than a novelty, but if people are willing to start using it, then maybe the browser makers will start to consider implementing it. I can dream, right?
If you’re viewing this site on a desktop computer, you’ll probably see the image below no problem. It’s the actual compression level 26 BPG decoded by the polyfill (1280×720, 77KB).
If you’re interested, you can give this a shot on your own WordPress site by downloading the compression tools from Fabrice Bellard’s site and then installing the plugin that I created for this site.