How to Use Assetic for Image Optimization with Twig Functions
Edit this pageWarning: You are browsing the documentation for Symfony 2.4, which is no longer maintained.
Read the updated version of this page for Symfony 6.1 (the current stable version).
How to Use Assetic for Image Optimization with Twig Functions
Amongst its many filters, Assetic has four filters which can be used for on-the-fly image optimization. This allows you to get the benefits of smaller file sizes without having to use an image editor to process each image. The results are cached and can be dumped for production so there is no performance hit for your end users.
Using Jpegoptim
Jpegoptim is a utility for optimizing JPEG files. To use it with Assetic, add the following to the Assetic config:
- YAML
- XML
- PHP
1 2 3 4 5
# app/config/config.yml
assetic:
filters:
jpegoptim:
bin: path/to/jpegoptim
Note
Notice that to use jpegoptim, you must have it already installed on your
system. The bin
option points to the location of the compiled binary.
It can now be used from a template:
- Twig
- PHP
1 2 3 4
{% image '@AcmeFooBundle/Resources/public/images/example.jpg'
filter='jpegoptim' output='/images/example.jpg' %}
<img src="{{ asset_url }}" alt="Example"/>
{% endimage %}
Removing all EXIF Data
By default, running this filter only removes some of the meta information
stored in the file. Any EXIF data and comments are not removed, but you can
remove these by using the strip_all
option:
- YAML
- XML
- PHP
1 2 3 4 5 6
# app/config/config.yml
assetic:
filters:
jpegoptim:
bin: path/to/jpegoptim
strip_all: true
Lowering maximum Quality
The quality level of the JPEG is not affected by default. You can gain further file size reductions by setting the max quality setting lower than the current level of the images. This will of course be at the expense of image quality:
- YAML
- XML
- PHP
1 2 3 4 5 6
# app/config/config.yml
assetic:
filters:
jpegoptim:
bin: path/to/jpegoptim
max: 70
Shorter Syntax: Twig Function
If you're using Twig, it's possible to achieve all of this with a shorter syntax by enabling and using a special Twig function. Start by adding the following config:
- YAML
- XML
- PHP
1 2 3 4 5 6 7 8
# app/config/config.yml
assetic:
filters:
jpegoptim:
bin: path/to/jpegoptim
twig:
functions:
jpegoptim: ~
The Twig template can now be changed to the following:
1
<img src="{{ jpegoptim('@AcmeFooBundle/Resources/public/images/example.jpg') }}" alt="Example"/>
You can specify the output directory in the config in the following way:
- YAML
- XML
- PHP
1 2 3 4 5 6 7 8
# app/config/config.yml
assetic:
filters:
jpegoptim:
bin: path/to/jpegoptim
twig:
functions:
jpegoptim: { output: images/*.jpg }