Better Portable Graphics (BPG) provides a modern lossy image format that outperforms the aging JPEG file format, providing more visually clear images with smaller file sizes.

Image: iStock

Few standards established nearly 25 years ago are still widely used and virtually unchanged on the internet today -- HTML has grown immensely to fit the needs of modern web development, whereas outmoded attributes such as the blinktag, WAP, and Gopher have all seen their heyday and slowly faded into irrelevancy. But, one particularly persistent standard that remains is JPEG, which was first formalized in September 1992.

BPG -- based on the video encoding standard HEVC, otherwise known as H.265 -- is a format designed by the prolific French programmer Fabrice Bellard, creator of the FFmpeg and QEMU projects. As this comparison demonstrates, BPG is capable of delivering comparable results at about half the file size of JPEG, with much better visual quality at the same file size. BPG was developed following a study by Mozilla determining the results of various lossy compression algorithms, in which HEVC was shown to be far superior to other algorithms. BPG supports the same Chroma formats as JPEG, as well as adds an alpha channel, and supports 8 to 14 bits per channel, allowing for expression of a higher color range.

Historically, adding support for an image format required the cooperation of browser vendors, much to the frustration of web designers -- PNG, a standard introduced in 1996, was not properly supported in Internet Explorer until 9.0, which was released in 2011. Luckily, web designers can utilize BPG in their projects by use of a JavaScript library, which is 71 KB when gzipped.

The importance of progress in lossy compression

Standards for lossless compression have improved immensely since the early days of the web -- the PNG format has supplanted the aging GIF format for most uses. Tighter compression of the LZMA-based PNG format is easily possible with open-source utilities, improving performance for computer-generated images, such as logos and icons. Google's Zopfli library allows for higher compressed files that can be decompressed using the standard DEFLATE (ZIP) library.

Lossy compression, such as that found in JPEG and MP3 files, is a field of research that is a great deal more subjective, in that the quality of the resultant file is subjective to the person browsing the file, and the file operation is not reversible. This also allows for more creativity of approach in how the compression will be applied. Excessive compression in JPEG leaves pictures blocky, and excessive compression in MP3 leaves audio with a sort of swishy, dead air sound. Excessive BPG compression results in a less detailed, smoother image, which is more difficult to identify as being compression artifacts.

With the wide deployment of both HD and Hi-DPI screens, compression artifacts in JPEG images are far more evident than before, or, compression settings are so low that a given image is abnormally large. (For example, the default wallpapers on my Android tablet are about 6 MB each.) The adoption of BPG on apps for mobile devices -- where flash memory is scarce on the entry-level SKUs, as seen with Apple keeping the 16 GB iPhone 6, while foregoing the 32 GB version -- can greatly reduce the footprint of installed apps.

On the server side, the cost of bandwidth is also an important consideration. Delivering static binary content such as photographs is not a particularly costly endeavor with the prices of cloud computing, but in aggregate, the reduced bandwidth load can ease an overtightened budgetary belt for your IT department. Most optimization efforts rightly focus on reducing page generation time and other server-side resource utilization. As such, compressing static images falls to the wayside.

On the client side, the introduction of bandwidth caps on traditional ISPs in the US -- and far more restrictive bandwidth pricing from mobile network operators -- proves that the need to optimize images still remains. Naturally, users in developing countries where the speeds offered by the existing infrastructure fall far short of speeds available in the US would also greatly benefit from the reduced page load time offered by BPG.

BPG is better, but is it worth it?

Is the JavaScript viewer enough to convince you to adopt BPG for your web projects, or will you hold out for native browser support? Do you aggressively optimize PNG images on your websites? What type of optimization routines do you perform for your projects? Let us know in the comments.