WebP at Allegro

A lot has already been written about WebP, a new image format created by Google
that provides both lossy and lossless compression of images displayed on the web. However, this solution is still not
popular in web development.

Although it’s already shipped by Chrome and Opera, pay attention that Internet Explorer 11 and Firefox 41 do not
support the new format. Browser support can be checked on caniuse.com and
status.modern.ie websites.

Benefits of WebP

The table below shows potential benefits for selected websites if WebP is used instead of JPEG:

website

# of JPEG images

JPEG images size

WebP images size

bbc.com

26

332KB

188KB

allegro.pl

26

1011KB

267KB

amazon.com

147

1945KB

1082KB

zalando.pl

34

410KB

67KB

merlin.pl

77

858KB

366KB

Recently, we delivered WebP to Allegro Articles’ readers. And here’s what we
have gained in various departments:

We have reduced the website size by 40% on average. This change is obviously meaningful for mobile users.

The <picture/> way

The easiest way to provide an image format that is supported by a user’s browser is to use the picture HTML5 tag.
You can find up-to-date documentation concerning this tag in the latest
HTML Editor’s Draft. Here is an example:

The action performed by the user agent is called image format based selection. It checks the type attribute of the
first picture’s source child element. If a browser supports a particular MIME type, then the first source element is
applied. Otherwise, the next one is taken into account (in this case it is img that is obviously supported
everywhere).

The picture and source tags are not supported by all browsers
(check browser support). Nevertheless, web developers know how to deal with
it. Scott Jehl created picturefill which might be helpful in such cases.
The script goes through each child of a picture element and verifies whether your browser supports given media types.
Next, it selects the best candidate based on supported media types and window.devicePixelRatio. The best option is
applied and the img tag is created with src value derived from srcset.

If adding some extra kilobytes to your website is not a problem, then picturefill might suit you well. However, there
is one catch — you need to have two versions of an image. The first image as WebP and the second one as JPEG. As a
result, you need to maintain both versions, which is not always possible.

Converting images on the fly

You can solve this problem if you have your own image conversion service. At Allegro we use ScaleMe to convert images
on the fly. We use it to manipulate images served for Allegro Articles. Just compare
these two examples (use Chrome or Opera to open the second URL):

Caching on proxy server

If you use any caching proxy servers (for example Varnish Cache) do not forget
to add the following response header:

Vary: Accept

The header instructs a proxy to cache a separate copy for each Accept header variant. As a result, content with
WebP images is served to all WebP-enabled browsers, whereas JPEG images are sent to the others.

Summary

The benefit that is brought by WebP is not small at all. Sometimes it is quite significant. According to caniuse.com
the WebP format can be served to 61% of Internet users all over the world and to 73% of Internet users in Poland.
By taking it into account, it is worth getting your hands dirty and provide your users with WebP.

Michał works as a webdeveloper since 2008. He speaks JavaScript, has strong Java background and loves new technologies around JS and HTML. In his free time he contributes to open source projects on GitHub.