=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- title: Will It Render? date: 2023-10-05 17:55:00 =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- I'm a little obsessive about backwards compatibility [0] 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 Image: http://flower.codes/assets/will-it-render/readme.jpg 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_ [1] the launch of the World Wide Web). All subsequent image formats will be converted from this source. ## CompuServe Graphics Interchange Format Image: http://flower.codes/assets/will-it-render/readme.gif 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" [2]. Fight me. ## Microsoft Windows Bitmap Image: http://flower.codes/assets/will-it-render/readme.bmp 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 Image: http://flower.codes/assets/will-it-render/readme.jp2 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 Image: http://flower.codes/assets/will-it-render/readme.png This is a PNG. That is all. ## Animated Portable Network Graphics Image: http://flower.codes/assets/will-it-render/readme.apng 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 Image: http://flower.codes/assets/will-it-render/readme.webp 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 [3], 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 Image: http://flower.codes/assets/will-it-render/readme.tiff 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 `` 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 Image: http://flower.codes/assets/will-it-render/readme.avif According to the Wikipedia [4], 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 [5] leads me to believe that it won't be much of a candidate for backwards compatibility, but pretty cool nonetheless. ## Microsoft Icon Image: http://flower.codes/assets/will-it-render/readme.ico Alright, so, this one is a bit of a joke. But according to the Mozilla web documentation [6], the `` 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! --- [0]: http://flower.codes/2022/03/23/backwards-compatibility.html [1]: https://en.wikipedia.org/wiki/JPEG [2]: https://en.wikipedia.org/wiki/GIF#Pronunciation [3]: https://www.google.com/search?q=keanu&tbm=isch [4]: https://en.wikipedia.org/wiki/AVIF [5]: https://en.wikipedia.org/wiki/AVIF#Web_browsers [6]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img --- EOF