[技術翻譯]預加載響應式圖像，從Chrome 73開始實現

時間 2019-11-09

原文原文鏈接

本次預計翻譯三篇文章以下：javascript

我爲何要建立這個git倉庫？經過翻譯國外的web相關的技術文章來學習和跟進web發展的新思想和新技術。git倉庫地址：https://github.com/yzsunlei/javascript-article-translatehtml

從Chrome 73開始，能夠結合link rel = "preload"和響應式圖像，來更快地加載圖像。前端

本文使我有機會來討論我最喜歡的兩件事：響應式圖像和預加載。做爲致力於開發這兩塊功能的人，我很高興看到他們一塊兒工做！java

響應式概述

假設您正在300像素寬的屏幕上瀏覽網頁，而且該頁面請求了一張1500像素寬的圖像。該頁面就浪費了您大量的網絡數據，由於您的屏幕沒法使用全部這些額外分辨率進行任何操做。理想狀況下，瀏覽器應該獲取圖像的一個版本，只是比你的屏幕尺寸稍微寬一些，好比說325個像素。這樣能夠確保圖像高分辨率而又不會浪費網絡數據。並且，更好的是，圖像將加載得更快。響應式圖像使瀏覽器在不一樣的設備上可以獲取到不一樣的圖像資源。即便不使用圖像CDN爲每一個圖像保存多個尺寸，而在srcset屬性中指定它們。w值告訴瀏覽器每一個版本的寬度。根據設備，瀏覽器能夠選擇適當的一個版本：git

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

預加載概述

經過預加載，您能夠在HTML中發現關鍵資源以前，告訴瀏覽器您要儘快加載的關鍵資源。這對於不容易發現的資源特別有用，例如樣式表中包含的字體，背景圖像或從腳本加載的資源。github

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

響應式圖像+預加載=更快的圖像加載

響應式圖像和預加載在過去幾年中已經就可用了，但同時缺乏一些內容：沒法預加載響應式圖像。從Chrome 73開始，瀏覽器能夠在srcset發現img標記以前預加載正確的響應式圖像版本！web

根據您網站的結構，這可能意味着顯着加快圖像顯示速度！咱們在使用JavaScript延遲加載響應圖像的網站上進行了測試。預加載使圖像加載速度加快了1.2秒。數組

全部現代瀏覽器均支持響應圖像，而預加載圖像僅在基於Chromium的瀏覽器中受支持。瀏覽器

`imagesrcset`和`imagesizes`

爲了預加載響應式圖像，最近向<link>元素添加了新屬性：imagesrcset和imagesizes。它們與element中使用<link rel="preload">的srcsetand sizes語法一塊兒使用並匹配<img>。緩存

例如，若是您要預加載使用如下命令指定的響應圖像：

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

您能夠經過將如下內容添加到HTML的<head>中來作到這一點：

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

這揭開了使用相同的資源選擇邏輯的請求，並應用srcset和sizes的序幕。

使用案例

預加載動態注入的響應式圖像

假設您要動態加載人物圖像做爲幻燈片的一部分，並知道將首先顯示哪一個圖像。在這種狀況下，您可能要避免在加載有問題的圖像以前等待腳本，由於這會延遲用戶看到它的時間。

您能夠在具備動態加載的圖片庫的網站上檢查此問題：

1.在新標籤頁中打開此示例網站。
2.按Control+Shift+J（或Command+Option+J在Mac上）按打開DevTools。
3.單擊網絡選項卡。
4.在「限制」下拉列表中
5.禁用「禁用緩存」複選框。
6.從新加載頁面。

該瀑布流顯示圖像僅在瀏覽器完成運行腳本後纔開始加載，從而給圖像最初顯示給用戶的時間帶來了沒必要要的延遲。

preload在此處使用幫助是由於圖像會提早加載，而且在瀏覽器須要顯示圖像時可能已經存在。

該瀑布流代表，第一張圖像與腳本同時開始加載，避免了沒必要要的延遲，從而加快了顯示圖像的速度。

要查看預加載的區別，您能夠按照第一個示例中的步驟檢查相同的動態加載的圖像庫，但預加載了第一張圖像。

避免該問題的另外一種方法是使用基於標記的輪播，並讓瀏覽器的預加載器選擇所需的資源。可是，這種方法可能並不老是實用的。（例如，若是您正在複用現有的不基於標記的組件。）

使用圖片集預加載背景圖片

若是您針對不一樣的屏幕分辨率使用不一樣的背景圖像，則可使用如下image-set語法在CSS中指定它們。而後，瀏覽器能夠根據屏幕的DPR選擇顯示哪個。

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

上面的語法忽略瞭如下事實：在基於Chromium和基於WebKit的瀏覽器中，此功能須要瀏覽器的前綴。若是您打算使用此功能，則應考慮使用Autoprefixer來自動處理該問題。

CSS背景圖片的問題在於，只有在瀏覽器下載並處理了頁面中的全部CSS後，瀏覽器纔會發現它們<head>，這多是不少CSS…

您能夠在帶有響應背景圖片的示例網站上檢查此問題。

在此示例中，直到徹底下載CSS後纔開始圖像下載，從而致使圖像顯示產生沒必要要的延遲。

響應式圖像預加載提供了一種簡單且無漏洞的方法來更快地加載這些圖像。

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

您能夠在預加載的響應式背景圖像檢查前面的示例的效果。

此處，圖像和CSS同時開始下載，避免了延遲並加快了圖像的加載速度。

預加載響應圖像的實踐

在理論上預加載您的響應式圖像能夠加快它們的速度，可是實際上它有什麼做用？

爲了回答這個問題，我建立了一個演示PWA商店的兩個副本：一個不預加載圖像，另外一個預加載一些圖像。因爲該站點使用JavaScript懶加載圖像，所以可能會受益於預加載初始視口中的圖像。

這給了我如下結果：無預加載和圖像預加載。從原始數字來看，咱們看到「開始渲染」保持不變，「速度指數」略有改善（273毫秒，由於圖像到達速度更快，但並無佔用很大的像素區域），可是真正的指標能夠捕捉到差別是最後繪製的主題圖像指標，提升了1.2秒。🎉🎉

固然，沒有什麼比電影膠片比較更能捕捉視覺差別了：

WebPageTest幻燈片比較的屏幕快照顯示預加載的圖像的顯示速度大約要快1.5秒。

幻燈片顯示，圖像在預加載時到達的速度明顯加快，從而極大地改善了用戶體驗。

預加載和？

若是您熟悉響應式圖像，您可能會想知道「<picture>是什麼？」。

Web性能工做組正在討論添加srcset與和相同的預加載sizes，而不是添加<picture>元素，以解決「藝術方向」(art direction)用例。

爲何這個用例被「忽略」了？

儘管也有解決該用例的方案，但仍有許多技術問題須要解決，這意味着這裏的解決方案將具備極大的複雜性。最重要的是，彷佛大部分狀況下，用例今天均可以解決，即便採用駭人聽聞的方式（請參閱下文）。

鑑於此，Web Performance WG決定推出srcset而後看看是否須要一樣的picture支持。

若是您確實想用<picture>實現預加載，則可使用如下技術做爲解決方法。

鑑於如下狀況：

<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>

<picture>元素的邏輯（或圖像源選擇邏輯，要準確），將越過media所述的屬性<source>元件，以便，找到相匹配的第一個，並使用附加的資源。

因爲響應式預加載沒有「順序」或「首次匹配」的概念，所以須要將斷點轉換爲如下內容：

<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.1px)">