By ShimmerCat on 6/22/21 2:14 PM

    Smart image optimization with ShimmerCat

    One of the most common reason for slow websites is unoptimized image sizes. Not only does this annoy your site visitors, but also negatively affects your search engine rankings. But there’s a silver lining, in almost all cases the page size and thus the loading time can be halved just by compressing the images.

    Pictures take up a lot of space on websites, and they would take a long time to load if a visitor, for instance, has a slow mobile connection. Therefore, it is important that you compress your images so that they take up as little space as possible and load quickly. You can easily compress formats such as JPG/JPEG/PNG by more than 70% without degrading the image quality. For example, if you have an image of size 1 Mb, it can be compressed so that it only takes about 0.1 Mb. Since you probably have ten product images or more on your product pages, image optimization for all of them can therefore have a significant effect on loading time.

    Here a question arises, what about the image quality when it is compressed? It is possible to compress images so that they take up almost no space at all, but then we may end up with an image where it is impossible to identify what it represents.

    Thus, the biggest challenge with effective image optimization is finding a balance between quality and compression - and this is exactly what ShimmerCat focuses on. With an automated solution based on Artificial Intelligence developed by researchers, you get the market's most intelligent image optimization that is self-sufficient.

    Image optimization is not only compression but also quality

    As we established earlier, the primary goal of image optimization is to find a balance between the lowest file size possible and an acceptable image quality.

    To reduce the file size, compression with data loss (so-called lossy compression) is used where information in the image is deleted. If this can be done in a smart way, for example by using regularities in the image that the human eye cannot detect, it is possible to also find results with acceptable quality in the image.

    The two primary things to keep in mind when optimizing an image are the file format and the type of compression used. By choosing the right combination, image optimization can give us great results.

    If you want to read more about image compression, you can, for example, look at the blog post image compression and next-gen image formats.

    Optimized 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 will begin to fulfill this requirement, and probably also give a boost to your website's ranking.

    pagespeed

    What is the next-gen format?

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

    WebP is an image format that Google has developed with superb compression capabilities. They promise 25-35% smaller image files than JPEG and 26% smaller than PNG. There is also support for 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 by Alliance for Open Media. AVIF is a competitor to not only JPEG but also next-gen formats such as 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 the file size) is better.

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

    Not really, but a small downside 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 optimize for next-gen format?

    ShimmerCat uses image quality as a starting point when optimizing original images to next-gen format. When ShimmerCat optimizes an image, several settings are tested for each image format and an independent quality measure is used to select the copy of the image to be delivered.

    This means that ShimmerCat can decide 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 measure and determines if an image is "good enough" is a neural network that is trained specifically on product images from e-retailers, so it is very well adapted to find optimal conditions to maintain quality and at the same time compress file size.

    Delivery of the smallest image among several image formats

    Note that ShimmerCat delivers the smallest image among several image formats that the browser supports and that are 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 use the content of the HTTP header "Accept:" to maximize the handling of image delivery. All browsers use that header, and the logic in ShimmerCat works according to:

    • ShimmerCat analyzes the "Accept" header and adds image formats that are universally supported by all browsers, such as PNG, GIF, JPEG and BMP.
    • From the formats supported for the specific HTTP client (browser), the smallest image is selected from those produced, and it is 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 are located as an extra layer on top of the origin server and both relieve and help deliver content from the website to visitors.

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

    Avoid uploading a heavily compressed image

    When optimizing, ShimmerCat uses a quality measure 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 "peeled off". 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-custom optimization on the non-compressed original.

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

    See the effect of image optimization with Abicart Chrome Extension

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

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

    Untitled design-1

    Image example

    As an example, we took a picture from Abicart's website abicart.com and did a simple optimization, see below.

    Screenshot 2021-06-08 at 00.01.28

    Without degrading the quality, the image size is reduced by over 40%. The result can be seen here

    Read more:

    Headings: Marketing, Tips