For the most part, every article I’ve posted includes a header image. There’s no real significance to them except to break up the monotony of a pure text post. A little graphical touch can help a lot, especially for people used to the flashiness of the modern web. The only times I don’t include an image is when I absolutely cannot think of a fitting one for the post, and forcing one in wouldn’t do any good.
So, as I, who am unmistakably a professional artist, create pictures for virtually every article I publish, I also need to be concerned about files sizes. And I think I finally found a good format that should last a while.
The ideal image format
The perfect image format gives the smallest file size and lossless compression, is supported on all platforms, and is an open standard.
I foolishly used PNGs for the very early days when this website was empty because I was used to using them for images, especially wallpapers. PNG supports transparency and lossless compression, which was why I liked them. However, these aren’t necessary for websites and I quickly realized how horribly bandwidth inefficient PNGs were, prompting me to switch to JPEG.
Using JPEG was the obvious answer for abandoning PNG. In exchange for transparency support, JPEGs are much smaller. Besides efficiency, JPEG’s other advantage is compatibility. Every remotely modern computer and browser can render JPEGs, so no one is going to miss out on images unless they’re deliberately using a terminal browser.
The compatibility and maturity advantage is also JPEG’s weakness however, because the format is 30 years old. Better formats have emerged over the decades with more advanced compression algorithms and features JPEG lacks.
While I’m happy enough with JPEG’s performance, there are two formats that come out on top of all others.
All hail SVGs
SVG is the best image format when possible. They are lossless, have infinite resolution, and are by far the most size efficient. This is possible because an SVG file is just a vector diagram, not raster.
The mediocrity principle article shows a good example of SVGs in use. SVG supports gradients, text, and transparency. When an image can be created with simple shapes, colouring, and text, SVG is the way to go.
I’ve gone back to older articles and replaced most JPEGs with SVGs when possible because the file size reduction is worth it. SVGs also look better because there are no compression artifacts. Browser support for SVGs is as good as JPEG.
The only downside of SVGs is that they cannot completely replace raster-based images, hence JPEG’s overall higher usage on this website. Most of my header images cannot exist as SVGs, it just wouldn’t work that way. So while SVGs are objectively the optimal way for an image to be rendered, it’s limited by its nature: simple shapes, colouring, and text. Anything mildly complex has to use a raster-based image format.
Time for AVIF?
AVIF is a much newer image format, developed by the Open Media Alliance. If you’ve heard of the video formats VP9 or AV1, AVIF comes from this same group. AVIF is nice because it is new and comes with upgraded compression techniques and features. It’s also royalty-free, meaning anyone can use AVIF without licensing or royalty headaches. Large companies like Google and Netflix really love these; it helps them save bandwidth and removes licensing issues with other formats like H.265.
I found AVIF by chance when I found its file extension (.avif). I tried converting it to JPEG but was surprised to find out that the resulting file size increased while looking worse. After learning about what AVIF was, I decided to use it for this website from now on.
AVIF is a superior image format to JPEG in every metric. It support animations like GIFs, lossy and lossless compression, transparency, has better detail preservation, and other technical benefits.
AVIF’s weakness
There is one glaring problem with AVIF though: compatibility. The first AVIF image was shown in 2018, which is very recent. I have an iPhone lying around with iOS 14 and it does not support AVIF. The phone and OS are EOL but nowhere near outdated yet, there’s plenty of people that still use older devices and OSes.
A look at browser support for AVIF shows mixed results. Chrome supports it, which instantly means 80% of the internet will be able to see AVIFs. Support for other browsers is somewhat mixed though, with Microsoft Edge seeming to not have it. Apple also supports AVIF, but this was introduced very recently.
Beyond the browser, an OS needs to support the format for AVIFs to be usable on a computer in general. Because AVIF is so new compared to JPEG, there will be odd cases where someone’s computer cannot open AVIFs. I don’t really see AVIF completely replacing JPEG in the near future unless all phone manufacturers agree to ditch JPEG. Ubiquitizing AVIF and AV1 would be benefitial for everyone.
Why not WebP?
For those who don’t know, WebP is an image format developed by Google as a JPEG replacement too. It came out slightly before AVIF and has a similar feature set. The main reason I don’t use WebP is because it’s Google technology.
Google has a tendency to quickly start and stop projects, just take a look at the recent Stadia news. Google has started WebP2, which means that they seem more committed to developing the project than most others. WebP support is already very high and the project seems healthy, but I still have some association of Google killing projects spontaneously.
The second reason for not using Google technology is their dominance over the internet. Google owns virtually all browser market share and forcefully invents web standards because they can force standards to bend to their will, look at Manifest V3. The association of Google’s insane digital power makes me scrutinize WebP, even if it may have been developed with good intent. AV1 also has Google involved in its development team, but at least there are other participating entities.
There are other emerging formats like JPEG XL but this one has hardly any support anywhere. I might change image formats in the future if it’s worth it, but AVIF is already good enough and substantially better than vanilla JPEG that I might stick with it unless it gets killed off.
Conclusions
AVIF and SVGs are the way to go. I’ll still keep JPEG backups for compatibility purposes, since even an iPhone 8 with iOS 14 doesn’t support AVIF, but all images on this website going forward will use AVIF and SVG.
Video is out of scope because I don’t see myself uploading more, I’ve only uploaded one over the entire time I’ve had this website up. If I do upload any more in, they’ll also likely be AVIF. MP4 is steadily reaching reaching its twilight years too as AV1 and other improved video codecs are approaching mainstream adoption.