Using the picture element to load WebP images with fallback

The performance of web pages depends for a significant part on images. According to the HTTP Archive, images contribute 63% to the weight of the average web page (August 2015).

Google has developed a new image format called WebP, that promises smaller file size at equivalent image quality. But not all browsers support it.

Luckily, there is also the new picture element, that can be used to serve the correct image to browsers. Inside the picture element you add a source element with the WebP media type. As fallback, you serve an image that is supported by all browsers (jpg, png, gif). Browsers that do not support the picture element, will ignore the picture and source element and use the img element instead.

  <source srcset="image.webp" type="image/webp" />
  <img src="image.jpg" />

Usually WebP has a smaller file size, but that is not always the case. So you should decide on a per image basis, if you want to use it.