Live data from Hacker News

JPG vs. PNG vs. GIF vs. SVG

uxdesign.cc

41–50 of 77 posts

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

#41
post #3

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

What ? It does for me on Linux with Firefox 68. PNG are handled by Firefox since Firefox 1 or 2, over ten years ago.

It's not the image, it's the 3rd-party script they use.

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

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

It might happen! IE and Edge were the last holdouts and now MS is switching to Chromium.

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

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

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

#44
post #33

Is it a photo? Yes: JPG No: SVG If you're uploading bitmap diagrams logos etc. they should be vector.

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

This one? http://johanneskopf.de/publications/pixelart/index.html

It might be apropriate in some cases at least.

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

#47

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.

mp4 is for efficiency, gif is for compatibility.

if an mp4 doesn't play, a webm probably won't play either.

you can do mp4 -> webm -> gif if needed, but that's extra encoding that probably isn't needed.

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

#49

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

gif supports transparency, mp4 doesn't.

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

#50

Earlier quoted context omitted.

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

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.
Post reply on HN