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

61–70 of 77 posts

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

#61

Post by beering »

avhon1 wrote: post #14
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'…

> 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

You are right, I tried creating a 16x16 image with 3 colors and despite my best attempts, the GIF came out to 93 bytes and the PNG 139 bytes. So there are cases where the GIF will be smaller than the PNG.

On the other hand, if you are loading enough small PNGs for this to make a difference, perhaps any performance issues that come up might be helped by switching from PNG to GIF.

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

#62

Post by avhon1 »

jandrese wrote: post #19
avhon1 wrote: 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…

Neat trick! I exported from GIMP and then used pngcrush. Interesting that this case isn't covered by that workflow.

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

#63

Post by onion2k »

dheera wrote: post #53
jayflux wrote: post #37

Earlier quoted context omitted.

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.

What this tells me is that when you build a site that has images uploaded by a user, you do nothing to those images. You just take the upload and stick it in an img tag to display it.

This is the exact problem with developers building for the Web. You'd rather avoid a relatively small amount of additional complexity than build something that's better for users (loads faster, reduces bandwidth, renders quicker).

Even ignoring WebP, you really should be resampling the upload to the right size and running it through something like imagemin to optimize the file size. And there are APIs out there that will do it all for you - it's a post request at most if you don't want to set it up on a server.

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

#65

Post by onion2k »

dheera wrote: post #23
onion2k wrote: 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.

The tag provides a nice, no-JS tag upgrade that works in browsers (it doesn't break in IE so long as you have an in there) to deliver the right image to the user. That means the user gets a smaller download, faster to render, higher quality image. It's essentially progressive enhancement for images (everyone gets the JPG or PNG, some users get a better format if they can handle it).

You can even add media queries to the tags to deliver different images based on the user's device.

There is literally no downside to using it.

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

#66

Post by dheera »

onion2k wrote: post #63
dheera wrote: post #53

Earlier quoted context omitted.

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.

What this tells me is that when you build a site that has images uploaded by a user, you do nothing to those images. You just take the upload and stick it in an img tag to display it. This is the exact problem with developers building for the Web. You'd rather avoid a relatively small amount of additional complexity than build something that's better for users (loads faster, reduces bandwidth, renders quicker). Even…

Not exactly true, this isn't about user-uploaded images. I get it, but optimized JPGs are working, and if it isn't broken, don't fix it. When everyone supports WebP I'll switch to WebP and ditch JPG but I'm not in any hurry and have plenty of other broken things that need to be fixed first.

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

#68

Post by nailer »

magicalhippo wrote: post #36
nailer wrote: 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?

That's an excellent point. Screenshots are currently the exception, but shouldn't be - most UI is vector but OS screenshot tools don't record them properly.

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

#69

Post by yourapostasy »

magicalhippo wrote: post #36
nailer wrote: 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?

I know you say that in jest, but I've always been curious if anyone has ever compared the size of tokenizing an OS X Quartz 2D stream that renders a screen against a PNG of the same screen. I wonder what we lost on the road not taken when as an industry we solidly branched away from Display Postscript as a possible industry-wide rendering engine, and it is unlikely we will ever explore that branch in the foreseeable future.

As noted in a thread comment elsewhere, under the hood our display rendering engines are already entirely or significantly vector engines, but what we appear to lack is an industry-wide representation scheme.

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

#70

Post by magicalhippo »

josefx wrote: post #44
magicalhippo wrote: post #36

Earlier quoted context omitted.

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.

Impressive, but it would at the minimum need some tweaking for it to work well with screenshots I think.
Post reply on HN