At some point in your speed optimisation journey, you'll start searching "how to convert images to WebP in Magento". Everyone does, since it's a file format that allows you to reduce image size with little to no quality loss.
If you've done some research already, you know that Magento WebP image support is "complicated". But there's a way.
So, in this guide, you'll learn how to convert Magento images to WebP and make sure they work as expected.
Why Convert PNG to WebP in Magento?
Since even Google PageSpeed highlights WebP as an important speed factor, it's definitely worth implementing. But if you're still hesitating, here are some WebP benefits to keep in mind:
- Reduced loading time — WebP uses lossy and lossless compression, which reduces WebP size significantly. It makes them 26% smaller than PNG and 25 - 34% smaller than JPEG. Correspondingly, your website can load 25-30% faster depending on the quality you choose.
- Improved SEO — smaller size allows WebP to load faster than other file formats. This means better Core Web Vitals and better ranking positions.
- Better user experience — WebP images retain the same transparency and quality even if you reduce the file size. Therefore, you not only provide quality images to your customers, but load them faster too.
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:
<?php
$errorSufix = '<br/>Please enable it in your hosting configuration or ask the server administrator to help you with this.</strong>';
if (!function_exists('gd_info')) {
echo ('<strong style="color:red">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 ('<strong style="color:red">Error: WebP option is not enabled in PHP GD.' . $errorSufix);
exit();
}
if (!function_exists('imagecreatefromwebp')) {
echo ('<strong style="color:red">Error: imagecreatefromwebp function does not exist.' . $errorSufix);
exit();
}
echo ('<strong style="color:green">Success.<br/>Your PHP settings are ready for WEBP.</strong>');
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 to Convert Images to WebP in Magento?
Magento offers no WebP support. So you must rely on Magento extensions and some other external tools and services to generate WebP images on your store.
The following methods have different levels of reliability, difficulty and, obviously, the costs.
1. Magento 2 WebP extension (automatic conversion)
offers a simple plug-and-play setup. So, it's, by far, the easiest and most reliable path. Especially for merchants who have a simple setup — with shared hosting and no enterprise CDNs or Fastly.
The extension handles everything directly within your Magento admin. It:
- Converts all images automatically
- Falls back onto original PNG and JPG images for older browsers
- Requires no CDN or external services for the conversion
This means you don't have to configure any Nginx rules or manage WebP file versions manually. Everything is done for you.
2. Online WebP converter (manual uplaod to Magento)
The second most common option would be to convert images to WebP using any free online WebP converter. But again, since you won't be able to upload WebP images to Magento, you need a Magento WebP Extension to add the compatibility first.
While this seems like an easy workflow, there is a lot of manual work involved, which make it a good option for smaller stores.
3. CDN (Cloudflare, Fastly)
High-traffic websites with a lot of static content, like images and videos, usually benefit from a CDN. Most of them offer automatic image optimisation and WebP support.
They generate WebP images on the edge and serve them according to the browser compatibility with WebP. However, for many merchants it's just too expensive, if they don't use CDN already.
4. CLI Tools (cwebp, Imagick)
If you have a custom forkflow, a more effective approach would be to manage images manually through server-side script (using cwebp, libwebp CLI tools, imagick, cron jobs).
While it might be useful for developers and DevOps, most merchants would find it hard to maintain.
While all of these methods help you convert images to WebP in Magento, the best choice depends on your needs and infrastructure.
If you're already paying for Fastly or Cloudflare, CDN optimisation might be enough. Same as using CLI tools if you're a developer building custom workflows.
However, if you don't use an advanced CDN and have a simple setup, the Magento WebP extension is the most practical solution. Especially if you don't want to maintain it and worry about fallback mechanisms past installation.
Troubleshooting WebP Issues in Magento
Regardless of the approach you choose, WebP images might still fail to work properly once you convert them.
So, here are the most common issues with WebP images in Magento and how to fix them.
"Disallowed file type" Error
If you don't use any WebP extension, uploading .webp files to Magento might trigger this error.
Fix: don't try uploading WebP directly to Magento, as you risk broken images on older browser versions. Just upload PNG and JPG and let the extension convert them automatically.
WebP images don't show on the frontend
If the WebP copy is generated but doesn't load on the frontend, the issue is usually in the browser detection mechanisms or some misconfiguration on your side.
Fix: double-check if your WebP extension replaces images to WebP in HTML, check server rules, or just regenerate WebP images.
WebP images are blurry or low quality
As we've already specified, WebP uses lossy and lossless compression. It offers significant size reduction with insignificant quality loss.
The smaller the file size, the lower the quality.
Fix: increase the WebP quality score in the WebP extension or tool you use to improve image quality.
Note: default Quality score in the Magefan WebP extension is 85. But you can change it anytime, clearing WebP cache beforehand.
WebP images don't display on some browsers
Although the WebP format is becoming a standard, there are a few outdated browsers and their versions that don't support it.
Fix: make sure an extension or a CDN you use provides automatic fallbacks to the original JPG/PNG copies and serves WebP only in those browsers that support it.
Loading speed didn't improve with WebP images
WebP images are smaller than your original files, so they should speed up your store. If they are not, chances are you're not actually serving WebP files or there are too many of them on a page.
Fix: use browser dev tools to check if the WebP images are being loaded and clear Magento cache. Additionally, you may try to change the compression level and implement lazy loading.
WebP files are too large
Quality score is what defines the size of a WebP image. If the WebP files turn out too large or with no significant size improvement, just adjust the quality setting.
WebP conflicts with other extensions
Multiple things can interfere with WebP on your Magento. From page builders to CDN image scripts and lazy load tools.
Fix: make sure all extensions are updated to the requirements of your Magento version. If it doesn't help, disable conflicting extensions temporarily and repeat the testing.
CDN or Varnish serves old image versions
Sometimes cache might cause older PNG and JPG images to show even if their WebP copy has been generated.
Fix: verify if the CDN overrides the rules, then clean Magento, CDN and Varnish cache in that specific order.
Regardless of the method you use to generate WebP images in Magento, make sure that it offer the best experience for both you and your website visitors.
