Alchemy Mindworks

The WebP format was developed by Google as a twenty-first century replacement for the aging hoard of mutant armadillos which has previously served the web as graphic standards. It can be used in place of still image formats, such as JPEG and PNG, and it really gets up and dances when it’s used to replace the medieval relic that is GIF to manage animations.

WebP offers both lossless image compression like PNG and lossy image compression like JPEG. It uses vastly more effective image compression than existed when the foregoing formats were originally created back at the dawn of human civilization, resulting in both smaller animation files and better looking ones. It supports full alpha transparency.

It also handles timing in milliseconds, rather than in the hundredths of a second that GIF uses.

A Digression On Compression

In case the whole lossless and lossy compression issue sounds a bit like two Martians discussing what to order for lunch, here’s a brief digression on the matter.

Graphic files are by their nature sort of huge, and huge files can be a bit of an issue if you have a finite amount of storage space, such as on the SD memory card of a digital camera, or a finite amount of bandwidth over which to transmit said files, such as the Internet if you didn’t spring for a gigabit fiber connection.

These inconsiderate aspects of the physical universe being pretty much insurmountable, graphics are typically stored with data compression to reduce the amount of space they occupy. In its simplest sense, data compression as it’s applied to a picture would find areas of identically-colored pixels and replace them with a code that says, in effect “there used to be an area of identically-colored pixels here.” When it comes time to unpack the graphic, the software that does so would interpret the codes for the areas of identically-colored pixels and correctly recreate the original picture.

This is called “lossless” compression. That which gets written to a lossless graphic document comes out of that document unchanged. Lossless compression is the basis of the PNG still image format used in web pages, among others.

In dealing with photorealistic images – to wit, pictures from a digital camera – lossless compression usually finds itself in a bit of a box. Zoom in on a digital camera image and you’ll probably find that most of the areas therein that look like they consist of identically-colored pixels actually don’t. They’ll exhibit minor variations in color due to shading and light effect. This would pretty much stop lossless compression in its tracks.

“Lossy” compression cheats around this limitation, and it cheats quite effectively. In practice, there’s more detail and color information in most digital images than our eyes actually require to perceive them as being photorealistic and reasonably attractive. This is even more the case when pictures appear at a web page, or in other on-line media, wherein we don’t pay them much more than passing attention. It’s possible to lose a bit of detail and color fidelity, making formerly almost identical pixels in fact identical, and in so doing allowing image compression to have something to work with.

If the degree of color and detail degradation is chosen reasonably carefully, the result will be pictures that look like they haven’t been meddled with, but which reside in way smaller files.

The most commonly-encountered implementation of lossy compression is in what drives the JPEG still-image format. You can adjust the “quality factor” of whatever creates your JPEG graphics to store almost flawless reproductions of your pictures in somewhat huge files, horribly degraded versions of your graphics in very tiny files or – as is usually the case – a compromise between these two extremes, reasonably faithful pictures in files of a size you can get along with.

The downsides to JPEG are:

• Its somewhat ancient and extremely complex data compression isn’t all that effective, and also isn’t entirely consistent among all the applications that read and write JPEG files
• Its primitive logic for simplifying your source graphics results in noticeable… and none too attractive… artifacts in stored images if you choose a quality factor that’s a bit too aggressive.

Googling for WebP

The WebP graphic document format was designed from scratch for use on web pages and comparable media. It can store lossless still images, like PNG does, lossy still images like JPEG, and animations like GIF, but with way better color and more accurate timing.

Because it uses more modern compression logic than its dusty ancestors, your graphics and animations will be smaller and yet more attractive if they’re stored as WebP documents.

You can use .webp files in a web page in precisely the same way as you would .jpg, .png or .gif files. Here’s an example of the HTML coding for a .webp graphic or animation:

<img src=”mygraphic.webp”>

As of this writing, all the popular web browsers support WebP graphics and animations. If you’re seeing four animations in this posting, yours is among them.

The example animations in this posting illustrate some of the capabilities of .webp files. The first one is actually a GIF animation, resplendent in its patina of antiquity and its circa 1987 color space. GIF animations support a maximum of 256 unique colors, so some very crafty software has adjusted the colors in the first of these animations to get along with this limitation.

If you look closely at the GIF animation, you’ll notice that the shadow below the bear and behind the cube is a bit rough. The bear’s nose has been rendered as a sequence of colored horizontal bands, rather than as a smooth color gradient.

We hasten to add that this GIF animation was created using color remapping, rather than color dithering. Had the latter been used, the colored bands would have been less noticeable, but the whole animation would have been decidedly less sharp.

The GIF animation occupies 208,493 bytes.

The second animation is a lossless WebP document. If you plant your face directly in front of your monitor, you’ll notice that the shadow detail is much more distinct and lifelike, and the bear’s nose suffers from no banding or compression artifacts.

The lossless WebP animation occupies 388,972 bytes – it’s larger than the GIF animation, but arguably worth the hit.

The third animation is a lossy WebP document in which the quality factor has been set to 75, this being the usual default for lossy compression. It will require a keen eye and a modest degree of imagination to distinguish it from the lossless animation.

The lossy WebP animation of reasonable quality occupies a mere 110,788 bytes, just over half of what the GIF file needed, and it looks substantially better.

The final animation is a lossy WebP document with a quality factor of 10… which is somewhere you probably never want to go. It exhibits lots of color and detail loss, and noticeable compression artefacts in the moving cube and the shadow thereof, which periodically deteriorate into solid rectangles.

The extremely lossy WebP animation occupies 51,934 bytes.

In practice – should you find your web pages choked for storage space or bandwidth – most animations can be squeezed into lossy WebP documents with quality factors slightly lower than 75 with no obvious loss of quality. Some experimentation may be called for.