Image Optimization

When referencing an optimized image, you may need to make changes to the HTML on your website and/or the way images are displayed in native apps.

If you have an img tag like this:

<img src="//example.com/img/car.jpg">

and the ImageEngine delivery address is images.example.com, the image tags may be updated to look like this:

<img src="//images.example.com/img/car.jpg">

The path is relative to the path the image has at the origin for images.example.com as defined in the settings for the origin.

The examples above demonstrate the fully automated optimization (auto-mode). In most cases, this is the recommended way to use ImageEngine.

Read more about best practices using ImageEngine here.

The automatic optimization process is quite complex and uses WURFL, client hints, and other available information to determine the optimal size, resolution, compression, and format. Auto-mode works well for desktop devices, and even better for mobile devices, due to the diversity of sizes, resolutions, and capabilities.

Whenever the ImageEngine CDN receives a request for an image, the request is carefully analyzed by the powerful edge servers.

The information the edge servers are able to extract from the requesting device and browser includes:

• The physical screen size on the device
• Resolution of the screen
• Type of device
• Viewport size
• Device pixel ratio
• Supported and most efficient image formats

Additionally, ImageEngine consider network quality.

ImageEngine is likely to produce several versions of any origin image based on the variance of device capabilities, each with different size, format, and/or compression rates. Thanks to the unique edge servers that ImageEngine employs, the edge cache remains fast even if several versions exist.

Device intelligence in action

In auto-mode (no directives applied), the most notable optimizations done to an image are format conversion, change in pixel size, and compression rate. ImageEngine in auto-mode will make sure that your customers get the highest quality image with the lowest possible byte size.

Format conversion

Thanks to ImageEngine’s built-in device detection, the most efficient format for a given image is automatically chosen. The input needed to make this decision comes from WURFL device detection, manual verification, and an advanced ruleset, in addition to the `accept` request header.

For example, ImageEngine can accurately identify devices and browsers that support the AVIF format. This means ImageEngine can confidently convert from JPEG to AVIF, deliver huge savings in terms of byte size, and dramatically improve the web browsing experience.

Resizing

On the web today, where the majority of traffic comes from mobile devices, one size is not enough to offer a great user experience. Again, the built-in device detection knows the size of the screen - both in pixels and millimeters - and is able to resize the image to perfectly fit the viewport. This is further enhanced by ImageEngine’s support for Client Hints. It can also handle high-resolution displays, like Retina, out of the box and will scale the image at the actual pixel size needed to produce high-quality images.

Metadata

Embedded metadata, such as EXIF, is removed as a part of the optimization process (except any copyright information) . If you want to keep the metadata in the optimized image, use the meta_true directive. Copyright data is always kept in the image.

ICC profiles are maintained when input and output format is jpeg. When the output format is different from jpeg, the color profile is translated to actual colors in the output format. Colors may change slightly if the image is converted between formats. If it is important for the optimized image to exactly match the colors of the origin image (rare cases), the origin image should be a jpeg and you should specify the format with the f_jpeg directive. That said, in most cases, color shifting is not an issue.

Compression

Depending on the physical screen size and the resolution of the screen, different amounts and types of compression can be applied without compromising the visual quality of the image.

Furthermore, if Client Hints give indications that additional data should be saved, ImageEngine automatically applies more compression. This will automatically happen for example if the Data Saver feature in Chrome is enabled, or the Save-Data client hint is set on the request in other ways.

Any network quality information is also considered when compressing images. A slow connection will receive higher compression than a fast connection.

Device Detection

The truly unique feature of ImageEngine is how Device Detection is built in as a core feature. The leading device detection library WURFL is built into ImageEngine.

The built-in Device Detection capabilities make ImageEngine much more efficient than any similar image CDN. Depending on the traffic mix, the advantage of ImageEngine may vary, but on an “average website” where mobile- and social media apps traffic account for 60-70% of traffic, and the rest desktop, the savings due to device detection are significant.

Device Detection by WURFL, helps ImageEngine outperform alternative solutions by 42%

Client Hints

Client Hints enable the browser to send more detailed information about what size the image should be, relative to the viewport (browser) size.

Client hints are only supported by Blink-based browsers.

Using client hints and ImageEngine with responsive images will resize the image accordingly. Note that ImageEngine will not always return the exact pixel size as requested. ImageEngine may resize images in "buckets" or steps of 100px each by rounding the size up to the closest 100.

The plugins for WordPress, Shopware and Magento implements client hints automatically. However, it is also relatively easy to implement manually on any website or app.

The Save-Data client hint is also supported. This client hint does not require opt-in as it is enabled by the end user. In cases where Save-Data: ?1 is present in the request, ImageEngine will apply additional compression to the image to further reduce the byte size.

Also the `ect` client hint will affect the compression level of images.

Image Quality

ImageEngine is made for performance. Its purpose is to reduce the file size of a given image and at the same time make sure there is no visual degradation visible to the human eye.

ImageEngine in auto mode, will always serve the lowest file size with the best possible visual quality.

ImageEngine decides what good enough visual quality of the optimized images by calculating the structural similarity index or SSIM. There are many tools that implement SSIM. One of them is the DSSIM tool.

By default, ImageEngine automatically calibrates its optimization based on the requesting device, so the resulting DSSIM scores will vary. The average DSSIM score for ImageEngine’s optimized images was 0.00488, and the median was 0.00427.

Below is a comparison of the optimization factor by ImageEngine and the DSSIM score.

We might expect that higher optimization might lead to higher DSSIM (i.e. lower quality). If this were true, then we would see a correlation close to 1 ( i.e. a northeast diagonal trend-line). Instead, we see a weak inverse correlation (an almost flat trend-line that has a slightly negative slope of -0.12).

This means the optimization factor automatically selected by ImageEngine does not negatively impact DSSIM and image quality. Therefore, it’s safe to say that there is no decay in visual quality when optimizing images with ImageEngine.

In rare cases, it may be necessary to adjust quality manually. This can be done using the cmpr_ directive or by overriding the default setting in the control panel.

Artificial Intelligence and Machine Learning

The process where ImageEngine evaluates the wide array of parameters that may produce a lower byte size and better visual quality is constantly changing. This process is too complex to implement in static software.

At a high level ImageEngine utilizes Artificial Intelligence and Machine Learning to map out which optimization algorithms produce the best results under various circumstances by analyzing billions of images, contexts, devices, browsers, and network characteristics.

When ImageEngine is optimizing an image in real-time, ImageEngine will use the knowledge base to select the best optimization strategy.