Live data from Hacker News

JPG vs. PNG vs. GIF vs. SVG

uxdesign.cc

21–30 of 77 posts

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

#21
post #17

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

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

*lose

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

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

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

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

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

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

caniuse.com currently states that "Safari is experimenting with supporting WebP images." I Googled around for more info, but the most conclusive thing I could find is this July 2016 blog post mentioning that "WebP Comes to iOS 10, macOS Sierra Betas". Since we're well past MacOS Sierra and iOS 10, does that mean Apple has given up trying to support WebP?

https://www.macobserver.com/news/webp-comes-ios-10-macos-sie...

https://caniuse.com/#search=webp

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

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

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

#29
post #6

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

Also apng. Time to retire gifs already.

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

#30
post #14

Earlier quoted context omitted.

> 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

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

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

Post reply on HN