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: 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
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.
Denis works as a freelance web designer since 2005.