Webmonkey

WebP versus JPEG. Click the image to see the full size examples on Google’s WebP comparison page. Image: Google

Webpages are constantly getting bigger.

Massive JavaScript libraries and endless sharing buttons aren’t helping, but the main culprit behind most of the bloat is the good old image. According to the HTTPArchive, images account for roughly 60 percent of total page size. That means the single biggest thing most sites can do to slim down is to shrink their images.

One way to do that is with alternate image formats like Google’s WebP, which can yield images between 25 and 34 percent smaller than more popular image formats. Despite the astounding space-saving potential of WebP it, like JPEG 2000 and other efforts before it, has not completely caught on with browsers.

So far only Google Chrome and Opera support WebP (both also automatically convert all images to WebP for their respective proxy browsing mobile services). Mozilla objected to WebP when it was first launched, but all of the issues raised in that post have been addressed as WebP has evolved. Firefox still does not support WebP. Nor does Internet Explorer.

However, as Opera’s Bruce Lawson recently pointed out, using some cutting-edge CSS wizardry you can serve WebP images to Chrome and Opera, while still offering JPGs to the rest. Here’s what the code would look like:

.mybackgroundimage {
    background-image: url("image.jpg");
    background-image: image("image.webp" format('webp'), "image.jpg");
}

This code uses the new Image Fallbacks syntax, which is part of the CSS Image Values and Replaced Content Module Level 4. The format qualifier is borrowed from @font-face and ensures that browsers won’t download the WebP image if they don’t support it.

Of course this only helps with CSS background images, which probably aren’t the majority of the images most sites serve up. For content images there’s currently no easy way to do the same thing, though there might be in the future if browsers begin to support the proposed <picture> element. Because <picture>‘s syntax is roughly analogous, you would be able to do something like this:

<picture>
    <source src=image.webp type=image/webp >
    <source src=image.png type=image/png >
    <img src=image.png alt="alt text "> <!-- fallback content -->
</picture>

That would cover almost all the bases: browsers that support WebP and <picture>, browsers that support <picture> but not WebP and browsers that support neither. Unfortunately it’s going to be a while before this pseudocode becomes real.

WebP has other problems worth considering before you dive in. For example, when users save an image they may have trouble getting a WebP image to open in their favorite desktop app.

Still, while WebP may have a little ways to go, the potential to significantly reduce page size appears to be winning converts. If you’d like to learn more about WebP and how you can use it, check out the video below from Google’s Making the Web Fast series.