Fine Tune Image Delivery

Monday, August 19, 2019

Quality icon

With ImageEngine, you can now customize how a given image, or set of images, are optimized. If you’ve logged into your account lately, you’ve noticed the settings button next to your registered domain names. Clicking this will give you the opportunity to configure settings for image requests matching a pattern.

Start a free 30 day ImageEngine trial

Use our demo tool to see how ImageEngine will improve your own website’s image web performance.
Learn more about ImageEngine here.

Why Do You Need Customized Settings?

We usually advise our customers not to override the optimization decisions ImageEngine is making automatically. However, there are many valid reasons why you may want to adjust the default behavior of ImageEngine. We offer several methods. For a long time, URL directives were the recommended solution But now, you can use the “Settings” in your account’s control panel to do the same adjustments (and more) without changing the markup.

Higher Image Quality On Detailed Product Images

Many eCommerce sites offer a product detail view where users can zoom in and see close-up details of the product. To ensure image quality when zoomed in, you can configure ImageEngine settings to serve bigger images with less compression, and maybe even a lossless format

Control Use of Next-Gen Image Formats

Even if this is not something we recommend, next generation formats such as WebP, JPEG 2000 (JP2) or JPEG XR, may cause problems for some apps or programs to display. For example if a Chrome user downloads and share a webp image to a Mac user by email, the Mac user will not be able to see the image. You can now configure ImageEngine to stick with well known formats.

Pass Though Original Image

In certain cases, the user may want to download the original image untouched by ImageEngine. For example, the image may be a wallpaper or a map, or it may contain metadata which is of value to the end user. In these cases, you can make a rule saying that all requests for “full size” images, must be passed through from the origin.

Control Images Delivered To High-PPI Screens

It is quite common today to see mobile devices having a larger image payload (in terms of bytes size) when compared to a desktop device accessing the same page. One major driver for this is high PPI screens on mobile devices. ImageEngine (as well as responsive images techniques) consider the physical pixels of the screen by default when resizing images. In some cases, this may lead to heavier images than necessary on mobile devices. To address situations like this, the settings now allows overriding the maximum pixel size as well as choosing between physical pixel resolution of the screen versus viewport size (CSS pixels) as the basis for resize operations.

How to Create a New Setting

The above scenarios are just some of the use cases a website owner may discover they need. There are many more settings available in the dashboard, and these can be combined in many ways.

A domain name can have many “sets of settings” attached. New sets are created by clicking the Settings button next to the domain and then the “Add setting” button.

ImageEngine Account Settings

You should give the set a descriptive name as this is displayed in the settings list when it’s saved. The settings that you create will be applied to a specific URL path in the image request. You can apply the settings to all requests by typing “/**/*” in the “Apply settings to path” text box. Here you can use an expressional language. Click the information icon for a detailed explanation. If you want to test the expression on real URLs, you can do so by clicking the “Validate Path” button.

Next, clicking the “Custom” button under each setting will allow you to customize the behavior.
ImageEngine Settings Pixels
The above example shows a configuration where the maximum image width measured in physical pixels is 2560px if no other information about ideal size is found. Then, support for high PPI screens is disabled before the compression is reduced to increase the visual quality of the image.

More settings can be applied to the path and set, but it is recommended to create more sets of settings for the same path as that would be easier to maintain.

Every setting type has a thorough description to explain the impact of changes to the defaults. It is recommended to test the settings on a test or staging domain before applying to production.

Business As Usual

We always recommend that ImageEngine optimization algorithms decide how to optimize the image. This is still true. However, like explained above, there might be good reasons to override the defaults in certain cases. The settings explained here, are alternatives to URL directives. Unless your site has a case where it makes sense to tune and override the automatic image optimization algorithms, no action is required.