There are many front-end image loading optimization techniques, such as lazy loading/preloading, SRCSet attribute and picture tag on IMG, new image encoding format and Client Hints, etc.

Client Hints

As the name suggests, client hints refer to a way to select resources based on client information. As it is used for image loading, client hints usually refer to image width, Device Pixel Ratio (DPR) and viewport width. The basic principle is to add relevant headers to the HTTP transmission so that the server can select an appropriate image to return to the client.

How to use

To use Client Hints, add a meta tag with the following content:

<meta http-equiv="Accept-CH" content="DPR, Viewport-Width">
Copy the code

Then, when the browser requests an image from the server, it adds two additional headers:

DPR: 2
Viewport-Width: 535
Copy the code

Therefore, the client’s pixel density is 2, the width of the Viewport is 535 pixels, so that the server can sent by the client information to different images, these images can be either already stored images of different resolution, can instantly transform for image size, depending on the trade-off between computation and storage.

compatibility

Cient Hints isn’t new, but it’s moderately compatible and can be used as a way to build incremental user experience. Here is its browser compatibility:

As you can see, with the exception of Chrome and Opera and the new Edge, it’s all gone, so few people have seen it and even fewer have used it. Here’s a more common approach.

Responsive images

If Client Hints does this on the server, Responsive Images does this on the browser. Generally speaking, the tags and attributes that make up Responsive images include SRCSET on the IMG tag, SIZES attribute, and picture and Source tag.

How to use

About SRcset and Sizes

The best way to understand both is to use a simple example, from MDN:

<img srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"
     sizes="(max-width: 600px) 480px, 800px"
     src="elva-fairy-800w.jpg"
     alt="Elva dressed as a fairy">
Copy the code

First of all, sizes determines what is called a slot, which as the name implies, how much space is left for the image. If I put the image in a container of 800px and need to fill the container, I should write sizes=”800px”. Also, sizes supports using media queries to identify different slots. When the viewPort width is greater than 600px, the slot width is 800px, otherwise it is 480px. When no image matches the slot width, the browser selects the first image that is wider than the slot width.

Second, the srCset determines the image source that can be used, as shown above, which means that the browser can automatically choose between images 480px and 800px by slot width.

Finally, the SRC attribute is used to rollback when the browser does not support srcset.

Note that the width of each image in srcset is w, which represents the actual width of the image file. This is also the width of img.naturalWidth. If the DPR of the current device is 1, srcset=”elva-fairy-480w.jpg 480px”, this indicates that you want to use this image when the slot width is 480px. But if the other device had a DPR of 2, obviously the image would be blurry and not have the desired effect. So the best way is to tell the browser the original resolution of the image and let it decide which image to use based on the DPR and slot width.

Cases where sizes are not required

Sizes are not actually required. We know that img is a replacement element, and without CSS, its size is determined by the content (i.e. the image itself), meaning that the browser does not know the size of the img position until the image is actually loaded. That’s why we need sizes, which explicitly specifies the width of the slot that the programmer expects to fill after loading the image.

But if you use CSS to specify the img size:

img {
  width: 300px;
  height: auto;
}
Copy the code

This way, the browser knows the width of img and sizes are not required.

About the Picture label

The picture tag allows you to differentiate between different picture sources based on your media choice:

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>
Copy the code

The source tag indicates which image source can be selected, and the browser will use the first matching source as the image source. If written as above, the second source will be used when the window width is 800px or more, otherwise the first source will be used.

The last source should be followed by an IMG tag, both for default images if no source match is found and for smooth fallback if the browser does not support picture.

Difference between picture and SRcset

From the above code, picture and SRcset implement similar functions, but in reality they are quite different and can be clearly distinguished from each other by the logic of browser matching:

picture: media -> source
srcset: media -> slot -> source
Copy the code

Srcset matches pictures based on the size of the picture, picture based on the screen width.

At the same time picture can be selected according to the picture format:

<picture>
  <source srcset="mdn-logo.svg" type="image/svg+xml">
  <img src="mdn-logo.png" alt="MDN">
</picture>
Copy the code

If the browser does not support SVG, PNG images in IMG are used.

compatibility

From the compatibility point of view, Responsive images is significantly better than Client Hints, except for the poor IE most new browsers support.

Image format

Image format is one of the important ways to optimize the image loading, in addition to the commonly used PNG/JPEG image, now commonly used high compression ratio + high quality image encoding formats such as WebP and AVIF.

WebP

Webp is a kind of image encoding format based on VP8 video frame encoding made by Google. It is generally compatible in the early stage, and now most new browsers except IE and Safari support it:

AVIF

AVIF was developed by AOMedia, an open source organization that includes Netflix, Google, and Apple

Backed by big companies, AVIF can claim a bright future, but its current native compatibility is poor:

Fortunately, it has a polyfill: Kagami/avif.js

This polyfill uses the service worker to hijack the fetch event and then process the avif image, so the img tag in the page can refer directly to the avif file:

<body>
  <! -- Register worker -->
  <script src="reg.js"></script>

  <! -- Can embed AVIF with IMG tag now -->
  <img src="image.avif">

  <! -- Or via CSS property -->
  <div style="background: url(image2.avif)">
    some content
  </div>
</body>
Copy the code

Of course, only if the browser supports the Service worker.

Well, the article first write here, have a rest ~