Web apps – all the things you don’t have to do on your own. Part 3: Image optimization

old pc

With valuable input from Felix Hassert and Roland Guelle.

→ Read Part 1 of the series: Non-functional requirements

→ Read Part 2 of the series: Performance

Images take most of the bandwidth on modern web pages, so it makes the most sense to minimize size (meaning both weight in kilobytes and resolution as well) to fit the target device. 

Most of the images are compressed using algorithms that reduce image quality. But adding additional compression to the already compressed image may result in visible artifacts. So the key question here is how to find the right balance between image size and image quality. There are new compression algorithms and image formats that are helpful to reduce image size by tens of a percent without any noticeable image degradation.

There are GIFs, PNGs, and JPEGs, but also WebP, HEIF (HEIC), FLIF, BGP and others with various degrees of compatibility, but all delivering on the promise of smaller images with the same image quality (as viewed by humans). 

The optimal compression ratio depends on each particular image; how visible the artifacts will be and what was the initial compression level. We cannot just apply a single compression level parameter to the whole page or use a percentage of size reduction as a guide here.

Is it a too heavily compressed image (albeit much smaller), or maybe is it still good enough?

Can it be determined automatically? Fortunately, yes. There are algorithms to compare images before and after compression to measure error visibility and determine structural similarity. For instance, people are less susceptible to chroma errors (color displacement) and more to blocky artifacts (blockiness), but also to artifacts in luminance change, especially on blue gradients of the skies, however much less in the case of trees and foliage. People are also very sensitive to faces and artifacts that are visible there.Image compressionOriginal imageOriginal image lamp

How wao.io is doing this?

A website in its entirety has a lot of different images. Every single one of them can be compressed to a certain degree until it looks bad. Choosing a single compression ratio for the whole site means either hurting a lot of images or wasting a lot of space. Usually it means both. The worst part is that you can’t control which image falls into which bucket.

Wao.io uses advanced and unique image quality assessment techniques to calculate the optimal compression force for every single image. This maximizes the bytes saved, while never visibly hurting the image quality. Wao.io also detects images that are already well compressed and delivers them quickly without any changes. One of the most difficult tasks of optimizing is to decide when not to optimize.

Converting images to so-called next generation formats such as WebP may not sound hard. But (fortunately) there is more than Web Browser out there. The web server has to take care that only supported image formats are served to the browser. Internet explorer doesn’t support WebP, neither do older Firefox versions.

Wao.io handles the format picking for you. So you don’t have to change all your HTMLs to use the “responsive” picture element.Wao

Ultimate optimization – do not load images until necessary

The technique called lazy loading means to load images as late as possible. Even optimized images are still slowing down the page, so they can be loaded as late as possible unless they have to be seen by the end user.

How wao.io is helping with image optimization?

Wao.io analyzes which images are in the initial viewport of a website. That way, we can ensure that we only delay, respectively lazy load, those images that are really not necessary. This allows us to let the necessary script to be loaded asynchronously, truly minimizing the render blocking impact, not only of the images, but also of the optimization itself.

Additionally, wao.io lazy loading analyzes the scroll behavior of the user on the currently displayed document. If the scroll speed exceeds a certain threshold, wao.io does not load images that would scroll through the viewport that fast, because it would be impossible for a visitor to actually look at them.

Wao.io also offers different styles of placeholders, from transparent pixels, over blurry preview images, to custom colored or automatically colored (calculating a single color representative to the image) spaces. Wao.io creates placeholder images with the dimensions of the original image. It allows the browser to render the HTML page in its final layout without any “reflows” when the original images are loaded. That way a “jumping” layout can be avoided and the CPU necessary for rendering the page is lowered.

→ Read how to create modern user experiences with Couper.io 

The next article will address other optimization problems such as client side optimization, CDN compatibility and HTTP2.

Back to overview