9 ms·
JPG vs. PNG vs. GIF vs. SVG
- simlevesque 7y agoburn the chart with fire
- Mathnerd314 7y agoThe "burn it with fire" option for gradient logos and bathroom selfies makes this chart much less useful.
- deanstag 7y agoYes. The much more environment friendly option would be to recycle the image. But I guess nobody cares about that anymore!
- fsh 7y agoQuite ironic that the chart (PNG by the way) does not even render in Firefox.
- simlevesque 7y agoWhat ? It does for me on Linux with Firefox 68. PNG are handled by Firefox since Firefox 1 or 2, over ten years ago.
- Endy 7y agoIt's not the image, it's the 3rd-party script they use.
- parliament32 7y agoPrivacy Badger was breaking it for me
- 3JPLW 7y agoIt requires javascript from a third party domain. Hah.
- onion2k 7y agoIt's 2019. Frontend developers who aren't using picture tags with WebP and a fallback alternative need to update their HTML knowledge.
- dheera 7y agoSafari 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.
- danso 7y agocaniuse.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-sierra-betas-need-know/ https://www.macobserver.com/news/webp-comes-ios-10-macos-sie... https://caniuse.com/#search=webp https://caniuse.com/#search=webp
- jayflux 7y agoYou don’t need to wait for Apple, you can use the <picture> element to show webP images and fallback to PNGs for browsers that don’t support webP.
- dheera 7y agoMore 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.
- onion2k 7y agoWhat 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.
- beering 7y agoThis 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's no mention of that here.
- avhon1 7y ago> 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
- jandrese 7y agoOne 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 > favicon.png pnmtopng: 5 colors found % ls -l -rw-r--r-- 1 jandrese jandrese 216 Aug 7 17:33 favicon.gif -rw-r--r-- 1 jandrese jandrese 255 Aug 7 17:33 favicon.png
- JoshTriplett 7y agoDon'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.)
- jandrese 7y agoI 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.
- Anon1096 7y agoThere's no real reason to use a gif over png for non-animated images. You'll have bloated filesizes and a limited color pallette.
- simlevesque 7y agoyup, this guy is clueless and should not provide his advice let alone spend time to make a chart.
- CamperBob2 7y agoIn many cases, .GIFs are quite a bit smaller than .PNGs. They're useful for putting small bits and pieces of artwork into data URIs, for instance.
- vladojsem 7y agoNot a bad chart. I can imagine it a bit more useful and less cluttered by removing bathroom selfies. Yet I understand the viral element: Burn it with fire!
- simlevesque 7y agohow is it not bad ? it is absolutely not useful and the advices are misguided.
- vladojsem 7y agoI know, also png can be transparent. However, most of the things are useful for newbies.
- Raphmedia 7y agoWhy 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
- ktpsns 7y agoOh yes. Especially, never ever loose vector information if available. Vectors can scale. Bitmaps cannot. The chart gets this plain wrong.
- CASHforGOLD 7y ago*lose
- Anon1096 7y agomp4 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.
- s_y_n_t_a_x 7y agomp4 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.
- Wowfunhappy 7y agoWon'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)
- s_y_n_t_a_x 7y ago
- deleted 7y ago[deleted]
- dankohn1 7y agoCNCF spends a lot of time dealing with images, including the 1,172 on our Cloud Native Landscape <https://landscape.cncf.io/> https://landscape.cncf.io/>. Here's our advice: https://www.cncf.io/blog/2019/07/17/what-image-formats-should-you-be-using-in-2019/ https://www.cncf.io/blog/2019/07/17/what-image-formats-shoul...
- m-p-3 7y agoIs it a vector? Yes Is it a logo? No Result: GIF I can't even
- mcv 7y agoOnly if it's a vector image that's not for a website. The chart assumes only websites know how to handle SVG.
- danso 7y agoThe "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?
- rhacker 7y agoCorrect But just in general all of it needs to be redone when Webp is more widely used. https://developers.google.com/speed/webp/ 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.
- the8472 7y agowebp can be a bad choice because it is always chroma-subsampled. png and jpeg support full chroma.
- Endy 7y agoAnything coming off developers.google should be avoided like a plague.
- kalleboo 7y agoWebP 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)
- bluetidepro 7y agoWish i could read this. Ugh, Medium is the worst.
- mceachen 7y agohttps://miro.medium.com/max/2100/1*krupUwPRAO-t3CfGRTPttA.png https://miro.medium.com/max/2100/1*krupUwPRAO-t3CfGRTPttA.pn...
- SimeVidas 7y agoHow to annoy me Step 1: Suggest GIF as an option.
- cgrealy 7y agoI think some people are taking this entirely too seriously. This is clearly aimed at people who already know this. It's a joke.
- nailer 7y agoIs it a photo? Yes: JPG No: SVG If you're uploading bitmap diagrams logos etc. they should be vector.
- magicalhippo 7y agoSo which tool should I use to convert my screenshot to SVG?
- josefx 7y agoThis one? http://johanneskopf.de/publications/pixelart/index.html http://johanneskopf.de/publications/pixelart/index.html It might be apropriate in some cases at least.
- magicalhippo 7y agoImpressive, but it would at the minimum need some tweaking for it to work well with screenshots I think.
- nailer 7y agoThat'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.
- yourapostasy 7y agoI 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.
- deleted 7y ago[deleted]
- austinhutch 7y agoI 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 https://aloagency.com/blog/preparing-images-for-web
- Springtime 7y agoSVG 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.
- atiredturte 7y agoCan we please start a tag for medium articles posted to HN saying that they are member only articles? It is getting quite frustrating...
- tzakrajs 7y agoWhy 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
- egfx 7y agois it a website? GIF -> https://gif.com.ai https://gif.com.ai