7 ms·
Until JPEG supports transparency, it leaves a vast hole where a good lossy alpha enabled format is needed - namely icons. With the high resolution of mobile dev
by dvirsky 12y ago
Until JPEG supports transparency, it leaves a vast hole where a good lossy alpha enabled format is needed - namely icons. With the high resolution of mobile devices, using PNG for this use case is a huge waste. Regardless of the quality differences, WebP fills a major pain for mobile and web developers. I really think Mozilla should just support it.
- milsorgen 12y agoHow much of a gain do you get in WebP versus a properly optimized PNG for icons? I can't imagine it's a compelling difference.
- wodenokoto 12y agoSimple 2 or 3 color icons might not win a lot, but there is also a whole genre of photo-realistic icons which would have a lot to gain from WebP like formats.
- milsorgen 12y agoI've been trying to pull up some data but I keep coming back to JPG v. WebP. Got a link to anything by chance?
- ZeroGravitas 12y agohttp://geeks.everything.me/2013/04/24/why-we-like-webp/ http://geeks.everything.me/2013/04/24/why-we-like-webp/ Suggests a 5x benefit over PNG for mobile app icons.
- milsorgen 12y agoI appreciate the information, thank you!
- pornel 12y agoGoogle's own marketing materials claim 25-33% improvement at the same quality, so 5x improvement suggests they didn't compare apples to apples. Comparing formats in a fair way is hard. "Looks almost the same" is a common fallacy — small change in quality can have dramatic change in file size, e.g. JPEG 80 and JPEG 90 look almost the same, but one is 2x larger than the other! For example lossy WebP doesn't support full color resolution, but JPEG by default does. If you don't correct for that you're telling JPEG to save 4x as much color, and the difference is usually imperceptible, because that's the whole point of chroma subsampling.
- dvirsky 12y agoRead the doc - the suggested x5 improvement is compared to PNG, which is the only other way to currently solve the problem of an icon with transparent edges (let's leave GIF aside), not compared to JPEG. The gain compared to JPEG was about 50%.
- pornel 12y agoIf they compared PNG with lossless WebP the difference would be small (lossless WebP is still using gzip, just with smarter preprocessing). When you compare with lossy WebP, then the right thing is to use lossy PNG as well. I can make lossy PNG 4 times smaller than what you get from Photoshop (http://pngmini.com http://pngmini.com), so that'd make the comparison more fair, and the difference less dramatic.
- acdha 12y agoThe person you're replying to wrote a library which does lossy PNG compresssion which would be ideal for these use cases: https://github.com/pornel/pngquant https://github.com/pornel/pngquant
- deleted 12y ago[deleted]
- pippy 12y agoPlus with chrome already supporting it, WebP has ~50% market share in most countries. Now we'll have two similar but competing technologies and web developers will simply resort to the older formats.
- pornel 12y agoOne browser is not enough. Image formats have massive network effects — people want to share, save and remix images. You need support the format in image viewers, editors, file browsers, mobile apps, websites. As an exercise, try having your avatar only in the WebP format and see how useful it'll be.
- izacus 12y agoWebP is mostly handled via transparent proxies - meaning people with proper browsers and Android mobile devices get WebP (large market share), everyone else gets (larger) PNGs. That way you don't really care either way on the backend.
- JohnTHaller 12y agoSaying 'proper browsers' gives away your bias there, since only the Blink WebKit engine supports it (Chrome/New Opera), which is under 20% of the desktop market worldwide.
- cbhl 12y agoSaying 'desktop market' gives away your bias there too.
- JohnTHaller 12y agoChrome has approximately the same worldwide market share as Firefox on the desktop. Both put together are eclipsed by IE. The metrics that disagree with this stat measure 'hits' (aka pre-2000 web metrics) instead of 'visitors'.
- panzi 12y agoYeah, depending on the image putting a bmp into a zip is actually significantly smaller than a png. Well, bmp has no alpha channel, but just as comment to the size of pngs. pngs even uses the zip algorithm in a way that is supposed to be optimized for images, but apparently it is not. E.g. the tiles here are a lot smaller as bmp in a zip: http://panzi.github.io/mandelbrot/ http://panzi.github.io/mandelbrot/ Ok, it put them into one single zip and can't remember if it was solid or not, so it might be the cross-file compression that makes the major difference here.
- FooBarWidget 12y agoWhat? I thought zip and png use the same compression algorithm.
- pornel 12y agoThey do indeed. If you're seeing BMP+ZIP being smaller than PNG it only means your PNG encoder is poor. This can be easily fixed with a PNG optimizer like Zopfli, AdvPNG or OptiPNG.
- Hello71 12y agozopfli: not a png optimizer.
- chadaustin 12y agoWell, zopflipng is! https://code.google.com/p/zopfli/source/browse/README.zopflipng https://code.google.com/p/zopfli/source/browse/README.zopfli...
- ajslater 12y agoI've had the best luck using opitpng and then pngout. https://github.com/ajslater/picopt https://github.com/ajslater/picopt ...will do this automatically for you. Pictopt: A multi-format, recursive, multiprocessor aware, command line image optimizer utility that uses external tools to do the optimizing. For an all in one GUI for Mac approach to this, try ImageOptim
- pornel 12y agoThere are a few ways of making fully backwards-compatible "lossy" PNG: http://pngmini.com/lossypng.html http://pngmini.com/lossypng.html You can have icon files 3-4 times smaller, and large photorealistic images 2 times smaller than the regular PNG.
- ZeroGravitas 12y agoThe hover effect on your demo images confused me. I assumed it would switch between the original and the compressed version. Instead it's swapping out the background to demonstrate transparency, which could probably be made more obvious.
- cpncrunch 12y agoAlso you can use svg, which is supported by the current versions of all browsers today, and the files will likely be smaller than webp, jpeg or png.
- dvirsky 12y agoRendering icons as SVGs is pretty horrible in terms of performance on mobile devices.