Use webp instead of jpg, png and gif

The TYPO3 extension plan2net/webp has a bunch of converter classes. With the default configuration of the webp extension it uses the class Plan2net\Webp\Converter\MagickConverter to convert the images via ImageMagick or GraphicsMagick. So most of the times you don't need to change the configuration in your TYPO3.

If this does not work you can install cwebp on your server and change the configuration of the webp extension to

Configuration for converting with cwebp

<?php

$GLOBALS['TYPO3_CONF_VARS']['EXTENSIONS']['webp'] = [
    'convert_all' => '1',
    'converter' => 'Plan2net\\Webp\\Converter\\ExternalConverter',
    'mime_types' => 'image/jpeg,image/png,image/gif',
    'parameters' => 'image/jpeg::/usr/local/bin/cwebp -jpeg_like %s -o %s|image/png::/usr/local/bin/cwebp -lossless %s -o %s',
    'silent' => '0',
];

Additional to the webp extension you need the following nginx configuration

nginx configuration for webp images

location ~* ^.+\.(png|gif|jpe?g)$ {
	add_header Vary "Accept";
	add_header Cache-Control "public, no-transform";
	try_files $uri$webp_suffix $uri =404;
}

For images that are located in the site package and which I need to convert manually I add something like this to the scripts part of the composer.json and execute it via composer converttowebp.

webp script for composer.json

"converttowebp": "cd packages/template/Resources/Public/Images && convert '*.jpg' -set filename:fn '%[basename]' -quality 50 '%[filename:fn].webp' && convert '*.png' -set filename:fn '%[basename]' -quality 50 '%[filename:fn].webp'"