fbpx

With ImageEngine, you can now customize how a given image, or set of images, is 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.

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 even a lossless format.

Control Use of Next-Gen Image Formats

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 shares 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.

3 happy people on bright backgrounds looking at their phones; text reads: " The 6 Steps to Image Optimization - Read Our Blog"

Struggling to get your SEO just right? Start with your image optimization, and start with our blog!

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 image 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.

Screenshot of ImageEngine Account Settings

You should give the set a descriptive name as this is displayed in the settings list when it is 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.

Screenshot Showing ImageEngine Pixels Settings

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, as 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.

More articles you may be interested in.


>