WEBP, AVIF, and JPEG XL, Better Image Formats For Websites

One of the banes of the past 25 years has been browser maker’s slow adoption of support for new image formats. It basically left superior encoding methods like JPEG2000 stillborn just because of a lack of vendor support.

Seriously, if you look at JPEG2000 support:

It’s pretty much Safari and “go teach your grandma to suck eggs”. Laughably you could get it to work in IE on Windows back in the day if you installed Apple Quicktime and showed it in an OBJECT tag.

Much of this stems from how groups like the Motion Picture Encoding Group (MPEG) and Joint Photography Encoding Group (JPEG) have never really gained much trust from the open source community. The standards published by these entities may be royalty free, but they’re still considered in the minds of many (true or not) to have too much of a “proprietary” nature. The only reason the vanilla 1992 JPEG standard has such wide support, is the fact that it was the first practical true-color encoding to catch on, despite its many shortcomings. The same can be said of the ENTIRELY proprietary GIF format (copyright to compuserve).

In many ways PNG was the first real “open” format to gain any traction, and remains the go-to choice for lossless encoding and/or alpha transparency support.

Over the past few years that has changed a LOT.

Enter WEBP, The Game Changer

The WEBP image format was “created” by Google, and is actually just a motion video keyframe in a standalone container, typically using either the VP8 or VP9 codec. It’s a completely open spec and has gained widespread support.

WEBP Is Great, So What’s This AVIF Thing?

AVIF borrows a base concept from WEBP, in that it uses a video codec’s keyframe logic for the encoding. In this case, the somewhat new AV1 format. (not to be confused with Windows .AVI). AV1 is largely based on VP10, putting it in the same family as WEBP, but with many optimizations that make it even more powerful.

So What About JPEG XL?

It’s the photography group’s latest version of JPEG, and only as of 2020 was its specification “frozen” for forward format support. Attempts to implement it are present in all three of the big modern browser engines, though you have to manually enable that support for testing.

But What About Unsupported Browsers?

This is where new tags from HTML 5 and new properties in CSS come cruising to our rescue. The PICTURE tag can not only be used to choose images based on scaling / PPI, but also based on the image file format!

#css #html #image-file-formats #graceful-degradation #websites

WEBP, AVIF, and JPEG XL, Better Image Formats For Websites