This article is participating in the topic of “performance optimization actual combat record” essay activity

Images are an important part of websites or WEB applications. With the popularity of terminal devices and 5G, users have higher and higher requirements for images. In order to provide faster experience, images can be optimized.

As for whether the image should be optimized or not, you can use Cloudflare, an online tool, to test the effect of the website and give advice on how to optimize the website image.

How to experience speed

Everyone who has ever browsed a website has encountered one that loads slowly. Usually, this is due to improper image optimization on the page, such as the image is too large and so on.

Images on a page can take a long time to load, with pixels painfully filling from top to bottom; Or worse, they can lead to dramatic changes in page layout when the browser understands their size. These problems can be a very unfriendly experience for users.

Understandably, slow page loading can adversely affect a page’s “bounce rate,” the percentage of visitors who leave the page quickly. Especially in the e-commerce website, the image on the page are more, improper processing, high jump rate will directly affect the income. Therefore, it is important to optimize images on your web pages to reduce load and output from sources, improve your site’s performance in search engine rankings, and ultimately provide a great user experience.

Speed test

Since August 2021, Google has used Core Web Vitals to quantify page performance when considering ranking search results. The factors measured focus on performance in terms of loading speed, interactivity and visual stability:

Largest Contentful Paint (LCP) : Maximum content painting, measuring load performance. To provide a good user experience, try to complete the LCP within 2.5 seconds of the web page starting to load. First Input Delay (FID) : The First Input Delay measures interactivity. To provide a good user experience, try to keep the FID under 100 milliseconds. Cumulative Layout Shift (CLS) : The Cumulative Layout Shift measures visual stability. To provide a good user experience, try to keep the CLS score below 0.1.

CLS and LCP are two indicators that can be improved by image optimization. When CLS is high, it indicates that a lot of the page layout is moving at load time. LCP measures the time required to render a single largest image or block of text in the viewport.

These can be measured in real time using real user monitoring (RUM) analytics, such as Cloudflare’s Web analytics, or in a “lab environment” using Cloudflare’s image optimization testing tool.

How to Optimize speed

One of the most impactful performance improvements a website developer can make is to ensure that images are provided at the right size. Images taken by modern equipment have a relatively large resolution, resulting in very large. The problem with putting these images on a web page is that you can’t see them all quickly. And sometimes it is impossible to limit the resolution of the image used by the user. Usually, the resolution of the image can be reduced online through the program to reduce the size, and the image with different resolution can be configured for different terminals.

The media condition sizes with srcset and

When inserting an image on a web page, it is common to add the img tag and set the image path for SRC:

<img src="hello_world_12000.jpg" alt="Hello, world!" />
Copy the code

Starting in 2017, all major browsers support the more dynamic SRCSet attribute, which allows developers to set multiple image sources based on the matching media conditions of the visitor’s browser, i.e., configure images of different resolutions for different terminals:

<img
    srcset="
        hello_world_1500.jpg   1500w,
        hello_world_2000.jpg   2000w,
        hello_world_12000.jpg 12000w
    "
    sizes="(max-width: 1500px) 1500px,
            (max-width: 2000px) 2000px,
            12000px"
    src="hello_world_12000.jpg"
    alt="Hello, world!"
/>
Copy the code

The code above tells the browser that there are three changes to the image, each with a different inherent width: 1500px, 2000px, and the original 12000px, via the srcset property. The browser then evaluates the media conditions in the Sizes property ((max-width: 1500px) and (max-width: 2000px)) to select the appropriate image size from the SRcset property. If the browser width is less than 1500px, the image hello_world_1500.jpg will be loaded. If the browser width is between 1500px and 2000px, the image hello_world_2000.jpg will be loaded; Finally, if the browser width is greater than 2000px, the browser will load the original image hello_world_1200.jpg.

Image format

It used to be recommended JPEG, PNG, GIF, WebP, and now AVIF, the latest image format with broad industry support, which generally performs better than previous formats. AVIF supports transparency with alpha channels, animation support, and it is typically 50% less than JPEG (WebP only 30% less).

Image quality

Unlike their predecessor, JPEG, newer image formats (WebP and AVIF) support lossless compression. Lossless compression may be appropriate for some uses, but for most sites speed is a priority, and this slight loss of quality is worth the savings in time and bytes.

Optimizing the position of setting the quality is a balancing act: too aggressive, the image will appear artifacts; Too little, the image is unnecessarily large. Butteraugli and SSIM are examples of algorithms that approximate image quality awareness, but are currently difficult to automate and are best set manually. Overall, however, about 85% is found to be a reasonable default in most compression libraries.

Image tag

All previous techniques reduced the number of bytes used in the image. This is useful for improving the loading speed and maximum content rendering (LCP) metrics of these images. However, to improve the cumulative layout offset (CLS) metric, changes to the page layout must be minimized, which can be done by notifying the browser of the image size in advance.

On a poorly optimized web page, the image will load without a size in the tag. The browser retrieves these images and does not know the size of the image until it receives its header byte. The effect is that the browser first renders the page with the image occupying zero pixels, then suddenly redraws with the image’s dimensions before actually loading the image pixels themselves. This is very user unfriendly and has a serious impact on usability.

It is important to include the size of the image in the HTML tag so that the browser can allocate space for the image before it even starts loading. This prevents unnecessary redrawing and reduces layout offsets. You can even set the dimensions when loading a responsive image dynamically: by telling the browser the height and width of the original image, assuming the aspect ratio is constant, it will automatically calculate the correct height even with the width selector.

<img height="9000"
     width="12000"
     srcset="hello_world_1500.jpg 1500w,
             hello_world_2000.jpg 2000w,
             hello_world_12000.jpg 12000w"
     sizes="(max-width: 1500px) 1500px,
            (max-width: 2000px) 2000px,
            12000px"
     src="hello_world_12000.jpg"
     alt="Hello, world!" />
Copy the code

Loading =”lazy” :

<img loading="lazy"   />
Copy the code

The CDN to accelerate

The most direct way is to use CDN acceleration to speed up image loading through caching and multi-line.

conclusion

Image performance optimization is necessary for websites that use a lot of images. Cloudflare’s image optimization testing tool, WebPageTest and Lighthouse can be used to comprehensively test the key indicators of a website.