JPEG and PNG are the two popular formats used to display images in the browser. Even though the internet gets increasingly faster, it is especially important for mobile devices to keep the file size as small as possible. The new BPG format, which is short for Better Portable Graphics, is the alternative to the popular formats, and it promises smaller files as well as a higher image quality. But what exactly distinguishes it from the others and how do you use it?
Better Portable Graphics Instead of JPEG – Similar Quality, Smaller File Size and Alpha Transparency
The unique thing about the BPG format is its high compression. It is based on a subset of the High-Efficiency-Video-Coding (HEVC), which is mainly used for video files. This is also the successor of the H.264/MPEG4 Standard. The compression of the Better Portable Graphics promises a smaller file size with similar image quality in comparison to the JPEG format.
Web Application for the Creation of BPG Files
Just like the JPEG format, the BPG format also supports different colour spaces. Besides RGB and CMYK, YCbCr, which is used to define a colour via brightness and colorfulness, is supported as well. Additionally, different colour depths – 8, 10 and 10 Bit – are available.
In contrast to the JPEG format, Better Portable Graphics also support an alpha channel as you know it from PNG images, for example. In comparison to PNG, the compression of the BPG is significantly higher.
Better Portable Graphics Encoder as Web Application
An encoder to create BPG files is available as a web application. Besides the choice of colour space and bit depth, there are two decisive values. For one, you need to decide on a quality value. To do that, you need to choose a value between 0 and 51. The smaller the value, the higher the quality of the image.
Heavily Compressed JPEG (left) and BPG (right)
The other value defines the compression which can be set on scale of zero to nine. The higher the value, the better the compression. However, you should consider that a high compression also means that the (visitor’s) computer takes more time to decompress and display the picture.
In a test, an image with 10 percent image quality was generated in Photoshop and the same image was transformed into the Better Portable Graphics format with the highest compression and a quality of 39. While the JPEG was 10 kilobytes large, the BPG had only 9.5 kilobytes. On the JPEG, you can clearly see the rectangular artifacts, caused by strong compression. This can also be seen on the BPG image. However, the result still has much better quality.
BPG Image With Alpha Transparency
When comparing a transparent PNG with its respective BPG graphic, the difference concerning the file size becomes evident. While the PNG is 325 kilobytes heavy, the transparent BPG file with average image quality weighs only 64 kilobytes. Here, you can achieve significant savings.
Better Portable Graphics: Browsers Interpret BPG via JavaScript
The big problem with any new data format is, of course, the browser landscape. What good is the best format when no browser supports it? There is nothing to worry in this case. Better Portable Graphics can be displayed on all popular browsers as the interpretation is done via JavaScript.
If you want to use Better Portable Graphics, you need to integrate a 65 kilobytes large JavaScript file into your HTML document. It will then take care of the decoding of the format. The HTML labelling is done the conventional way using the „<img>“ element. The respective JavaScript then transforms this element into a „<canvas>“ element, which then displays the picture in the browser.
Better Portable Graphics: Free Access to the Source for Encoders
Those that want to create Better Portable Graphics themselves can download the source of the encoder for free. It is available as command line application for Linux and Windows. The encoder is offered as Open Source under the terms of the GPL license.
Conclusion and Related Links
Should you be in doubt that that BPG will prevail as a popular format, I can relate to that. While the detour via JavaScript allows for instant browser support, it is generally not the best solution to display image formats in the browser.
The mix of the firm compression of JPEG and the alpha transparency of PNG, however, make Better Portable Graphics an interesting alternative. Apart from that, the BPG format allows for animations that only the GIF format was capable of before. The web encoder does not support these animations just yet.
(dpe)
Interesting new format. First time I heard about it. Although it all sound good, I’m gonna give it some time to see if it catches on.
Do you know any websites that uses BPG? I want to see how it works with my own eyes :)
//Alexander