Switching to the new WebP format is one of the first steps in speed optimisation. These images are smaller in size and correspondingly take less time to load. But the question is — how do you convert images to WebP in Magento?

You have two options — do it automatically with the Magefan WebP Images Extension for Magento or convert them elsewhere and upload directly to the admin.

In this guide, you'll learn everything you need to know to generate WebP in Magento with Magefan, monitor and manage them for the best experience.

But let's start with the basics.

Magento System Requirements for WebP Images

Since Magento doesn't provide any native WebP conversion, you have to rely on the image libraries on your server. That's why before you can convert images to WebP in Magento, you need to check if your server can actually handle that.

It should support one of the following:

Imagick / ImageMagick with libwebp — should comply with the WebP support since many hosting providers offer it without the libwebp.
PHP GD with WebP enabled — must include WebP support (imagewebp() function available).
libwebp command-line (optional) — used for faster conversions.

Note: if your server requirements are not met, no WebP extension can convert images to WebP, even if you install it correctly.

That's why you have to confirm the server compatibility before installing any extensions.

How to Check If Your Server Supports WebP?

To check if your environment is ready for WebP, run a quick test with the simple PHP script in your Magento root.

1. Create a new test file like testwebp.php in your Magento root.

2. Add the following code and save the file:

Please enable it in your hosting configuration or ask the server administrator to help you with this.';

if (!function_exists('gd_info')) {
   echo ('Error: GD is not enabled in PHP settings.' . $errorSufix);
   exit();
}

$hasWebP = false;
foreach (gd_info() as $key => $value) {
    if (stristr($key, 'webp')) {
        $hasWebP = true;
        break;
    }
}

if (!$hasWebP) {
    echo ('Error: WebP option is not enabled in PHP GD.' . $errorSufix);
    exit();
}

if (!function_exists('imagecreatefromwebp')) {
    echo ('Error: imagecreatefromwebp function does not exist.' . $errorSufix);
    exit();
}


echo ('Success.
Your PHP settings are ready for WEBP.');

3. Open the file in your browser via the following URL:

https://mydomain.com/testwebp.php

If you see a green Success message, it means you server is fully ready for WebP images.

However, if the file doesn't load (it might be because your hosting blocks direct access) run it directly from your Magento folder through a CLI command:

php testwebp.php

If you see the same Success message, then you can safely convert images to WebP in Magento.

Note: if you still can't get through, you might need to ask your server admin to set the configuration or just change your PHP settings in the hosting panel.

How WebP Generation Works in Magento?

Now you're ready for the WebP generation. There are just a few things you should know about the Magefan WebP Images Extension:

Doesn't remove your original PNG and JPG images from your server. It creates copies in WebP format.

Doesn't load both PNG and WebP files, though you might see both in code on frontend. It loads a corresponding image based on the user's browser.

e.g. If the user comes from a newer browser, we'll load WebP image. If the browser is outdated, the user will see original PNG images. This approach ensures a great experience for all users, without exception.

Doesn't change the original images' paths. It creates a separate folder for WebP copies and serves them from there.

How to Convert Images to WebP in Magento?

To convert images from PNG to WebP in Magento, you first need to configure the WebP Images Extension.

Let's go through each section you need to cover.

Step 1: Cover the basic WebP settings

This is the section where you configure how, when and in what quality WebP images are generated. So, go to Stores > Configuration > Magefan Extensions > WebP Images, enable the Magefan WebP Extension and start filling out the options.

Note: all the options are already set up according to the best practices. So, you don't need to do anything once you enable the extension. It will start WebP generation automatically. Change or fill out the following options only if you need to.

Quality score

WebP images use lossy and lossless convertion to guarantee the best quality during the size reduction. But you can control the WebP quality

Quality (1-100) — define the quality (compression level) of the WebP images. The default value is 85.

You can set a lower value for a smaller file size, but note that the smaller the file size, the worse the quality.

Note: if you don't like WebP quality, clear the WebP cache and change the quality to trigger WebP generation with a new quality value.

Image metadata — defines a list of metadata to copy from the original image to the WebP image. Note that the more metadata you include, the heavier the webp image.

Generation mode

These options define how WebP generation is processed — automatically or manually.

WebP Generation Mode — defines how WebP Images will be generated:

Page Load: WebP images are generated during the page load.

Cron: images are converted to WebP format by cron daily.

Page Load&Cron: both of these 2 modes combined.

Manually by CLI commands bin/magento magefan:webp:convert: images are converted to WebP after you run the CLI command.

Asynchronous WebP Generation (on Page Load) — generates WebP images on page load asynchronoously, only when images is requested with pub/get.php. It means there won't be any delays on the image generation, even the slightest.

Note: regardless of the conversion mode, the extension never converts the same image to WebP twice. So, it skips images already converted to WebP.

Skip images

Magefan WebP Extension for Magento converts all images on your store. But if you want to skip any image or entire folder, that's where you do that.

Skip Images Created More Than (Days) — allows you to skip images added lately (more than N days before).

Skip Media Folders and Skip Static Folder — exclude entire image folders from WebP conversion.

Note: if you want to skip some specific tags add the data-webpconverted="1" attribute to the tag.

e.g. "image.jpg" /> —> "image.jpg" data-webpconverted="1" />

WebP cache

WebP cache allows you to regenerate WebP images if you want to change WebP quality. So, first change the Quuality (1-100), then Clear WebP cache and Save the settings. It will delete all old WebP images and generate new ones.

Step 2: Fill out the advanced WebP settings

These settings cover custom images within your store or in your APIs.

Use PICTURE Tag to Show WebP — (enabled by default) allows the extension to fall back onto original PNG and JPG images for browsers that don't support WebP.

Convert HTML Picture Tag Images — converts images in picture tags (different images for different screen sizes).

e.g.

Convert CSS Background Images — converts images into CSS background (in the HTML tags style attribute).

e.g.

Convert Images and Sliders inserted via Magento Page Builder — converts images added through the page builder to WebP.

Convert Images In GraphQL and REST API Requests — convert images to WebP in your third-party application.

Note: the extension will replace the original images in WebP format in GraphQL and REST API request results only in case the user agent (browser or application you make a request in) supports the WebP format.

Convert Images From External Websites — converts images from some external websites, e.g. WordPress, if you specify the external websites' base URLs.

Step 3: Monitor WebP image generation

After you start converting images to WebP format in Magento, they will appear in the System > WebP Optimized Images > Images panel.

Here you can see general metrics on the WebP generation, such as:

how many images are already converted, skipped or scheduled

the number of images converted based on the conversion mode

how many images were converted in the last 5 minutes, a day or a week, etc

the comparison of the original and converted image sizes

Besides, you can find every single converted image in a handy grid. This allows you to compare the original and WebP version sizes, see the compression percentage, status and the conversion method used.

Note: if you only use Page Load as a conversion method, you will see only converted images in this grid. If you want to see images that are to be converted, run the following command — bin/magento magefan:webp:scan — or enable the Page Load & Cron conversion method.

While you're still here in the Images panel, you can delete all or specific WebP copies. Just tick a corresponding image and choose Delete from the Actions dropdown. The images will then be converted to WebP by the conversion method set in settings.

Step 4: Test WebP images

Except for the Images panel, you can test WebP images on the storefront.

WebP Generation Takes Too Long

Depending on the number of images the conversion can take some time. To reduce the "pressure" on your system, just choose the Cron generation mode or convert images manually using the CLI command.

In the second case, you can also generate images in batches, inside a specific folder. Just add a parameter to the WebP generation CLI command:

bin/magento magefan:webp:convert --path media/wysiwyg/foldername
bin/magento magefan:webp:convert --path static/foldername

Upload WebP Images to Magento

Based on all the information you've just read, WebP generation in Magento could be entirely automatic.

However, if you already have some images converted and just want to upload WebP to your admin, there's a way. But note that this option is more time-consuming. You would have to manually convert and upload WebP images to Magento.