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.
JPG vs. PNG vs. GIF vs. SVG
21–30 of 77 posts
Re: JPG vs. PNG vs. GIF vs. SVG
#22Re: JPG vs. PNG vs. GIF vs. SVG
#23It's 2019. Frontend developers who aren't using picture tags with WebP and a fallback alternative need to update their HTML knowledge.
As always we need to wait for Apple to get their shirt together.
Re: JPG vs. PNG vs. GIF vs. SVG
#24Re: JPG vs. PNG vs. GIF vs. SVG
#25It'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.
https://www.macobserver.com/news/webp-comes-ios-10-macos-sie...
Re: JPG vs. PNG vs. GIF vs. SVG
#26The "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?
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
#27Quite ironic that the chart (PNG by the way) does not even render in Firefox.
Re: JPG vs. PNG vs. GIF vs. SVG
#28Step 1: Suggest GIF as an option.
Re: JPG vs. PNG vs. GIF vs. SVG
#29This 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'…
Re: JPG vs. PNG vs. GIF vs. SVG
#30Earlier 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…
(In this case, it just saves 3 bytes, but it can make a huge difference sometimes.)