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

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.


Related Blog Posts

Simple, automated cache busting JavaScript and CSS in Symfony with eZ Platform and eZ Publish 5.x

In eZ Publish 5.x and eZ Platform, we use Assetic to manage a website's JavaScript and CSS. By default, if you make a change to your JS or CSS files,...

Read more »

Image aliases and filters in eZ Publish 5.4+

As of eZ Publish 5.4 / 2014.11, there is a new way to define custom image filters and image aliases. This is because image alias generation is now using...

Read more »

Mugo Image Server for eZ Publish: a scalable, flexible solution

In order to increase the image serving performance of high-traffic websites and improve the editorial user interface around image management, Mugo Web...

Read more »

Applying borders to eZ Publish images using ImageMagick

One of our clients recently needed to apply a custom frame / border to all images in a certain section of an eZ Publish site. One way to do this is to...

Read more »

Exact image resizing in eZ Publish with custom image filters

eZ Publish comes with a useful set of image settings, and has a powerful framework within which you can define custom filters to be executed by the image...

Read more »

Comments

blog comments powered by Disqus

Hi, we're Mugo Web - Nice to meet you!

We're a group of web experts who solve complex web problems.

Learn more about us »

Search


Categories


Yes - we can do that.

Many years of experience with complex websites allows us to offer total solutions.

Learn more about what we can do »

We love our clients (and they love us too)

We've solved problems across North America and around the world.

Learn more about what we've done »

We tweet too

Follow us on Twitter for the latest Mugo happenings

mugo twitter page @mugo

© 2008 - 2017 Mugo Web. All rights reserved.