Intelligent image optimisation with ShimmerCat - Textalk Abicart

Compressed images - faster webshop Large images are the most common reason why websites load slowly. Not only does this annoy visitors - it negatively affects your ranking in search results. In many cases, page size and loading time can be cut in half just by compressing images. Images take up a lot of space on websites and they can take a long time to download if a visitor has a slow mobile connection, for example. It is therefore important to compress your images so that they take up as little space as possible. You can often compress formats such as .jpg and .png by more than 70% without compromising image quality. For example, if you have a 1 MB image, it can be compressed to take up only 0.1 MB. As you probably have ten or more product images on your product pages, image optimisation can therefore have a significant effect on loading time. At the same time, image compression is also about quality. It is always possible to compress images so that they take up almost no space at all, but on the other hand it may be impossible to see what the image represents. The great challenge of effective image optimisation is to find a harmony between quality and compression - and this is precisely what ShimmerCat focuses on. With an automated solution based on AI developed by researchers, you can get the most intelligent image optimization on the market that takes care of itself!

Image optimisation is not only compression but also quality

The primary goal of image optimisation is to find a balance between minimum file size and acceptable image quality.

To reduce file size, lossy compression is used to remove information from the image. If this can be done in an intelligent way, for example by using regularities in the image that the human eye cannot detect, it is possible to find results with acceptable image quality as well.

The two primary things to consider in image optimization are the file format and the type of compression used. By choosing the right combination of file format and compression type, image optimization can have great effects.

For example, if you want to learn more about image compression, check out the blog post Image compression and next-gen image formats.

Optimised images and Google PageSpeed Insight

A common recommendation in Google PageSpeed Insights is "Serve images in next-gen formats". With ShimmerCat's image optimization, you'll start to meet this, and the effect on your website's rankings is usually very positive.

What are next-gen formats?

Next-gen image formats are modern file formats such as WebP and AVIF that offer better and more efficient compression for images compared to the traditional JPEG and PNG formats.

WebP is an image format developed by Google with really good compression capabilities. They promise 25-35% smaller image files than JPEG and 26% smaller than PNG. It also supports compression, transparent backgrounds and animation. Therefore, it can be seen as a good alternative to both JPEG, PNG and GIF.

AVIF (AV1 Image File) is a new image format developed Alliance for Open Media. AVIF is a competitor to not only JPEG but also next-gen formats like JPEG 2000 and JPEG XL, as well as Google's WebP. The goal is to offer AVIF as a better alternative with higher image quality while the compression (which reduces file size) is better.

Are there any drawbacks to the new next-gen formats?

Not at all, but one small drawback to using WebP today is that Safari still does not support the format.

However, Apple has officially announced that support has been added to Safari 14 on macOS Big Sur as well as iOS and iPadOS, read more here.

How does ShimmerCat optimise for next-gen formats?

ShimmerCat uses image quality as the starting point when optimising original images for next-gen formats. When ShimmerCat optimizes an image, it tests several different settings for each image format and then uses an independent quality metric to select the copy of the image to be delivered.

This means that ShimmerCat can determine for each individual image whether it should be delivered as WebP, AVIF or optimized JPEG. Since all formats have undergone quality checks, ShimmerCat can select the image format that the browser can accept that has the smallest file size.

The function that includes the quality metric and determines if an image is "good enough" is a neural network trained specifically on product images from e-merchants, so it is very well adapted to finding optimal conditions to maintain quality while compressing file size.

Delivering the smallest image among several image formats

Note that ShimmerCat delivers the smallest image among several image formats that the browser supports and that have been enabled for the domain. Example:
If an image is optimized with ShimmerCat so that the Webp version is 48 kilobytes, the AVIF version is 22.3 kilobytes, and the optimized JPEG version is 30 kilobytes,

then the optimized JPEG version of the image will be delivered to all browsers that do not yet support AVIF.

Because ShimmerCat's image optimization is unique in that it includes a custom web server, it has been adapted to make use of the contents of the "Accept:" HTTP header to maximize the handling of image delivery. All browsers use that header and the logic of ShimmerCat works as follows:

ShimmerCat parses the "Accept" header and adds image formats that are universally supported by all browsers, such as PNG, GIF, JPEG and BMP.
From the supported formats for the specific HTTP client (browser), the smallest image is selected from those produced, and sent to the visitor

So regardless of the browser, a valid image is delivered that the browser can display. Without the need for javascript or query parameters.

Image CDN for faster delivery of images

CDN stands for Content Delivery Network and can be explained as a network of servers to enable faster delivery of content. These servers sit as an additional layer on top of the origin server and both offload and help deliver content from the web page to visitors.

Because the servers are located close to the visitors ("on the edge"), they are often referred to as edge servers. ShimmerCat's image optimization includes a CDN with edge servers to cache optimized images in order to deliver the images faster to visitors.

Avoid uploading a heavily compressed image

When optimizing, ShimmerCat uses a quality metric that compares the optimized and compressed image with the original image to find the smallest image that also provides the highest quality.

If the original image is already compressed, it means that valuable information in the image has already been "scaled down". It also means that it is difficult to compress the image further. In such cases, it is better to avoid uploading a compressed image and instead let ShimmerCat perform a quality-adapted optimization on the uncompressed original.

For best effect when using ShimmerCat, it is therefore recommended not to upload a highly compressed image as the original image .

See the effect of image optimization with the Abicart Chrome Extension

To view the optimization effects, it is possible to use a dedicated Chrome extension that displays statistics on the web page about the image optimization.

More specifically, it allows the user to see which images have been optimized, in which formats and how much they have been compressed. You can find the extension here.

Sample
As an example, we took an image from Abicart's website abicart.se and did a simple optimization, see below. Without compromising quality, the image size is reduced by over 40%. The result can be seen here.