Photo of photos.

Looking at a New Image Format

Posted on:
February 18, 2015
Posted in:
JavaScript, Web Dev

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.

PNG – the control image – 1.6MB
JPEG – saved in Photoshop, Save for Web, 50% Progressive – 149KB
BPG – compression level 20 – 147KB
BPG – compression level 26 – 77KB

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.

Other Benefits

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

BPG Polyfill

As I mentioned before, the image format has a polyfill – it’ll take IMG tags with .bpg file extensions, decompress the images in JavaScript, and then output them as HTML5 canvas elements. It’s not perfect – the process is a little slow and can chew resources on a mobile device (or even fail entirely).

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).

Download BPG File

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. BPG Shortcode Plugin

Thumbnail Photo: “Portland Mayors Office Portrait Gallery 001” by JaydeanallenOwn work. Licensed under CC BY 3.0 via Wikimedia Commons.