
JPG vs. PNG vs. GIF vs. SVG - allenwhsu
https://uxdesign.cc/jpg-vs-png-vs-gif-vs-svg-aefeca89f61
======
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

~~~
jandrese
One of the problems with PNG is that many applications default to full-color-
with-alpha-channel as the only save method, even though PNGs can do paletted
images just as well as GIF and end up basically the same size. So people look
at their PNG files and wonder why they are so big compared to the old GIFs
because their application sucks.

Edit: I just tried it with your example:

% giftopnm favicon.gif | pnmtopng > favicon.png

pnmtopng: 5 colors found

% ls -l

-rw-r--r-- 1 jandrese jandrese 216 Aug 7 17:33 favicon.gif

-rw-r--r-- 1 jandrese jandrese 255 Aug 7 17:33 favicon.png

~~~
JoshTriplett
Don't forget to run oxipng or optipng, as well; pnmtopng doesn't produce
optimal PNGs.

(In this case, it just saves 3 bytes, but it can make a _huge_ difference
sometimes.)

~~~
jandrese
I actually pngcrushed the result after that just to see how many of the
remaining 39 bytes I could get back, but had the same result. PNG has just a
smidge more fixed overhead than GIF.

~~~
JoshTriplett
oxipng got it down to 248 bytes. And yes, PNG has a little more fixed
overhead, such as the IEND chunk and some of the required IHDR metadata. That
only tends to be an issue in files this small, though, and gets dwarfed by
potential savings in larger files.

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

------
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/](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.

~~~
kalleboo
WebP will never take off due to Apple not supporting it. If Apple chooses to
support the AV1-based AVIF, that will become the next big format instead.
Apple has joined the AOM so there is a reason to believe they will (but then
again they also joined the Blu-ray consortium and never shipped a Blu-ray
drive)

------
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/>](https://landscape.cncf.io/>). Here's our
advice: [https://www.cncf.io/blog/2019/07/17/what-image-formats-
shoul...](https://www.cncf.io/blog/2019/07/17/what-image-formats-should-you-
be-using-in-2019/)

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

~~~
kissickas
Works fine with NoScript and everything blacklisted.

Firefox 66.0.4 for Fedora

~~~
3JPLW
It'll work without Javascript if you already have the image cached.

~~~
kissickas
Sorry for the late reply, but I just tried a clear cache+refresh and it still
loads the image fine.

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

~~~
mceachen
[https://miro.medium.com/max/2100/1*krupUwPRAO-t3CfGRTPttA.pn...](https://miro.medium.com/max/2100/1*krupUwPRAO-t3CfGRTPttA.png)

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

~~~
m-p-3
But why would you downgrade an SVG to a raster-only format...

The SVG is also probably lighter in file size too.

~~~
mcv
Beats me. Well, unless it's for a platform that doesn't support SVG of course,
but what doesn't support SVG these days?

------
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](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.

~~~
vladojsem
I know, also png can be transparent. However, most of the things are useful
for newbies.

------
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?

~~~
josefx
This one?
[http://johanneskopf.de/publications/pixelart/index.html](http://johanneskopf.de/publications/pixelart/index.html)

It might be apropriate in some cases at least.

~~~
magicalhippo
Impressive, but it would at the minimum need some tweaking for it to work well
with screenshots I think.

------
egfx
is it a website? GIF -> [https://gif.com.ai](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.

~~~
jayflux
You don’t need to wait for Apple, you can use the <picture> element to show
webP images and fallback to PNGs for browsers that don’t support webP.

~~~
dheera
More realistically though until they support it I'll just stick to JPGs and
PNGs and forget about this fallback mess. It adds unnecessary complexity to
sites that are dynamically generated.

~~~
onion2k
What this tells me is that when you build a site that has images uploaded by a
user, you do nothing to those images. You just take the upload and stick it in
an img tag to display it.

This is the exact problem with developers building for the Web. You'd rather
avoid a relatively small amount of additional complexity than build something
that's better for users (loads faster, reduces bandwidth, renders quicker).

Even ignoring WebP, you really should be resampling the upload to the right
size and running it through something like imagemin to optimize the file size.
And there are APIs out there that will do it all for you - it's a post request
at most if you don't want to set it up on a server.

~~~
dheera
Not exactly true, this isn't about user-uploaded images. I get it, but
optimized JPGs are working, and if it isn't broken, don't fix it. When
everyone supports WebP I'll switch to WebP and ditch JPG but I'm not in any
hurry and have plenty of other broken things that need to be fixed first.

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

