本次預計翻譯三篇文章如下：
我為什么要創建這個git倉庫？通過翻譯國外的web相關的技術文章來學習和跟進web發展的新思想和新技術。git倉庫地址：https://github.com/yzsunlei/javascript-article-translate
從Chrome 73開始，可以結合link rel = "preload"和響應式圖像，來更快地加載圖像。
本文使我有機會來討論我最喜歡的兩件事：響應式圖像和預加載。作為致力於開發這兩塊功能的人，我很高興看到他們一起工作！
響應式概述
假設您正在300像素寬的屏幕上瀏覽網頁，並且該頁面請求了一張1500像素寬的圖像。該頁面就浪費了您大量的網絡數據，因為您的屏幕無法使用所有這些額外分辨率進行任何操作。理想情況下，瀏覽器應該獲取圖像的一個版本，只是比你的屏幕尺寸稍微寬一些，比如說325個像素。這樣可以確保圖像高分辨率而又不會浪費網絡數據。而且，更好的是，圖像將加載得更快。響應式圖像使瀏覽器在不同的設備上能夠獲取到不同的圖像資源。即使不使用圖像CDN為每個圖像保存多個尺寸，而在srcset屬性中指定它們。w值告訴瀏覽器每個版本的寬度。根據設備，瀏覽器可以選擇適當的一個版本：
<img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" alt="…">
預加載概述
通過預加載，您可以在HTML中發現關鍵資源之前，告訴瀏覽器您要盡快加載的關鍵資源。這對於不容易發現的資源特別有用，例如樣式表中包含的字體，背景圖像或從腳本加載的資源。
<link rel="preload" as="image" href="important.png">
響應式圖像+預加載=更快的圖像加載
響應式圖像和預加載在過去幾年中已經就可用了，但同時缺少一些內容：無法預加載響應式圖像。從Chrome 73開始，瀏覽器可以在srcset發現img標記之前預加載正確的響應式圖像版本！
根據您網站的結構，這可能意味着顯着加快圖像顯示速度！我們在使用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)">
小結
響應式圖像預加載為我們提供了新的令人興奮的可能性來預加載響應式圖像，這在以前只能使用hack方式才能實現的。它是對敏捷開發人員的重要新增功能，使我們能夠確保在需要時盡快將想要顯示在用戶面前的重要圖像加載在那里。