DEV Community 👩‍💻👨‍💻

Cover image for What image format should you use in your next project?
Alvaro Montoro
Alvaro Montoro

Posted on • Originally published at levelup.gitconnected.com

What image format should you use in your next project?

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):

decision tree titled What Image Format should you pick for your project

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>
Enter fullscreen mode Exit fullscreen mode

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:

A decision tree to pick image format. Most of the branches are scratched and a handwritten question replaces then: Is it a cat video? If yes, use GIF; if no, use PNG for transparencies or JPG if not.


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 (10)

Collapse
 
robole profile image
Rob OLeary

I think that it is not that well known that WEBP does animated images too.

Collapse
 
eekee profile image
Ethan Azariah

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.)

Collapse
 
alvaromontoro profile image
Alvaro Montoro

Not exactly, WebM and WebP are different formats: WebM is for movies/videos, and WebP is for pictures (which can be animated).

Collapse
 
jnareb profile image
Jakub Narębski

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.

Collapse
 
eekee profile image
Ethan Azariah • Edited on

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 not

Collapse
 
awcode0x profile image
AWCode0X

I usually use :
PNG, SVG or/and JPG

Collapse
 
andrewbaisden profile image
Andrew Baisden

Same these are my 3 choices.

Collapse
 
jankapunkt profile image
Jan Küster

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.

Collapse
 
cubiclesocial profile image
cubiclesocial

The 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!

Collapse
 
crispin_r profile image
Crispin

Blog's pretty cool, funny and lit!! 😂🔥

Here is a post you might want to check out:

Regex for lazy developers

regex for lazy devs

Sorry for the callout 😆