A few years ago, I drew a decision tree to simplify the image format selection to use depending on the project. It had a nostalgic/humorous touch while keeping the chart simple and somewhat accurate (the decision can be arbitrary in the end.)
Years passed, new image formats popped up, and the support for some of the existing ones was extended, making some of the “classic” formats less relevant. So, I decided to update the decision tree (both content and visualization):
The new chart prioritizes SVG for vectorial images, introduces APNG as an alternative to GIF (more on this later), and keeps BMP even when it’s not a viable option for the chart.
At this point, it is essential to add some clarifications because some formats probably shouldn’t be in the tree at all.
The New HTML Reality: <picture>
This decision tree may be exciting and nice-looking (I’m biased 😅), but it isn’t needed that much anymore. HTML has also evolved, and there are now tags such as <picture> that allow developers to provide multiple sources in different formats, letting the browser be in charge of picking the first supported format:
<picture>
<source srcset="picture.avif" type="image/avif" />
<source srcset="picture.webp" type="image/webp" />
<source srcset="picture.apng" type="image/apng" />
<img src="picture.jpg" alt="alternative text for the image" />
</picture>
This makes the decision tree above a little irrelevant (especially the questions about support.) And still, it could be interesting because the browser picks the first supported source and ignores the rest, which doesn’t mean it is the best for the job.
It will be critical to put the sources in order from more efficient or functional to less. In that sense, this decision tree can still be helpful.
Animations and Videos
The animations branch has a silly question: “do you know how to pronounce GIF?”. It is purposely humorous and a trick question because, although we all think that we know how to pronounce GIF correctly, no one does (it doesn’t matter if you pronounce it “GIF” or “GIF,” you are wrong.)
In reality, GIF is a decaying format: APNG is supported everywhere (and so is animated WebP), is lighter, and has a superior color depth compared to GIF. And yet, even when APNG has so many benefits, GIF is still a favorite online... but for how long?
The answer to that question may not be pertinent as the Internet is moving in a different direction: HTML facilitates the use of videos considerably, to the point that using an animated image instead of a video may almost be considered a bad practice. Videos are better in many ways:
- They allow controlling the play status (which improves accessibility)
- They can play before they are fully loaded
- Their size is small
- They can natively display a static image (poster) while loading
- They have more color options
That’s how it is common to see the GIFV format to define an animated image that is really a video (in WebM or H.264 format)... and as it is a video and not a picture, it wasn’t included in the decision tree. If you arrive at that branch, know there are better alternatives than GIF or APNG.
...And A Joke
A few months ago, I started publishing a weekly webcomic about CSS (and web development). This week, I used a version of this decision tree to rewrite a (silly) joke that I drew a few years back.
The decision tree above is nice in theory, but in the reality of a day-to-day project, the format selection process is slightly different:
I hope you enjoyed the article (and the silly joke). Please, leave a comment with change suggestions or if there’s a format you would include or remove from the decision tree. Thanks for reading!
Top comments (13)
I think that it is not that well known that WEBP does animated images too.
Are they given a "webm" extension? I know I was surprised to find the extension last time I added to my collection of cat gifs. (It's a rare event.)
Not exactly, WebM and WebP are different formats: WebM is for movies/videos, and WebP is for pictures (which can be animated).
One very, very important question is missing is if it is a drawing or a line art (or if it contains text). If it is, then using image formats with lossy compression (that perform well on natural photographs, but not on line art) like JPEG should be avoided.
I would like to add, that the jpg format should not only be choosed by the parameter "transparency". I highly suggest everyone to read at least the wikipedia articles on both formats and how they work. If you encode an image taken with your camera using png then you will find it much larger than with jpeg, because the encoding of png aims for high recurrence pattern of pixels . Vice verca will your Graphics exported to jpeg contain lots of artifacts, compared to using png, because jpeg's DCT is a lossy compression, optimized for high pixel variability regions.
The "I know how to pronounce GIF" bit is delightful! XD I have this little spiel about how giraffes needed to exchange information so Compuserve came up with the Giraffics Interchange Format. (I'm evil, I know! XD )
One thing bothers me about the GIF format, or rather its implementations: Why can't I control the play status? This bothered me the first time I encountered it in the 90s, and I still don't understand.
Oh, two things actually. If, for whatever reason, you're implementing animated gif support, you'll run into the issue that very many GIFs set the time between frames parameter far too low, even to 0. Computers in 1989 weren't fast enough, so if you set the delay to 0, you got kind-of acceptable rendering. The solution is to pick a minimum value for the delay. Some common GIF authoring software expects this minimum delay, and continues to set the delay to 0. I think there's probably an unofficial standard value for the minimum delay now, but I'd rather implement some other standard. :)
Speaking of implementing, if you're creating your own operating system, BMP is a good choice for a first image format. I don't really expect this to make it into the chart, though. ;)
forbidden love or notThe Incredibly Flexible Data Storage file format addressed this file format dilemma via the slightly tongue-in-cheek JPEG-PNG-SVG file format:
github.com/cubiclesoft/ifds#use-ca...
To the best of my knowledge, there is no image file format that handles photos + line art well in the same format. Either the files are too large (lossless) or blurry messes (lossy). So just combine three of them into one super format and you're all good!
I usually use :
PNG, SVG or/and JPG
Same these are my 3 choices.
The image format of the future is JPEG XL (aka
.jxl)jpegxl.info/
Chrome dropped support for JPEG XL and WebP2 last year (in favor of AVIF and WebP), and Firefox announced a couple of weeks ago that they are basically going down the same route... without support from the major browsers, JPEG XL is going to have a tough path moving forward (at least as a web format).
Blog's pretty cool, funny and lit!! 😂🔥
Wrong. JPG is for photos. Use PNG for graphics with and without transparency if you consider GIF deprecated.