Jack of all trades concerning image optimization. Also introduces the usage of next-gen-image-formats.
Adds the possibility to optimize existing jpg, gif and png files during processing. Furthermore, it can add a webP copy of every processed image.
Use composer to add the extension:
composer require "sitegeist/image-jack"
- Completely clear all processed images via the maintenance module
- Flush Caches
- Change the server configuration (see below) or activate the fallback driver xclass
To deliver the webP images, the webserver needs to be configured properly. Example for Apache (.htaccess):
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)\.(png|gif|jpe?g)$
RewriteCond %{REQUEST_FILENAME}\.webp -f
RewriteRule ^ %{REQUEST_FILENAME}\.webp [L,T=image/webp]
<IfModule mod_headers.c>
<FilesMatch "\.(png|gif|jpe?g)$">
Header append Vary Accept
</FilesMatch>
</IfModule>
As we are creating the webP images as copies (keeping the original image untouched) this configuration delivers the webP image if the client supports it. Otherwise, the original image is served.
As a fallback solution (e.g. for remote storages) there is an option in the extension settings to activate a xclass for the storage driver. There needs to be a class for every storage driver that should be extended. The LocalDriver and the AmazonS3Driver are already available. To avoid the cache problem (first client defines the served image format) the image formats from the clients accept header are added to the page cache identifier. If this option is activated the htaccess modification (see Webserver) is no longer necessary.
To start the image processing a command is available:
jack:process --limit=20
The images are processed one by one. By changing the limit, the number of images to process in one run can be defined.
For the webp conversion an installed version of Imagemagick or GraphicsMagick with webp support is required.
You can check this with:
gm -version | grep -i webp
or:
convert -version | grep -i webp
When using gd, webP support is needed.
For optimizing jpg files the binary "jpegoptim" is required. You can check this with:
which jpegoptim
(Should return a path)
If missing it can be installed for example with this command:
apt install jpegoptim
For optimizing png and gif files the binary "optipng" is required. You can check this with:
which optipng
(Should return a path)
If missing it can be installed for example with this command:
apt install optipng
If enabled the images are processed live on request using a LocalImageProcessor. This can lead to high load and very long loading times upon first request (depending on the number of images on the page). It is recommended to stick with the default and use the available command for processing.
When enabled a xclass is used to extend the getPublicUrl function from the LocalDriver and AmazonS3Driver. This can be used if the htaccess solution is not working, e.g. for remote storages. See Storage API (beta) for more details.
(De)activate the conversion.
Which way should be used to convert the images: Imagemagick/GraphicsMagick, GD or an external binary
Depending on the conversion type this field can be used for different purposes:
- IM/GM: Add options that are directly passed to the binary
- GD: Quality for the new images (1 - 100)
- External: The complete path to the binary to be used. You can use %s for source and target image.
(De)activate the conversion.
Which way should be used to convert the images: Imagemagick/GraphicsMagick, GD or an external binary
Depending on the conversion type this field can be used for different purposes:
- IM/GM: Add options that are directly passed to the binary
- GD: Quality for the new images (1 - 100)
- External: The complete path to the binary to be used. You can use %s for source and target image.
(De)activate the optimization.
The path to the jpegoptim binary. Please use the complete path as is_executable won't work correctly otherwise.
(De)activate the optimization.
The path to the optipng binary. Please use the complete path as is_executable won't work correctly otherwise.
Just activate the levels that should be written to the log file.
The custom template should extend AbstractTemplate and implement TemplateInterface. Just use one of the existing templates as a starting point.
Custom templates can be registered like this:
$GLOBALS['TYPO3_CONF_VARS']['EXTCONF']['image_jack']['templates']['myCustomTemplate'] = \Vendor\Extension\Templates\CustomTemplate::class;
Jack will automatically pick up and run the new template if it is available for the given image type.
A log is written to var/log/typo3_image_jack_*.log
The extension settings offer the possibility to decide how verbose the logging should be.
This extension was inspired by the webp extension from plan2net.
The development and the public-releases of this package is generously sponsored by our employer https://sitegeist.de.