DEV Community

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

What image format should you use in your next project?

Alvaro Montoro on November 22, 2022

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 w...
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
 
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
 
eekee profile image
Ethan Azariah • Edited

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
 
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
 
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
 
whyboris profile image
Boris

The image format of the future is JPEG XL (aka .jxl)

jpegxl.info/

Collapse
 
alvaromontoro profile image
Alvaro Montoro • Edited

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

Collapse
 
crispin_r profile image
Crispin

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

Collapse
 
thorstenhirsch profile image
Thorsten Hirsch

Wrong. JPG is for photos. Use PNG for graphics with and without transparency if you consider GIF deprecated.