JPG vs. PNG vs. GIF vs. SVG

[beering]

This chart offers some dubious suggestions, even ignoring the "Burn it with fire" bit. Unfortunately, it doesn't explain any of its reasoning.

A photograph that's not real big is probably still better suited for JPG. And there's no reason to use GIF for any still image - PNG will be superior in all situations. A moving image may be better off as an MP4 for modern browsers in terms of file size and quality, but there's no mention of that here.

[avhon1]

> there's no reason to use GIF for any still image - PNG will be superior in all situations

For small icons with few colors, I find GIFs to be consistently smaller than PNGs.

For example, my website's favicon:

    http://alexvh.me/favicon.gif     216 bytes

    http://alexvh.me/favicon.png    1041 bytes

[KaoruAoiShiho]

Also apng. Time to retire gifs already.

[Raphmedia]

Why use a chart? It's what, four questions?

Is it a vector image? -> Use .svg

Is it an illustration (bitmap) with transparency (i.e. a cutout of a man) -> Use .png

Is it animated? -> Use .mp4 and fallback to .gif

Is it a photo? -> Use .jpg and compress as much as possible

[ktpsns]

Oh yes. Especially, never ever loose vector information if available. Vectors can scale. Bitmaps cannot. The chart gets this plain wrong.

[Anon1096]

mp4 with fallback to gif doesn't make much sense. More appropriate would be webm, or in the future AV1 with a fallback of h264 mp4 for video or high quality animated images. Using gif for small animations is fine, especially if you have transparency.

[the8472]

gif supports transparency, mp4 doesn't.

[danso]

The "Yes" path for `Is it transparent?` leads to the node, `Does it move?`, for which "No" leads to `JPG or PNG`. But clearly the answer should be just `PNG`, right?

[rhacker]

Correct

But just in general all of it needs to be redone when Webp is more widely used.

https://developers.google.com/speed/webp/

And in that case almost everything can be a webp - animations, transparency, lossy for compression or lossless if need be. You can still burn the bathroom selfies if you want. Except vector, you still want SVG for those.

[Anon1096]

There's no real reason to use a gif over png for non-animated images. You'll have bloated filesizes and a limited color pallette.

[CamperBob2]

In many cases, .GIFs are quite a bit smaller than .PNGs. They're useful for putting small bits and pieces of artwork into data URIs, for instance.

[dankohn1]

CNCF spends a lot of time dealing with images, including the 1,172 on our Cloud Native Landscape <https://landscape.cncf.io/>. Here's our advice: https://www.cncf.io/blog/2019/07/17/what-image-formats-shoul...

[fsh]

Quite ironic that the chart (PNG by the way) does not even render in Firefox.

[3JPLW]

It requires javascript from a third party domain. Hah.

[parliament32]

Privacy Badger was breaking it for me

[simlevesque]

What ? It does for me on Linux with Firefox 68.

PNG are handled by Firefox since Firefox 1 or 2, over ten years ago.

[bluetidepro]

Wish i could read this. Ugh, Medium is the worst.

[mceachen]

https://miro.medium.com/max/2100/1*krupUwPRAO-t3CfGRTPttA.pn...

[cgrealy]

I think some people are taking this entirely too seriously.

This is clearly aimed at people who already know this. It's a joke.

[Springtime]

SVG to me is always overlooked as a means to present not merely vector graphics but also other things like JPEGs with alpha transparency at a smaller size than equivalent, non-indexed PNGs for larger images (link a JPEG for the image and another JPEG/PNG/GIF for the mask, or both together as one image and use half for one and the other).

It's a rather flexible format, even if you're only embedding it within an img element/via CSS (ie: disabling its other possible functionality like video/JS/interactivity, though this comes at the downside of requiring base64'ing the embedded images, offsetting the some of the filesize savings...).

One can also utilize CSS animations within them (or alternatively SMIL in any Blink or Gecko based browser), whether embedded as an object or image.

[m-p-3]

Is it a vector? Yes

Is it a logo? No

Result: GIF

I can't even

[mcv]

Only if it's a vector image that's not for a website. The chart assumes only websites know how to handle SVG.

[austinhutch]

I tried writing a breakdown of image formatting for the web (specifically ecommerce) that mostly focused on JPG vs PNG. It's still WIP but if anyone wants to check it out or has feedback please reach out. It's specifically not blogspam, more of a working document that I hope to be able to share with clients: https://aloagency.com/blog/preparing-images-for-web

[Mathnerd314]

The "burn it with fire" option for gradient logos and bathroom selfies makes this chart much less useful.

[deanstag]

Yes. The much more environment friendly option would be to recycle the image. But I guess nobody cares about that anymore!

[simlevesque]

burn the chart with fire

[vladojsem]

Not a bad chart.

I can imagine it a bit more useful and less cluttered by removing bathroom selfies. Yet I understand the viral element: Burn it with fire!

[simlevesque]

how is it not bad ? it is absolutely not useful and the advices are misguided.

[nailer]

Is it a photo?

Yes: JPG

No: SVG

If you're uploading bitmap diagrams logos etc. they should be vector.

[magicalhippo]

So which tool should I use to convert my screenshot to SVG?

[egfx]

is it a website? GIF -> https://gif.com.ai

[onion2k]

It's 2019. Frontend developers who aren't using picture tags with WebP and a fallback alternative need to update their HTML knowledge.

[dheera]

Safari doesn't support WebP, unless they added it recently, in which case there are still a lot of non-(WebP-supporting) Safari browsers out in the wild.

As always we need to wait for Apple to get their shirt together.

[atiredturte]

Can we please start a tag for medium articles posted to HN saying that they are member only articles? It is getting quite frustrating...

[SimeVidas]

How to annoy me

Step 1: Suggest GIF as an option.

[tzakrajs]

Why in the hell would you want vector graphics in GIF ever?

Is it a photograph? No

Is it vector? Yes

For a Website? No

Does it have a gradient? No

Gif

Wat? Once you get to "Is it vector?" it should just point to SVG