Web Accelerator (WA) – Image Optimization

Here you’ll learn how you can use WA to increase both the real and the perceived performance of your website. At this point we assume that you already have integrated your website, or our test site, with FIT as outlined before.

If you haven’t integrated your own website, you can follow through on our test website, http://example-backend.sevenval.com, which is shown below, on wide (desktop), and narrow (mobile) viewports:

Image Optimization

Images are generally the largest contributor to page weight. Image optimization therefore can often yield significant payload savings which drastically improves performance: Fewer bytes have to be transferred and the rendering is faster. Moreover, sending large, unoptimized images to mobile devices can impact battery life too.

In the following tutorial we will show you how our Image Optimization features

work. Have a look at the summary at the end to see how the performance of our web page has improved.

Image Scaling

The image-scaling option in your conf/config.xml enables scaling of images according to the client’s display dimensions.

To provide browsers with optimal content, you should also enable the JavaScript client feature detection (detection-page); this will provide WA with information about what features are supported by the client:

<config>
  <ress>
    <image-scaling viewport-fitting="current" />
    <detection-page title="FIT14 Detection Page"/>
  </ress>
</config>

Using Chrome dev tools, we can immediately see the effect this has when we reload our optimized web page (http://local14.sevenval-fit.com). Note that in the original page, the background image is a 1274x1274 pixel JPEG. When we use a smaller viewport, the image is scaled down to 480x480 pixels, and (in Chrome) it now uses the more efficient WebP format. The background image size has been reduced from 605KB to just 20.1KB!

A full list of image scaling parameters can be found on the image scaling documentation page.

Image Compression

As well as scaling images, Web Accelerator also provides separate options for image compression. Global image compression can be enabled in your application using the image-compression element in your config.xml file:

<config>
  <acceleration>
    <image-compression quality="70" />
  </acceleration>
</config>

Quality

The optional quality parameter allows you to set the global compression level. The default compression value is 70. A value of -1 indicates lossless compression for PNG images, and maximum quality for JPEGs.

Note that the quality value specified here will override any value specified in the image scaling configuration.

If we reload our optimized site with the config above, we can see there is little discernible change to the images, but the file size difference is significant: the background image size has been reduced from 605KB to 123KB.

We can push these savings further using a lower quality value. The image below shows the image with quality 10. The file size has been reduced to 34.8KB, but compression artifacts are now visible in image when displayed at full size. File size will obviously vary with quality: a lower quality value results in lower file size, so there is a trade-off here. The default of 70 is often a good option!

Highly compressed image

More details are available on the Image Compression documentation page.

Image Formats

WA Web Accelerator supports many different image formats, and it will convert your images to the best supported format for any device or browser. The formats supported by WA include JPEG, PNG, WebP, GIF, SVG. Read more about supported formats in the WA image format documentation.

The WebP format is on average between 25%-34% smaller for the same JPEG image. Therefore it is preferred where it is supported.

We can see this in action below, where a Chrome client receives WebP images, while Firefox receives JPEGs since WebP is not supported. Web Accelerator knows which image format is the best for which browser, and will make this decision automatically for you, so that your visitors will always receive the optimal image format for their browser.

Firefox developer tools shows JPEGs:

Firefox dev tools network panel

While Chrome developer tools shows WebP images:

Chrome dev tools network panel

JPEG Chroma Subsampling

Chroma subsampling is a feature of JPEG image compression based on the fact that humans are better at detecting variations in luminance (lighting) than in color. Thus, color information in images can be compressed without causing any detectable degradation in image quality.

Web Accelerator automatically performs chroma subsampling on JPEG images to produce smaller image files.

PNG Quantization

Another optimization WA performs is quantization of PNG images. WA will automatically reduce 24-bit truecolor PNG images to 8-bit PNG images to reduce PNG image file size.

Image Compression Parameters

Image compression can also be controlled more precisely on a per-image basis using the ai-compress attribute:

<img alt="compress-me" src="image.jpg" />
<img alt="no-compress-me" ai-compress="false" src="image.png" />

Delayed Images

One further optimization WA can perform is image delaying (also known as lazy loading). By removing image source URLs from image elements, the load event is triggered earlier, and the web page becomes responsive more quickly.

This feature is enabled by adding the <image-delaying /> element to the config.xml file:

<config>
  <acceleration>
    <image-delaying prioritization="visibility" />
  </acceleration>
</config>

Note the optional prioritization="visibility" parameter. With this option, all images will be loaded when they enter the viewport. You may also specify that images should be loaded when they are within a certain pixel distance of the viewport. This makes it more likely that an image will already be loaded by the time it actually enters the viewport. The visibility-offset-x and visibility-offset-y attributes can be used to specify the desired pixel distances.

In the image below, we can see that only the two visible images from the Cologne in pictures section of the web page have been loaded (01.jpg.webp and 02.jpg.webp), and the ones that are not visible have not yet been loaded (03.jpg.webp to 06.jpg.web). If you scroll down the page, and keep an eye on the network requests, you should be able to see the images being fetched as they scroll into the viewport.

Network panel of Chrome dev tools showing delayed image loading

Prioritization can also be based on a simple ordering by providing an integer value for the ai-priority attribute of an image element in the HTML document e.g.

  <img src="logo.png" ai-priority="1">
  <img src="image.jpg" ai-priority="3">

The value must be in the range 0-3, where 3 is the highest priority. So in the example above, the second image, image.jpg, will be loaded before the first one.

Note: setting a prioritization value of visibility in the config file will override any numeric ai-priority value in the HTML document.

See the Delayed Images documentation for more detail about priorities and how the original markup is manipulated to facilitate image delaying.

Image Optimization Summary

Now that we’ve seen some of the image optimizations that WA can carry out, let’s see how the performance of our web page has improved. In the table below we can see that the page size has been reduced drastically, from 1319KB to just 211KB, and the number of requests has dropped from 24 to 20. Later in the tutorial we’ll show how WA can help to reduce the number of page requests even further.

Requests Page size KB PageSpeed Insights (mobile) PageSpeed Insights (desktop)
Before Image Optimization 24 1319 45 49
After Image Optimization 20 211 80 83

Our PageSpeed Insights scores have improved for both mobile and desktop tests, with the desktop version now scoring 83, up from 49, and after all these optimizations, PageSpeed Insights cannot find anything to complain about with our images!

The configuration file config.xml that was used to achieve this is listed below:

<config>
  <ress>
    <image-scaling viewport-fitting="current" />
    <detection-page title="FIT14 Detection Page"/>
  </ress>
  <acceleration>
    <image-compression />
    <image-delaying prioritization="visibility" />
  </acceleration>
</config>

So that completes our quick tour of WA’s image optimization capabilities. In the next part of the tutorial we’ll take a look at some of the ways that WA can optimize content to further improve the performance of our web pages.