Image optimizations in eZ Platform and Symfony: JPEG quality and stripping image metadata

Your eZ site might be serving megabytes of unnecessary image data on every page load. Do your users and your SEO rankings a favour: strip image metadata and set a reasonable image quality setting for your image aliases!

GTmetrix and Google PageSpeed Insights are 2 of the best front-end web performance analyzers around, and one of their top recommendations is always to decrease your image file sizes. This is easy to do:

Remove Exif metadata

Exif metadata is added to JPEG images by digital cameras, stock image sites, and image editing programs. The metadata contains author and copyright information, camera information, keywords, image effects applied, and more. You can inspect this information by opening an image in Photoshop and accessing "File > File Info" or by simply opening an image in a text editor. Your users likely don't need the metadata, and it can add a significant amount of unnecessary bloat to image file sizes.

In some cases, the metadata can take up 10KB; in one of the extreme cases we've seen, it took up 145KB out of 167KB in an image. That's ~87% just for metadata that your users are never going to see or care about!

Removing Exif metadata does not alter the image itself at all.

In eZ, the "strip" filter can be applied per image alias. In eZ Platform, this is set in app/config/ezplatform.yml; in eZ Publish 5.x, modify ezpublish/config/ezpublish.yml.

# In eZ Publish 5.x, this setting group is "ezpublish" instead of "ezplatform"
ezplatform:
    system:
        frontend_group:
            image_variations:
                news_block_wide:
                    reference: ~
                    filters:
                        - { name: thumbnailgravity/center, params: [722, 281] }
                        - { name: strip }

If you're using an eZ Publish Legacy site, you can apply the "strip" parameter to every image alias in an override of image.ini.append.php:

[ImageMagick]
PreParameters=-strip

JPEG image quality

For reference, in eZ Publish Legacy, the JPEG image quality is set in the [MIMETypeSettings]Quality setting in image.ini. By default, eZ Platform preserves 100% image quality for its image aliases. The image quality setting can be lowered on most sites to greatly improve page load speed without hurting the user experience.

You can experiment with the JPEG image quality setting, but we've found that the previous default of 75% is a good start. This setting has to be applied per image alias, currently in a separate configuration block from the image aliases themselves. This is in app/config/config.yml in eZ Platform and ezpublish/config/config.yml in eZ Publish 5.x.

liip_imagine:
    driver: imagick
    filter_sets:
        news_block_wide:
            jpeg_quality: 75

After you've modified your metadata and quality settings, be sure to purge existing image alias files.

The Imagine Bundle (which eZ uses for its image aliases) will hopefully support a default setting for both the image quality and stripping image metadata soon. (It might be a useful addition on the eZ side as well.) You can also consider using an additional processor such as jpegoptim. With newer versions of the Imagine bundle, the mozjpeg and pngquant post-processors are recommended.

If you're interested in more front-end optimization tips on your eZ Publish or eZ Platform site, this 2010 presentation from Damien Pobel is still very relevant -- the technical tips just need some updates for their eZ Platform equivalents.