Serving WebP images

WebP is an image format developed by Google.

WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster. WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index.

The format is not supported in all major browsers yet. So if you use it, you generally need to make sure you can serve an alternative format for other browsers. Typically you can do this by saving your images in different formats and add the different formats to your page with the <picture> element:

<picture>
    <source type="image/webp" srcset="image.webp">
    <source type="image/jpeg" srcset="image.jpg">
    <img src="image.jpg" alt="My Image">
</picture>

If you want to learn more about WebP, here is a couple of articles to get you started:

WebP for CMS-managed images

In the context of content management, this means the user would need to upload different versions of the same image. Alternatively, you would need a system that generates the necessary versions so the editors only have to upload one version.

In Perch, with the built-in image field type you can set up your template tag to tell Perch to generate different versions with different sizes and qualities for you. However, at the moment (as of v3.1.4) Perch does not generate versions in different formats.

This is where you can take advantage of services like Cloudinary and Imgix. Both services allow you to optimise and manipulate your images with simple URL parameters.

One of the features both services have is the ability to automatically serve .webp images to browsers that support it. If the browser does not support WebP, they will fallback to the original file format. So the CMS editor has to only upload a single image in a commonly supported format like .jpg, and you can set up Cloudinary or Imgix to handle the rest.

Using Cloudinary / Imgix with Perch

I have open-sourced a template filter for each:

Your original images can remain where they are on your server. After installing one of the above filters and signing up to the corresponding service, you can start serving WebP images to browsers that support it by applying the filter to your image tags:

<perch:content id="image" type="image" label="Product Image" filter="cloudinary" opts="f_auto">
<perch:content id="image" type="image" label="Product Image" filter="imgix" opts="auto=format">

The above options, Cloudinary’s f_auto and Imgix’s auto=format, let you serve the image in the best/optimal format supported by the browser requesting the image. For more details:

You can take advantage of more image transformation features and chain multiple options:

<perch:content id="image" type="image" label="Product Image" filter="cloudinary" opts="f_auto,q_80">
<perch:content id="image" type="image" label="Product Image" filter="imgix" opts="auto=format&q=80">

Refer to Cloudinary’s and Imgix’s documentation for available options.

link