Make TYPO3 WebP compatible in just 15 minutes!

The reason for using the WebP image format developed by Google is, that it dratsically reduces the amount of data needed to display most images compared to jpg and other older formats. A host of articles have prmoted webp’s use, but despite it’s advantages, adoption is still slow. Just check out Google’s own WebP Gallery  for a rather convincing proof of it’s potential. While not everyone has switched to a browser which natively supports WebP yet, it is becoming increasingly popular with every update. We think it’s high time to revisit the topic and use this easy option for a performance boost.

Here is how to make a TYPO3 installation
WebP compatible in no time

1. ImageMagick and the server

Prerequisite for the conversion of an image to the new WebP format is a current version of ImageMagick. To check this functionality, use the following command in your console:

$ convert -list delegate | grep webp 
  png<= webp      "cwebp' -quiet %Q '%i' -o '%o"
  webp =>         "dwebp' -pam '%i' -o '%o"

If this functionality is missing, webp needs to be installed for ImageMagick, which is done with this simple command:

$ sudo apt-get install webp

If the TYPO3 instance is e.g. located on a Mittwald server with a GUI, the additional image processing software „WebP“ can be activated via the software manager.

2. The webP extension

If the aforementioned functionality has been set up successfully, installation of the webP extension  is what’s required next. This TYPO3 extension adds automatically created _WebP_ copies of all JPEG and PNG images processed by TYPO3 to the _processed_ folder. Get the extension via composer:

$ composer require "plan2net/webp"

Then the next steps are

  • Activating the extension
  • Check the database (the table tx_webp_failed must exist)
  • Clear cache and all _processed_ images in the TYPO3 backend
  • reload page(s)

The initial loading of a page can take some more time as every image is processed twice.

If something fails, check the TYPO3 log (var/log/typo3_*.log) as usual.

3. The .htaccess file

Finally, the .htaccess file needs to be adjusted so that the server simply „replaces“ the requested JPEG or PNG image in case a WebP image is present.

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{DOCUMENT_ROOT}/$1.$3.webp -f
RewriteRule ^((fileadmin)/.+)\.(png|jpg|jpeg)$ $1.$3.webp [L]
...
</IfModule>

4. Time to lean back an enjoy the speed

If everything is working smoothly, you will directly be rewarded in the before/after comparison of the network analysis.

For instance, our test website lost almost 58% footage during its 15-minute diet. What a joy!

(Author: Andrea Hildebrand)