busybee fluffy rambles

Before PNG, websites were stuck with the following image formats:

• JPEG, which was great for photos, terrible for line art, and didn’t support transparency
• GIF, which was limited to 256 colors, or 255 with on-off transparency, and also had various patent issues that led to many websites declaring “burn your GIFs!”
• BMP, which had absolutely lousy compression (that was often not even supported so everyone sent them uncompressed), had some really weird spec issues that sometimes led to them being rendered upside-down, and had no transparency at all
• TIFF, which was a monstrously difficult specification to get right, and very, very few things actually did (and while it supports transparency, pretty much nobody used it for that); also its compression was better than BMP’s but still not Great

PNG came along to fix many of the above issues. It supported many different color formats, it had a compression algorithm that allowed for much more efficiency (at the expense of much more encoding time taken, sometimes minutes per image on hardware of the day!), and it tried to be extremely general to support other functionality that might have been useful.

It was years before browsers supported PNG, and even when they did, it was either handled by an external plugin (for years it was handled, badly, by Apple’s QuickTime plugin, of all things!), or extremely badly-implemented.

PNG’s big feature for web designers was having arbitrary transparency. Guess which feature took the absolute longest thing to get supported uniformly. Heck, there are still a lot of programs that don’t get PNG transparency right!

But PNG’s advantages were huge. Here you could have lossless compression of true-color images with full alpha blending. It opened up so many possibilities. But it’s also a fairly inefficient format.

PNG is also an incredibly complicated, hard-to-support format. It has lots of variants and sharp corners that nobody ever seems to implement correctly, because of all of the complex interactions between chunk types and their respective formats. It’s also incredibly slow to compress, not particularly great to decompress, and usually takes a lot of bandwidth.

So anyway. WebP.

WebP is a much more efficient format in every way. It’s faster to compress (meaning websites don’t need as much hardware or power to operate), it’s faster to decompress (meaning your computer doesn’t need to be as fast, and it’s very friendly for mobile devices), and its compression gets files much smaller (meaning you don’t need as fast of an Internet connection, which is especially important for mobile users or folks in rural/developing areas). It also supports both lossy and lossless compression, making it great for all kinds of images.

Also, every single current browser supports it already! It got adopted by the browsers way faster than PNG did It also has an amazing reference library that makes it a lot easier for new things to support it as well!

The thing that people get upset about, as far as I can tell, isn’t its use on the web, but its use in external programs. But that’s not a problem with the format, that’s a problem with the external programs!

Yes, it’s very annoying that Photoshop still doesn’t support it, nor do a bunch of other random image editors. That’s not a problem with the file format though, that’s a problem with those programs!

It took ages for Photoshop to support PNG. Now it does. Photoshop could also support WebP. It would be very easy for Adobe to add WebP support. There are plenty of image editors out there which support WebP today.

Get mad at Adobe and Microsoft and Clip Studio. Don’t get mad at the WebP format, or website operators who want to use it to make the Internet better.

Is it annoying to have to convert WebP to something else? Sure. Is it worth it? ABSOLUTELY.

If every website were to switch to WebP images overnight, we’d see a massive reduction in bandwidth and CPU usage, which translates directly to a massive reduction in power usage (and therefore greenhouse gases) and Internet congestion.

Bandwidth comparisons

Here’s an example of how much better WebP is in terms of bandwidth usage. All of these sizes were computed using using Pillow 9.3.0 and Publ 0.7.x’s default lossy quality of 35% (so sizes may change after the initial publication of this post).

First, here’s a photograph, presented in six formats (JPEG, GIF, PNG24, PNG8, WebP-lossy, WebP-lossless):

Here’s how large they compress to, in the full-size versions, from biggest to smallest (note that PNG24 is the only other truly lossless format in the comparison):

Here’s some line art, with the same comparison:

I think from this it’s clear that WebP is the way to go, whether lossy or lossless.

I, for one, am going to transition to moving all my website images to WebP. I’ve already updated my comics, and I’m fixing an oversight in Publ that’ll make it easy to flip the switch for my site as a whole.

WebP’s time is now.