Live data from Hacker News

JPG vs. PNG vs. GIF vs. SVG

uxdesign.cc

31–40 of 77 posts

Re: JPG vs. PNG vs. GIF vs. SVG

#32

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!

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

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

Re: JPG vs. PNG vs. GIF vs. SVG

#34

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

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.

Re: JPG vs. PNG vs. GIF vs. SVG

#35
post #26
post #22

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?

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.

webp can be a bad choice because it is always chroma-subsampled. png and jpeg support full chroma.

Re: JPG vs. PNG vs. GIF vs. SVG

#37
post #23
post #5

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

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.

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

Re: JPG vs. PNG vs. GIF vs. SVG

#39
post #7

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.

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.

Re: JPG vs. PNG vs. GIF vs. SVG

#40
post #26
post #22

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?

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.

Anything coming off developers.google should be avoided like a plague.
Post reply on HN