I'm a little obsessive about backwards compatibility on the web, and one thing that can be particularly sticky are image formats. While I know that GIF is the most widely supported format across both space and time, I wanted to better understand what is actually available across the wide-spectrum of web browsers that have ever existed.
While the purpose of this post is simply to render the same image in as many different formats as possible, if I'm being honest I just want to have some fun with virtual machines. I'll post an update once I get some spun up and test everything.
Let's do us some learning, eh?
Joint Photographic Experts Group JFIF Format
For the purposes of this page, this is the image that I started with. A simple JPEG image that is guaranteed to be supported by all modern browsers (but definitely wasn't supported by early web browsers, having been invented a year after the launch of the World Wide Web). All subsequent image formats will be converted from this source.
CompuServe Graphics Interchange Format
As far as I can tell, the GIF is the most widely supported image format on the web, with even the earliest browsers able to render them (if they had image support at all). This is both awesome, and a pain in the ass, because GIFs support multiple frames (read: animation), so many social sharing won't pull my GIF-formated images in because they might move.
Oh, by the way, it's pronounced "JIF". Fight me.
Microsoft Windows Bitmap
All I know about bitmaps is that Microsoft Paint preferred them. I don't know how many concert fliers I made for my high school bands in MS Paint, but I do know that every single one of them was saved as a .bmp file.
JPEG 2000
What the hell even is JPEG 2000? I've found a number of different references of it having been supported once upon a time, but I don't know if I've ever encountered it in the wild. Honestly, it just sounds the stage name for like a late 90's video DJ.
Portable Network Graphics
This is a PNG. That is all.
Animated Portable Network Graphics
I don't know why I was giving JPEG 2000 such a hard time. APNG feels far more obscure to me—although I'm sure some APNG advocate out there screaming at my ignorance right now. Apparently it's supposed to be a more-better animated GIF, supporting 24-bit images and 8-bit transparency (whatever that means).
Can't imagine why, though. Everyone knows GIFs are perfect in every way and need no improvements.
Weppy Image Format
Invented by Google as a replacement for all of the image file formats, WebP's are freaking tiny (also, in case you're interested, "weppy" is just the documented pronunciation, I actually have no idea what the "P" means in WebP and I've spent more time than I'd like to admit trying to figure it out).
The only time I've come across a WebP in the wild is in Google's own image search, so clearly it's really taking off. Honestly, I'd probably use it too if I didn't make a conscious choice to support Netscape Navigator, Mosaic, and every other browser that existed 30 years ago.
Tagged Image File Multispectral Format
Remember TIFFs? I remember my computer mixing them up with PDFs all the time and having to deal with that mess. Other than that, I'm surprised it made the list of supported <img> image tag formats. According to the little research I did, Safari might support them in this context? Who knows, but let's find out.
AV1 Image File Format
According to the Wikipedia, AVIF has crazy efficient compression, and that seems to be true—and not just because Netflix says so! This AVIF is half the size of the original JPG, a which is a full 6KB smaller than the WebP.
The fact that it has only been supported in all major browsers for barely a year leads me to believe that it won't be much of a candidate for backwards compatibility, but pretty cool nonetheless.
Microsoft Icon
Alright, so, this one is a bit of a joke. But according to the Mozilla web documentation, the <img> tag actually supports .ico images, so we might as well throw it in here.
Fun Fact: ICO has a maximum size of 256x256, so not only is it impractical from a functional standpoint, it's impractical from a visual one too! Look at that beautiful blur!
--
If you like this post or one of my projects, you can buy me a coffee, or send me a note. I'd love to hear from you!