New Graphic Format: BPG (Better Portable Graphics)


I’ve always watched with interest new emerging graphic file formats. I just find that stuff super interesting. How they work, what their strengths are, why they might excel or have impediments in certain situations.

One of the earliest examples I remember that sparked my interest was how a GIF containing the same information was more than double the size, if rotated 90 degrees. This was because of how the GIF is encoded as it’s created. It would only store data (therefore increase file size) if there was a change in pixels colour as you scanned across it left to right. The only time the GIF needs to store data is when something changes.

So the vertical lines sample below has a bunch of changing information as you go left to right; whereas the horizontal lines has little need to store data as you go from left to right. This is exacerbated because the file size grows left to right, when pixels change, but also at the end of each “line” horizontally, like a typewriter, it returns to the next lower line and does the calculation again… over and over, left to right, next line down, left to right, next line down… until the full height of the graphic is stored, giving you your file size. See the sample graphic below and the difference in file size.


So that’s cool, right?

The new BPG format (and how it encodes) is actually taken from the video world—an open source implementation of an existing video compression standard (HEVC). HVEC (High Efficiency Video Coding) previously known as H.265, is almost twice as good at compression while retaining the same quality versus the H.264 video compression format. Makes sense. If it could work for video then it must be pretty good at compressing a single frame you’d think. And if you’ve read this far the next bit probably won’t freak you out. Here’s what the site had to say about the BPG format and why it’s awesome:

In most video compression techniques, there are 3 types of frames: I-frames, which are frames encoded as a whole, independently from other frames; P-frames, which are encoded as differences from previous frames; and B-frames, which are encoded as differences from previous and later frames. BPG is essentially an I-frame of HEVC, with a reduced header to make it even more efficient.

HEVC encodes I-frames more efficiently than JPEG: While in JPEG each 8×8 block in the image is encoded independently, HEVC I-frames utilize redundancy between different blocks, and can encode only the differences between blocks instead of the full block information. It is clear that in uniform areas of the image, where blocks are similar to each other, such encoding (called “Intra Prediction”) can be much more efficient than coding each block independently. This is one of the main contributors to the efficiency of the BPG vs. JPEG.

They go on to say in their post titled “5 Reasons Why BPG Will Eventually Replace JPG” (so there might be some bias) that BPG is extra-awesome because:

  1. no special hardware is needed for using it—right now
  2. the decoder for rendering the image is written in Javascript (56kb piece of code) that works on any browser or device… right now
  3. and lastly, the JPEG standard is ancient and was approved more than 20 years ago!

Be sure to check out a side by side comparison (with slider!) of the BPG format. Looking very good, and sounding promising. I most likely will hang in until Photoshop gives me the BPG option when saving-for-web. Though, there is an online web encoder tool waiting for your images—right now!

Tags: , , ,

Leave a Reply

Other tags used in my blog:

 (1)  (6)  (1)  (16)  (1)  (1)  (21)  (1)  (17)  (6)  (1)  (1)  (7)  (1)  (4)  (18)  (5)  (2)  (31)  (9)  (1)  (12)  (4)  (1)  (4)  (6)  (10)  (1)  (6)  (1)  (4)  (1)  (1)  (1)  (1)  (3)  (1)  (3)  (4)  (7)  (4)  (3)  (4)  (1)  (1)  (2)  (1)  (7)  (15)  (13)  (2)  (7)  (1)  (3)  (16)  (2)  (3)  (1)  (5)  (1)  (34)  (5)  (9)  (9)