Using AMP and .webp image - the fallback solution

Let's say you are a PageSpeed geek and you want to reduce your page load time therefore you want to reduce your page size. You probably heard of a new image format called the webp.

Webp image format

By using this new image format you can compress your image in a new way. A lossy jpg image file size will be reduced around 30%. It's also a perfect solution to get rid of the old .png as well, since webp supports transparency. You can read more about it on css-tricks.com.

That's great but some browsers does not support it yet. For them you can use a fallback image. For example a jpg one.

<picture>
  <source srcset="images/filename.webp" type="image/webp">
  <source srcset="images/filename.jpg" type="image/jpeg"> 
  <img src="images/filename.jpg" alt="Alt text of the image">
</picture>

WEBP and AMP

AMP means Accelerated Mobile Pages Project which is an open source project. It aimes to speed up the static web pages on mobile devices by standardizing them. Using AMP you can experience much faster page load time and it feels those web pages are already in your device.

What happens when you are using AMP and webp image? The code written above won't work. You will need to set up a new type of AMP fallback rule to display a jpg instead of webp in Firefox.

<amp-img src="/images/amp/title.webp"
   width="488"
   height="220"
   layout="responsive"
   alt="Alt text of the image">
<div fallback>
<amp-img src="/images/amp/title.jpg"
   width="488"
   height="220"
   layout="responsive"
   alt="Alt text of the image">
</amp-img>
</div>

This is a mechanism for selecting image file based on capability. Hopefully Firefox will support .webp image extension soon.