Convert Images to WebP in Shopware [Automatically]

When it comes to website loading speed, even the slightest details like images can cause a delay and scare off your potential customers. Since it is the least desired outcome, you have to optimize your images, so they load faster. One of the best ways to do that is by implementing the modern file format — WebP — recommended by Google and accepted by almost every browser. 

 You might use the online WebP converter to convert images to WebP and then upload them to your Shopware store. But you'll have to run them through that converter every time you upload new images. Not only is it time-consuming, but also ineffective, as not all browsers support Webp images yet. 

You don't want any of your visitors to see broken images, do you?

The Shopware WebP extension will enable you to improve your website loading speed and convert images to WebP format automatically in a few clicks.

To convert images to WebP in Shopware:

1. Install Shopware WebP Extension, navigate to Extensions > My extensions and find the WebP Optimized Images by Magefan listed in your extensions.

Shopware WebP Extension

Note: the module is automatically enabled and set up, so you don't actually have to do anything. The WebP extension will convert images to WebP on the first page load and store them on your server.

However, if you want to tweak the settings, follow other steps.

2. Configure General options.

  • Change the Quality score. It defines the size of the compressed images. The lower the value, the smaller the size. But quality will be poorer too. 

Note: we recommend keeping the default 85% score.

  • Define what data you want to copy to the WebP image from the original in the Image Metadata field
  • Specify what image folders to ignore during the WebP conversion in the Excluded Folders field. 
  • Clean WebP Cache if you want to remove all WebP images to change the quality score.

WebP Extension Settings Shopware

3. Fill in Advanced WebP Conversion Settings.

  • Enable the Convert HTML Picture Tag Images option if you use picture tags for responsive images and want to convert those to WebP format.
  • Enable the Convert CSS Background Images option if you use CSS background images in the HTML tags style attribute.
  • Specify URLs of the external websites in the

Advanced WebP Conversion Settings

Don't forget to Save the changes and go to the storefront to check how WebP Images are loaded.

WebP Images in Shopware

You don't have to worry about image optimization on a constant basis with the WebP images extension since it converts all of the existing and future images automatically. And, as you can see, it doesn't require you to do anything. Just install and benefit from!