Three articles are expected to be translated as follows:

  • 9 Projects that will Make you a Front End Expert by 2020
  • Preloading responsive images is implemented in Chrome 73
  • 13 Useful JavaScript Array Tricks you should know

Why am I creating this Git repository? Learn and follow up new ideas and technologies of web development by translating foreign Web related technical articles. Git repository address: github.com/yzsunlei/ja…

Starting with Chrome 73, you can combine Link rel = “preload” with responsive images to load images faster.

This article gives me a chance to talk about two of my favorite things: reactive graphics and preloading. As someone who worked on both of these features, I’m happy to see them working together!

Responsive overview

Suppose you are browsing a Web page on a screen 300 pixels wide, and the page requests an image 1500 pixels wide. That page wastes a lot of your network data because your screen can’t do anything with all that extra resolution. Ideally, the browser should grab a version of the image, just slightly wider than your screen size, say 325 pixels. This ensures high resolution images without wasting network data. And, even better, images will load faster. Responsive images enable browsers to retrieve different image resources on different devices. Even if you don’t use the image CDN to save multiple dimensions for each image, specify them in the SRCset property. The w value tells the browser the width of each version. Depending on the device, the browser can select an appropriate version:

<img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" alt="...">
Copy the code

Preloading Overview

With preloading, you can tell the browser what key resources you want to load as soon as possible before they are found in the HTML. This is especially useful for resources that are not easy to find, such as fonts contained in a stylesheet, background images, or resources loaded from a script.

<link rel="preload" as="image" href="important.png">
Copy the code

Responsive images + preloading = faster image loading

Reactive images and preloading have been available for the past few years, but something was missing: there was no way to preload reactive images. Starting with Chrome 73, browsers can preload the correct responsive version of an image before srCset finds the IMG tag!

Depending on the structure of your site, this may mean significantly speeding up image display speed! We tested it on websites that used JavaScript to lazily load response images. Preloading speeds up image loading by 1.2 seconds.

All modern browsers support response images, while preloaded images are only supported in Chromium-based browsers.

imagesrcsetandimagesizes

To preload responsive images, new attributes imagesrcSet and Imagesizes have recently been added to the element. They are used with srcsetand sizes syntax in Element that uses and match .

For example, if you want to preload the response image specified with the following command:

<img src="wolf.jpg" srcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" sizes="50vw" alt="A rad wolf">
Copy the code

You can do this by adding the following to the HTML :

<link rel="preload" as="image" href="wolf.jpg" imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" imagesizes="50vw">
Copy the code

This opens the door to requests that use the same resource selection logic and apply SRCset and SIZES.

Use case

Preload dynamically injected reactive images

Suppose you want to dynamically load images of people as part of a slide and know which image will be displayed first. In this case, you might want to avoid waiting for the script before loading the problematic image, as this delays the user seeing it.

You can check for this problem on websites with dynamically loaded image libraries:

  • 1. Open the sample site in a new TAB.

  • 2. Press Control+Shift+J (or Command+Option+J on Mac) to open DevTools.

  • 3. Click the Network TAB.

  • 4. In the Restrictions drop-down list box

  • 5. Disable the Disable Cache check box.

  • 6. Reload the page.

The waterfall displays images that load only after the browser has finished running the script, causing an unnecessary delay in the initial display of the images to the user.

Preload uses help here because the image loads ahead of time and may already exist when the browser needs to display the image.

This waterfall flow shows that the first image starts loading at the same time as the script, avoiding unnecessary delays and thus speeding up the display of the image.

To see the difference in preloading, you can follow the steps in the first example to examine the same dynamically loaded image library, but with the first image preloaded.

Another way to avoid this problem is to use tag-based rotation and let the browser’s preloader select the required resources. However, this approach may not always be practical. (For example, if you are reusing existing components that are not tag-based.)

Preload the background image using the photo set

If you use different background images for different screen resolutions, you can specify them in CSS using the following image-set syntax. The browser can then choose which one to display based on the DPR of the screen.

background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x);
Copy the code

The syntax above ignores the fact that in Chromium and WebKit-based browsers, this feature requires a browser prefix. If you plan to use this feature, you should consider using Autoprefixer to handle the problem automatically.

The problem with CSS background images is that the browser doesn’t notice them until after the browser has downloaded and processed all the CSS in the page, which can be a lot of CSS…

You can check for this problem on a sample web site with a response background image.

In this example, the image download does not begin until the CSS is fully downloaded, resulting in an unnecessary delay in the image display.

Reactive image preloading provides an easy and bug-free way to load these images faster.

<link rel=preload href=cat.png as=image imagesrcset="cat.png 1x, cat-2x.png 2x">
Copy the code

You can check the effect of the previous example in a pre-loaded responsive background image.

Here, the image and CSS start to download at the same time, avoiding delays and speeding up image loading.

Practice of preloading response images

In theory, preloading your responsive images can speed them up, but what does it do in practice?

To answer this question, I created two copies of a demo PWA store: one with no preloaded images and one with some preloaded images. Because the site uses JavaScript to lazily load images, it might benefit from preloading images from the initial viewport.

This gave me the following results: no preloading and image preloading. In terms of raw numbers, we see that the “start rendering” remains the same and the “speed index” improves slightly (273 milliseconds because images arrive faster but don’t occupy a large pixel area), but the real metric that can capture the difference is the final subject image metric that is drawn, which improves by 1.2 seconds. 🎉 🎉

Of course, nothing captures visual differences better than film comparisons:

WebPageTest slideshow comparison screenshots show preloaded images displayed about 1.5 seconds faster.

Slides show that images arrive significantly faster when they are preloaded, greatly improving the user experience.

Preloading and?

If you’re familiar with responsive images, you might be wondering “What is ?” .

The Web Performance Working Group is discussing adding SRCSet and the same preloaded SIZES instead of adding elements to address the “Art Direction” use case.

Why is this use case “ignored”?

Although there are solutions to this use case, there are still a number of technical issues that need to be addressed, which means that the solution here will be extremely complex. Most importantly, it seems that for the most part, use cases can be solved today, even in outrageous ways (see below).

In view of this, The Web Performance WG decided to roll out srCSet and see if they needed the same picture support.

If you do want to implement preloading with , you can use the following techniques as a workaround.

In view of the following:

<picture>
    <source src="small_cat.jpg" media="(max-width: 400px)">
    <source src="medium_cat.jpg" media="(max-width: 800px)">
    <img src="huge_cat.jpg">
</picture>
Copy the code

The logic of the element (or the image source selection logic, to be exact) will go over the propertyelement described by media in order to find the first match and use the additional resource.

Since reactive preloading has no concept of “order” or “first match,” breakpoints need to be converted to:

<link rel="preload" href="small_cat.jpg" as="image" media="(max-width: 400px)">
<link rel="preload" href="medium_cat.jpg" as="image" media="(min-width: 400.1px) and (max-width: 800px)">
<link rel="preload" href="large_cat.jpg" as="image" media="(min - width: 800.1 px)">
Copy the code

summary

Reactive image preloading gives us new and exciting possibilities for preloading reactive images that were previously only possible with hacks. It is an important addition for agile developers, enabling us to ensure that the important images we want to display in front of the user are loaded there as quickly as possible.

Web. Dev /preload-res…