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.

Image files and sizes
Webp and original file sizes

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

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

  <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">
Webp logo
Webp logo and icon


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.

AMP logo
Accelerated Mobile Pages Project logo

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"
   alt="Alt text of the image">
<div fallback>
<amp-img src="/images/amp/title.jpg"
   alt="Alt text of the image">

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


Cloudhoreca Kft. and this site is not affiliated with or endorsed by The Joomla! Project™. Any products and services provided through this site are not supported or warrantied by The Joomla! Project or Open Source Matters, Inc. Use of the Joomla!® name, symbol, logo and related trademarks is permitted under a limited license granted by Open Source Matters, Inc.