Tags
general

You can install Magento 2 WebP Images Extension by Magefan, using composer or archive installation methods.

Do you want us to install and configure the WebP Images extension for you? Let our technical engineers do it – check out our installation service.

Post Contents [hide]

  1. Installation via composer (recommended)
  3. Installation using archive and FTP 
Attention! if you install the extension on Magento 2.4.0 there is a known issue in Magento 2.4.0 core "Error: main.CRITICAL: Error: Undefined class constant 'XML_PATH_HEADER_TRANSLATE_TITLE'. So before installing the extension please apply this change to your Magento instance. Note that this fix is already present in Magento 2.4.1.

Please navigate to your Magefan Account > My Downloads > Install via Composer to get the composer installation instructions.

Installation using archive and FTP

  1. Download WebP Images Extension ZIP-Archive from magefan.com website (not GitHub or other sources).
  2. Extract files.
  3. Copy app and lib folder from the archive to your Magento 2 folder.

    Magento 2 Extension Installation
  4. In a command line, using "cd", navigate to your Magento 2 root directory.
  5. Run CLI commands:
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy

Note: if you don't want your website to be down during deployment, try these zero downtime deployment commands for Magento 2.

Important!

Once you installed and configured Magento 2 WebP Images Extension don't forget to add the Expire Headers setting for the WebP files into the webserver settings. 

Why do you need this?

By default, Magento 2 has the expire headers written for the Apache, Nginx web servers and PNG, JPG, GIF, CSS, JS. However, it doesn't have them written for webp.

Then, if you use Apache, open the .htaccess file in the Magento root folder (pub/static or pub/media) and find the following line:

ExpiresByType image/gif

Once you find then add this line after it:

ExpiresByType image/webp "access plus 1 year"

In case you use Ngnix, open the virtual host file (ask your server admin to do this since it requires server root-access), find the following line:

location ~* \.(ico|jpg|jpeg|png|gif|svg|js|css|swf|eot|ttf|otf|woff|woff2|json)$ {

And replace it with:

location ~* \.(ico|jpg|jpeg|png|gif|svg|js|css|swf|eot|ttf|otf|woff|woff2|json|webp)$ {

Don't forget to restart Nginx after changing virtual host configurations.

Once you have installed the Magento 2 WebP Images extension you can start the extension configuration.