Falling Back to Other Formats

The <picture> and <source> elements

As you may know, the <picture> and <source> elements are a new way for responsive resource loading. The <source> element has a type attribute to specify the resource’s mime-type for supporting browsers, so we can make browsers load images which specified with them such as the following:

<picture>

<source srcset="image.webp 1x" type="image/webp">

<img src="image.jpg">

</picture>

In this case, a browser will load image.webp if WebP is supported, and load image.jpg otherwise.

WebPJS

WebPJS is JavaScript library that converts WebP images into a data URI string on the client-side.

Check Accept Headers on the Server-side

Browsers send Accept Headers with each request. Something like…

Accept: image/webp, image/png, image/jpeg, image/gif, image/svg+xml, image/bitmap

So, the server can choose images to return to browsers by checking whether the request header sent from the client-side contains Accept: image/webp or not. If it does not contain image/webp, we can make our servers return PNG or JPEG or GIF images which, maybe original before converted into WebP ☺

I recommend you check the following resources.