DEV Community

Cover image for File format decision tree
Alvaro Montoro
Alvaro Montoro

Posted on

File format decision tree

This is a small decision tree to help with the best file format for each occasion. It is half serious and half tongue-in-cheek, and it minimizes the importance of SVG, but it's a good approach on how the decision should be:

Flow chart with different questions and decisions to determine which file format you should use (simplified explanation below)

Only use BMP when playing with MS Paint

Here is a description of when to use each format (as promised in the alt text):

  • BMP: when your kids are playing with MS Paint.
  • TIFF: for large professional designs and photographs.
  • GIF: if it moves.
  • SVG: if it moves and/or if it is vectorial.
  • AVIF: if having a small file size is key.
  • WEBP: if having a small file size is key... and you care about support.
  • PNG: any other case when transparency is needed.
  • JPG: any other case.

And here it is the same decision tree, edited (with MSPaint maybe?) to show how the file format process goes in reality:

Same flowchart as above, but all the formats are scratched except for GIF, JPG, and PNG. There's a line from BMP to JPG/PNG saying "I love you MSPaint, but who am I kidding?". The question "does it move?" was replaced by "is it a cat video?" and all the paths except that one direct to PNG/JPG

...or just use PNG for everything...

On a more serious note, AVIF looks like a promising format. Here, an interesting article where Jake Archibald compared AVIF with other formats: SVG, PNG, JPG, and WEBP.

Top comments (3)

aleksandrhovhannisyan profile image
Aleksandr Hovhannisyan

Fun fact: You can have WebP GIFs, too! Google ships not only cwebp but also gif2webp; the latter can convert any GIF to an animated webp image :)

khangnd profile image

A great explanation concept 😊

lamka02sk profile image

Just please don't use GIF. A normal mp4 h264 video is smaller and better quality than GIF.