=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
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