[dvirsky]

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.

[pornel]

There are a few ways of making fully backwards-compatible "lossy" PNG: 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]

The 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]

Also 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]

Rendering icons as SVGs is pretty horrible in terms of performance on mobile devices.

[panzi]

Yeah, 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/

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.

[DanitaBaires]

> Well, bmp has no alpha channel

BMP have formats which support 1-bit and 8-bit alpha channels http://en.wikipedia.org/wiki/BMP_file_format. Just open any file in Photoshop and save as BMP then click advanced. Not sure of browser support.

[FooBarWidget]

What? I thought zip and png use the same compression algorithm.

[pornel]

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

[ajslater]

I've had the best luck using opitpng and then pngout.

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

[imaginenore]

PNGOut is definitely better than OptiPNG most of the time:

http://www.olegkikin.com/png_optimizers/

[jibsen]

zopflipng (with -m switch) is close to or better than the best on those five images:

    1_zopflipng.png  8.466
    2_zopflipng.png 18.739
    3_zopflipng.png  8.012
    4_zopflipng.png 91.879
    5_zopflipng.png  1.117

[Hello71]

zopfli: not a png optimizer.

[chadaustin]

Well, zopflipng is! https://code.google.com/p/zopfli/source/browse/README.zopfli...

[panzi]

Yes, I even mentioned that.

[pippy]

Plus 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]

One 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]

WebP 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]

Saying '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]

Saying 'desktop market' gives away your bias there too.

[JohnTHaller]

Chrome 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'.

[milsorgen]

How 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]

Simple 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]

I'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]

http://geeks.everything.me/2013/04/24/why-we-like-webp/

Suggests a 5x benefit over PNG for mobile app icons.

[pornel]

Google'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]

Read 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%.

[milsorgen]

I appreciate the information, thank you!