Extension: WebP Next Generation Images

Improve your website performance with next-generation image formats

Features

  • Converts images to next-generation image formats (WebP, AVIF), which significantly reduces the file size through a superior compression algorithm

  • Generates a smaller copy of every image for mobile devices and delivers it below a configurable breakpoint

  • Writes the aspect ratio of every image into the page, so the browser reserves the space before the image is loaded and the layout does not jump

  • The dimensions of an image are read from the file only once and are then kept in the table cleverzoeger_image_size_cache

Implementation

To set up WebP Next Generation Images, please go to System → Configuration → CLEVER+ZÖGER GMBH → WebP Next Generation Images

Backend: General Settings

Next generation images configuration

General

  • Enable: Activate / deactivate extension

Source elements

  • Source attribute name: Name of the attribute in the <source> element which holds the URL of the image

  • Source data attribute name: Name of the data attribute in the <source> element which holds the URL of the image

Media query

  • breakpoint for mobile images: Maximum horizontal resolution in pixels, to which mobile images should be shown.

Frontend

Every image is wrapped in a <picture> element: the next generation formats come first, below the configured breakpoint the smaller mobile copy is delivered, and the aspect ratio is written as a media query so the browser reserves the space before the image is loaded.

<picture class="product-image-photo picture-image-…">
  <source type="image/webp" media="(max-width: 500px)" srcset="…/mb01-blue-0-500.webp">
  <source type="image/jpeg" media="(max-width: 500px)" srcset="…/mb01-blue-0-500.jpg">
  <source type="image/webp" srcset="…/mb01-blue-0.webp">
  <img src="…/mb01-blue-0.jpg" width="700" height="700" loading="lazy">
</picture>

In the storefront nothing changes visually; the images are simply smaller and no longer shift the layout.

Category listing with next generation images
Product page with next generation images

Requirements

This extension depends on the following modules and will be installed together with them via composer:

  • cleverzoeger/ext.magento2.cleverzoeger.base

  • yireo/magento2-next-gen-images (from 0.5)

  • yireo/magento2-webp2 (from 0.14)

This documentation is brought to you by the clever+zöger GmbH. We are developing Magento projects since 2008 and since 2020 we are Adobe Solution partner. If you have any issues, don’t hesitate to contact us support@clever-zoeger.de.