Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

JPG vs. PNG vs. GIF vs. SVG

uxdesign.cc

Post reply on HN
Print view View original

51–60 of 77 posts

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

#51

Post by jandrese »

KaoruAoiShiho wrote: post #29
beering wrote: 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.

Hasn't apng been made obsolete by mp4 before it managed widespread adoption? Basically they were supposed to be easy like the old animated gifs, but developers dragged their heels on it so long that they forced people to adopt the full fat alternatives in the meantime.

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

#52

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

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

#53

Post by dheera »

jayflux wrote: post #37
dheera wrote: post #23

Earlier quoted context omitted.

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.

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.

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

#54

Post by JoshTriplett »

jandrese wrote: post #50
JoshTriplett wrote: post #30

Earlier quoted context omitted.

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.

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.

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

#56

Post by Wowfunhappy »

s_y_n_t_a_x wrote: post #47
Anon1096 wrote: post #34

Earlier quoted context omitted.

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.

Won't webm be more efficient than h264? (I'm assuming by mp4 you mean h264).

So you'd want to do webm → mp4/h264 → gif.

(I agree this isn't worth the time to set up in most cases)

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

#57

Post by s_y_n_t_a_x »

Wowfunhappy wrote: post #56
s_y_n_t_a_x wrote: post #47

Earlier quoted context omitted.

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.

Won't webm be more efficient than h264? (I'm assuming by mp4 you mean h264). So you'd want to do webm → mp4/h264 → gif. (I agree this isn't worth the time to set up in most cases)

You're right, you would try WebM first. Like I said I'm not sure why you'd do both. Anything that plays VP8/9 should play h.264.

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

#58

Post by KaoruAoiShiho »

jandrese wrote: post #51
KaoruAoiShiho wrote: post #29

Earlier quoted context omitted.

Also apng. Time to retire gifs already.

Hasn't apng been made obsolete by mp4 before it managed widespread adoption? Basically they were supposed to be easy like the old animated gifs, but developers dragged their heels on it so long that they forced people to adopt the full fat alternatives in the meantime.

They have different perf characteristics. I use apng a lot. There's a good place for them.

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

#59

Post by kalleboo »

rhacker wrote: post #26
danso wrote: 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 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)

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

#60

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

Post reply on HN