Jamstack網(wǎng)站上的圖像優(yōu)化指南

這篇文章得到了我們親愛的朋友們的支持童話世界，一個(gè)友好的無(wú)頭CMS，具有可視化編輯器、嵌套組件和可定制的網(wǎng)站和應(yīng)用程序內(nèi)容塊。謝謝大家！

今天，在互聯(lián)網(wǎng)上創(chuàng)造內(nèi)容是常態(tài)，而不是例外。建立個(gè)性化網(wǎng)站、將產(chǎn)品數(shù)字化并開始看到結(jié)果從未如此簡(jiǎn)單。但是，當(dāng)我們都開始大規(guī)模地創(chuàng)建內(nèi)容，用越來(lái)越多的數(shù)據(jù)填充網(wǎng)絡(luò)，并存儲(chǔ)數(shù)百個(gè)zettabytes的內(nèi)容時(shí)，會(huì)發(fā)生什么呢？

嗯，正是在這個(gè)時(shí)候，大品牌和托管平臺(tái)，如谷歌或Netlify，尋求解決方案來(lái)優(yōu)化我們產(chǎn)生的數(shù)據(jù)，使網(wǎng)絡(luò)更輕，因此更快，促進(jìn)措施和技術(shù)來(lái)提高我們網(wǎng)站的性能，并獎(jiǎng)勵(lì)那些這樣做的人在他們的搜索引擎排名中的更好的位置。這就是為什么今天，網(wǎng)絡(luò)表現(xiàn)和在線表現(xiàn)一樣重要和時(shí)尚。

目錄:

• 什么是Web性能？
• 為什么圖像優(yōu)化對(duì)Jamstack網(wǎng)站如此重要？
• 常見問(wèn)題的修復(fù)
• 使用影像服務(wù)CDN的優(yōu)勢(shì)
• 案例研究:Jamstack站點(diǎn)中的圖像組件
• 結(jié)論

什么是WEB性能？

網(wǎng)絡(luò)性能是指網(wǎng)站加載的速度，下載的速度，以及應(yīng)用程序在用戶瀏覽器上的顯示方式。它既是應(yīng)用程序的客觀度量，也是感知的用戶體驗(yàn)(UX)。

如果你最大限度地減少加載時(shí)間，提高UX，讓你的網(wǎng)站更快，更多的用戶將能夠訪問(wèn)你的網(wǎng)站，無(wú)論設(shè)備或互聯(lián)網(wǎng)連接，增加訪客保留，忠誠(chéng)度和用戶滿意度，這將最終幫助你實(shí)現(xiàn)你的業(yè)務(wù)目標(biāo)，并在搜索引擎中排名更好。

圖像與網(wǎng)頁(yè)表現(xiàn)的關(guān)系

很明顯，當(dāng)我們想到內(nèi)容時(shí)，首先想到的是文本。但是，如果我們把文本放在一邊，還有什么其他選擇呢？視頻？圖像？是的，圖像在今天的網(wǎng)絡(luò)上扮演著非常重要的角色，不僅僅是在100%專注于這項(xiàng)資產(chǎn)的平臺(tái)上，比如拼趣或者不濺，但在我們每天瀏覽的大多數(shù)網(wǎng)頁(yè)上。

根據(jù)2021年末的網(wǎng)絡(luò)年鑒，95.9%的網(wǎng)頁(yè)包含至少一個(gè)%3Cimg%3E標(biāo)簽，99.9%的人至少產(chǎn)生過(guò)一次對(duì)圖像資源的請(qǐng)求。

—媒體、圖像、網(wǎng)絡(luò)年鑒2021章節(jié)

就像圖像在內(nèi)容創(chuàng)作中的應(yīng)用一樣，優(yōu)化它們是提高頁(yè)面加載速度的關(guān)鍵并在盡可能短的時(shí)間內(nèi)渲染，因?yàn)閳D像比任何其他資源占用更多的字節(jié)。雖然在過(guò)去幾年中，由于使用了新的圖像優(yōu)化技術(shù)，每頁(yè)圖像傳輸?shù)拇笮∫呀?jīng)減少，但仍有許多工作要做。

圖像是性能和UX的關(guān)鍵元素，從核心網(wǎng)絡(luò)生命衡量標(biāo)準(zhǔn)，例如最大容量涂料試圖識(shí)別給定頁(yè)面上最重要的折疊內(nèi)容，證明了這一點(diǎn)。

根據(jù)在中進(jìn)行的分析網(wǎng)絡(luò)年鑒的性能部分，的img標(biāo)簽代表42%的LCP元素的網(wǎng)站，而71-79%的頁(yè)面有形象作為L(zhǎng)CP元素，因?yàn)樗鼈円部梢允褂肅SS作為背景應(yīng)用。這些數(shù)據(jù)清楚地表明，沒有經(jīng)過(guò)良好優(yōu)化的圖像，就不會(huì)有好的性能。

鑰匙以用戶為中心的指標(biāo)通常取決于頁(yè)面上圖像的大小、數(shù)量、布局和加載優(yōu)先級(jí)。這就是為什么我們的很多性能指南都在談?wù)搱D像優(yōu)化。

—艾迪·奧斯馬尼

為什么圖像優(yōu)化對(duì)JAMSTACK網(wǎng)站如此重要？

您可能已經(jīng)知道，圖像優(yōu)化是在理想條件下交付高質(zhì)量圖像必須經(jīng)歷的過(guò)程，有時(shí)需要借助圖像轉(zhuǎn)換API和全球內(nèi)容交付網(wǎng)絡(luò)(CDN)使過(guò)程更簡(jiǎn)單和可擴(kuò)展。

雖然優(yōu)化圖像在任何應(yīng)用程序中都是必須的，但在Jamstack生態(tài)系統(tǒng)中，考慮到Jamstack架構(gòu)的主要目標(biāo)之一是提高web性能，優(yōu)化圖像甚至更為重要。

Jamstack是一種架構(gòu)方法，它將web體驗(yàn)層從數(shù)據(jù)和業(yè)務(wù)邏輯中分離出來(lái)，提高了靈活性、可伸縮性、性能和可維護(hù)性。

—Jamstack.org

Jamstack站點(diǎn)是分離的:前端與后端是分離的，并且預(yù)先構(gòu)建在高度優(yōu)化的靜態(tài)頁(yè)面在被部署之前。但也不是一成不變的。通過(guò)使用JS和API與后端服務(wù)對(duì)話，它還允許動(dòng)態(tài)內(nèi)容。

你可能會(huì)問(wèn)，圖片和靜態(tài)網(wǎng)站架構(gòu)有什么關(guān)系？作為網(wǎng)頁(yè)年鑒地址圖片對(duì)Jamstack網(wǎng)站的影響,圖像是一個(gè)好的UX的主要瓶頸。大部分責(zé)任在于使用較舊的格式，如PNG和JPEG，而不是使用下一代格式，如WebP或AVIF，使用戶等待太長(zhǎng)時(shí)間，并在核心網(wǎng)站生命指標(biāo)中產(chǎn)生糟糕的分?jǐn)?shù)。

但是，如果您擔(dān)心由于大型、優(yōu)化不佳的圖像而無(wú)法獲得預(yù)期的性能，請(qǐng)不要擔(dān)心，因?yàn)檫@正是您閱讀本文的目的！

常見問(wèn)題的修復(fù)

在大多數(shù)web性能測(cè)量工具中，例如網(wǎng)頁(yè)測(cè)試或者PageSpeed洞察，當(dāng)我們生成關(guān)于網(wǎng)站狀態(tài)的報(bào)告時(shí)，我們可以找到與圖像相關(guān)的參數(shù)。這些參數(shù)涉及大小、格式、編碼等等，即我們的圖像有多優(yōu)化。

在本節(jié)中，我們將列舉由于使用圖像而經(jīng)常出現(xiàn)的問(wèn)題，以及針對(duì)每一個(gè)問(wèn)題的理論優(yōu)化技術(shù)。

1.使用壓縮文件

想象一下在一個(gè)項(xiàng)目中工作，比如開發(fā)到，成百上千的人可以上傳內(nèi)容到你的平臺(tái)而不被審查。在這種情況下，您的項(xiàng)目應(yīng)該具有大型高分辨率圖像，因?yàn)椴皇敲總€(gè)人都知道帶寬消耗和加載速度的下降。

解決辦法

很明顯，我們想給我們的內(nèi)容創(chuàng)作者自由，但是我們不能對(duì)將在我們的網(wǎng)站上顯示的圖像的分辨率或傳送和下載速度抱有僥幸心理。

解決方法是優(yōu)化我們的圖像，壓縮它們并減小它們的尺寸幾乎沒有質(zhì)量損失。有兩種眾所周知的壓縮技術(shù):

1. 有損壓縮
   這種壓縮類型使用的算法刪除不太重要的數(shù)據(jù)以減小文件大小。
   當(dāng)考慮使用這種有損技術(shù)時(shí)，我們必須記住兩件事:通過(guò)丟棄部分圖像信息，圖像質(zhì)量將受到負(fù)面影響，如果有人用這種技術(shù)壓縮一張圖片，而我們想再次壓縮它，它會(huì)損失更多的質(zhì)量。
2. 無(wú)損壓縮
   另一方面，無(wú)損壓縮壓縮數(shù)據(jù)而不影響圖像質(zhì)量。
   這種技術(shù)允許圖像在隨后的壓縮中不損失質(zhì)量。盡管如此，它還是會(huì)導(dǎo)致文件變大，這是我們?cè)谫|(zhì)量不能改變項(xiàng)目?jī)r(jià)值主張的情況下盡量避免的。

當(dāng)決定使用這些技術(shù)時(shí)，最重要的是了解我們的用戶以及他們想從我們的網(wǎng)站上找到什么。如果我們考慮社交網(wǎng)絡(luò)，我們可以看到兩個(gè)明顯的趨勢(shì)，那些專注于文本和多媒體內(nèi)容。

很明顯，對(duì)于以文本為中心的社交網(wǎng)絡(luò)來(lái)說(shuō)，損失一點(diǎn)點(diǎn)圖像質(zhì)量對(duì)他們來(lái)說(shuō)不是一個(gè)大問(wèn)題，并且可以減少五分之一的圖像文件大小，這意味著性能的大幅提高。因此，有損壓縮顯然是這種情況下的理想技術(shù)。然而，對(duì)于專注于圖像內(nèi)容的社交網(wǎng)絡(luò)來(lái)說(shuō)，最重要的事情是以優(yōu)異的質(zhì)量交付圖像，因此無(wú)損壓縮在這里會(huì)發(fā)揮更好的作用。

提示: 在使用圖像服務(wù)CDN時(shí)，通常包括壓縮，但了解更多可以幫助我們壓縮圖像的工具總是好的。為此，我為您帶來(lái)了開源工具，您可以使用這些工具將圖像壓縮添加到您的開發(fā)工作流程中:

• Calibre圖像操作是由性能專家在口徑在拉取請(qǐng)求中自動(dòng)壓縮JPEGs、png和WebPs
• Imgbot，它將抓取GitHub中的圖像文件，并在應(yīng)用無(wú)損壓縮后提交pull請(qǐng)求。

2.以下一代(NEXT-GEN)格式提供，高效編碼

上述問(wèn)題的部分原因可能是使用舊的圖像格式如JPG和巴布亞新幾內(nèi)亞更差的壓縮和更大的文件大小。但在決定是否采用下一代圖像格式時(shí)，壓縮不僅是一個(gè)重要因素，而且是其編碼/解碼速度和質(zhì)量改善的重要因素。

雖然近年來(lái)我們確實(shí)聽到了很多關(guān)于下一代格式的消息，如WebP、AVIF或JPEG XL，但仍然令人驚訝的是許多網(wǎng)站沒有遷移到這些格式并繼續(xù)下去提供了差的UX和差的性能結(jié)果。

解決辦法

現(xiàn)在是我們走向一個(gè)更美好世界的時(shí)候了，在這個(gè)世界中，我們的圖像壓縮和它們的質(zhì)量沒有直接關(guān)系，我們可以在不改變它們的視覺外觀的情況下讓它們占用盡可能少的空間，并且使用下一代格式。

通過(guò)使用下一代格式，我們將能夠大幅縮小我們圖像的尺寸，制作它們下載更快和消費(fèi)更少的帶寬，提高我們網(wǎng)站的UX和性能。

“現(xiàn)代圖像格式(AVIF或WebP)可以將壓縮率提高50%，并提供更好的每字節(jié)質(zhì)量，同時(shí)仍具有視覺吸引力。”

— Addy Osmani(圖像優(yōu)化專家)

讓我們看看兩種最有前途的格式，以及它們之間的區(qū)別。

• WebP

這是一種圖像格式支持有損和無(wú)損壓縮，與JPEG相比文件大小減少25-34%,以及動(dòng)畫阿爾法呢透明度，文件大小比PNG小26%。它顯然是這些格式的替代品，直到AVIF和JPEG XL出來(lái)了。

它的優(yōu)點(diǎn)是跨大多數(shù)現(xiàn)代瀏覽器的統(tǒng)一支持，其無(wú)損8位透明通道和有損RGB透明，支持各種類型的元數(shù)據(jù)和動(dòng)畫。另一方面，它不支持HDR或?qū)捝驁D像，也不支持漸進(jìn)解碼。

• AVIF

它是一種開源的AV1圖像文件格式以更好的有損和無(wú)損壓縮方式存儲(chǔ)靜態(tài)和動(dòng)態(tài)圖像比目前網(wǎng)絡(luò)上最流行的格式，提供了50%的文件大小比JPEG節(jié)省。它與...直接競(jìng)爭(zhēng)JPEG XL，其壓縮質(zhì)量相似，但功能更多。

AVIF格式的優(yōu)點(diǎn)是它支持動(dòng)畫和圖形元素在JPEG有局限性的地方，改進(jìn)JPEG和WebP壓縮，支持12位色深，支持HDR和寬色域、單色和多通道圖像，以及帶有alpha通道的透明膠片。然而，主要的缺點(diǎn)是AVIF的特點(diǎn)是它是并非與所有瀏覽器兼容并且它的編碼/解碼在時(shí)間和CPU方面更昂貴，導(dǎo)致一些圖像cdn仍然不應(yīng)用AVIF作為自動(dòng)格式。

注意：如果您想詳細(xì)了解每種格式之間的差異，我建議您閱讀文章“使用現(xiàn)代圖像格式:AVIF和WebP“由艾迪·奧斯馬尼，并嘗試AVIF和WebP質(zhì)量設(shè)置選取器工具。

請(qǐng)記住，無(wú)論您選擇哪種格式，如果您想要一個(gè)有效的結(jié)果，您必須從最佳質(zhì)量的主圖像生成壓縮文件。

額外小費(fèi)：假設(shè)您想利用瀏覽器支持有限的圖像格式的特性。在這種情況下，您總是可以使用% 3c圖片%3EHTML標(biāo)記，如下面的代碼所示，以便瀏覽器可以按照提供的順序選擇支持的圖像格式。

%3C圖片%3E %3C！-如果不支持AVIF，將呈現(xiàn)WebP。-% 3E % 3c source srcset = " img/image . avif " type = " image/avif " % 3E % 3C！-如果不支持WebP，將呈現(xiàn)JPG-%3E % 3c source srcset = " img/image . WebP " type = " image/WebP " % 3E % 3c img src = " img/image . jpg " width = " 360 " height = " 240 " alt = "我們想要的最后一種格式" % 3E % 3C/圖片% 3E

3.指定尺寸

當(dāng)寬度和高度尚未添加屬性到%3Cimg%3E標(biāo)簽，瀏覽器無(wú)法計(jì)算圖像的長(zhǎng)寬比，因此沒有保留正確大小的占位符框。這會(huì)導(dǎo)致圖像加載時(shí)的布局變化，從而導(dǎo)致性能和可用性問(wèn)題。

解決辦法

作為開發(fā)人員，我們有能力提高UX，減少布局變化。我們已經(jīng)完成了一部分，通過(guò)添加寬度和高度對(duì)著圖像。

乍一看，這似乎是一個(gè)簡(jiǎn)單的任務(wù)，但在后臺(tái)，瀏覽器在不同的場(chǎng)景中計(jì)算這些圖像的大小是一項(xiàng)繁瑣的工作:

• 用于在響應(yīng)式設(shè)計(jì)中調(diào)整大小的圖像。

如果我們有一個(gè)響應(yīng)式設(shè)計(jì)，我們會(huì)希望圖像保持在容器的邊緣，使用下面的CSS來(lái)實(shí)現(xiàn):

img {最大寬度:100%；高度:自動(dòng)；}

為了讓瀏覽器在加載前計(jì)算圖像的長(zhǎng)寬比和正確大小，我們的%3Cimg%3E標(biāo)記必須包含定義的高度和寬度當(dāng)我們?cè)贑SS中指定高度(或?qū)挾?以及相反的屬性width(或height)為auto時(shí)。

如果沒有高度中的屬性%3Cimg%3E，上面的CSS最初將高度設(shè)置為0，因此當(dāng)圖像加載時(shí)會(huì)有內(nèi)容移動(dòng)。

% 3c img src = " image . webp " width = " 700 " height = " 500 " alt = "完美場(chǎng)景" % 3E % 3c style % 3 eimg { max-width:100%；高度:自動(dòng)；}%3C/style%3E

• 對(duì)于可以改變長(zhǎng)寬比的響應(yīng)圖像。

在Chromium的最新版本中，您可以設(shè)置寬度和高度屬性打開% 3c源%3E元素里面的% 3c圖片%3E。這允許父容器在加載圖像之前具有正確的高度，并避免不同圖像的布局偏移。

% 3c picture % 3E % 3c source media = "(max-width:420 px)" srcset = " small-image . webp " width = " 200 " height = " 200 " % 3E % 3c img src = " image . webp " width = " 700 " height = " 500 " alt = "不同縱橫比的響應(yīng)圖像。"%3E % 3C/圖片% 3E

注意：要了解更多關(guān)于這個(gè)話題的信息，我推薦你看看文章“設(shè)置圖像的高度和寬度也很重要“巴里·波拉德寫的。

4.為所有設(shè)備優(yōu)化圖像，并適當(dāng)調(diào)整它們的大小

通常，有了CSS，我們就有了讓我們的圖像占據(jù)我們想要的空間的超能力；問(wèn)題是所有超級(jí)大國(guó)都負(fù)有重大責(zé)任。如果我們縮放一個(gè)圖像，而之前沒有針對(duì)該用例進(jìn)行優(yōu)化，我們將使瀏覽器加載一個(gè)不合適大小的圖像從而惡化了裝載時(shí)間。

當(dāng)我們談到未針對(duì)顯示圖像的設(shè)備和/或視窗進(jìn)行優(yōu)化的圖像時(shí)，有三種不同的情況:

• 分辨率的變化
  當(dāng)用于桌面的大圖像在較小的屏幕上顯示時(shí)，從移動(dòng)設(shè)備到桌面會(huì)消耗多達(dá)4倍的數(shù)據(jù)，反之亦然，放大后會(huì)失去圖像質(zhì)量。
• 像素密度的變化
  當(dāng)按像素調(diào)整大小的圖像在具有較高像素密度的屏幕上顯示時(shí)，不能提供最佳的圖像質(zhì)量。
• 設(shè)計(jì)的改變
  當(dāng)具有重要細(xì)節(jié)的圖像由于沒有提供突出顯示它們的裁剪圖像而在其他屏幕尺寸上失去其用途時(shí)。

解決辦法

幸運(yùn)的是，今天我們有響應(yīng)圖像技術(shù)來(lái)解決上面列出的三個(gè)問(wèn)題，通過(guò)向?yàn)g覽器提供每個(gè)圖像在大小、分辨率和/或設(shè)計(jì)上的不同版本，以便他們根據(jù)用戶的屏幕大小和/或設(shè)備特征來(lái)確定加載哪個(gè)圖像。

現(xiàn)在讓我們看看這些解決方案是如何在每種情況下用HTML實(shí)現(xiàn)的:

1.分辨率更改修復(fù):不同尺寸的響應(yīng)圖像

解決方案是正確調(diào)整原始圖像的大小根據(jù)視口大小。

為此，請(qǐng)使用%3Cimg%3E用標(biāo)記科學(xué)研究委員會(huì)屬性是不夠的，因?yàn)樗辉试S為瀏覽器指定一個(gè)圖像文件。但是通過(guò)添加srcset和大小屬性，我們可以指定相同圖像和媒體條件的更多版本，以便瀏覽器可以選擇顯示哪一個(gè)。

讓我們看一個(gè)響應(yīng)圖像的簡(jiǎn)單示例，并理解每個(gè)屬性:

% 3c img src = " Image-desktop . webp " srcset = " Image-mobile . webp 360 w，image-tablet.webp 760w，Image-desktop . webp 1024 w " size = "(max-width:1024 px)calc(100 VW-4 rem)，1024px" alt="Image為3個(gè)視窗提供3種不同的尺寸" %3E

• 科學(xué)研究委員會(huì)
  我們必須始終添加科學(xué)研究委員會(huì)屬性添加到我們的圖像中，以防瀏覽器不支持srcset和大小屬性。這科學(xué)研究委員會(huì)將作為后備，因此添加一個(gè)圖像足夠大在大多數(shù)設(shè)備上工作是至關(guān)重要的。
• srcset
  這srcset屬性用于定義一個(gè)一組圖像及其相應(yīng)的寬度描述符(圖像寬度以單位表示w)，用逗號(hào)分隔，瀏覽器可以從中選擇。
  在上面的例子中，我們可以看到360瓦是一個(gè)寬度描述符，它告訴瀏覽器image-mobile.webp的寬度為360px。
• 大小[可選]
  這大小屬性確保響應(yīng)圖像根據(jù)其占據(jù)的寬度進(jìn)行加載而不是屏幕大小。
  它由逗號(hào)分隔的媒體查詢列表，指明圖像顯示時(shí)的寬度在特定條件下，以固定寬度值作為默認(rèn)值結(jié)束。

注意：?jiǎn)挝蝗绱蟊娖嚕╒olkswagen的縮寫）,全身長(zhǎng)的,雷姆,calc()，以及像素可以用在這個(gè)屬性中。唯一不能使用的單位是百分比(%).

一旦我們準(zhǔn)備好了我們的響應(yīng)圖像，它就是由瀏覽器使用指定的參數(shù)選擇正確的版本在……里srcset和大小屬性以及它所知道的關(guān)于用戶設(shè)備。

瀏覽器過(guò)程包括了解設(shè)備寬度、檢查大小屬性，然后從srcset對(duì)具有該寬度的圖像進(jìn)行成像。如果沒有該寬度的圖像，瀏覽器將選擇第一個(gè)比從大小(只要屏幕不是高密度)。

2.設(shè)備的像素密度更改修復(fù):不同分辨率的響應(yīng)圖像

解決方案是允許瀏覽器來(lái)選擇合適分辨率的圖像對(duì)于每個(gè)顯示密度。

為此，我們將使用srcset再次，但這一次，與密度描述符，用于根據(jù)設(shè)備像素密度提供不同的圖像，而不是圖像大小，也不需要指定大小屬性:

% 3c img src = " Image-1440 . webp " srcset = " Image-360 . webp 1x，image-720.webp 2x，image-1440.webp 3x" alt="Image為3種設(shè)備密度提供3種不同的分辨率" %3E

• 科學(xué)研究委員會(huì)
  擁有image-1440.webp作為后備版本。
• srcset
  在這種情況下srcset屬性用于為每個(gè)密度描述符1x、2x和3x指定一個(gè)圖像，告訴瀏覽器哪個(gè)圖像與每個(gè)像素密度相關(guān)聯(lián)。
  在這種情況下，如果設(shè)備的像素密度為2.0，瀏覽器將選擇圖像版本image-720.webp。

3.設(shè)計(jì)變更修復(fù):不同顯示器的不同圖像

解決方案是為每個(gè)屏幕尺寸提供具有不同比例或焦點(diǎn)的特別設(shè)計(jì)的圖像這種技術(shù)被稱為藝術(shù)指導(dǎo)。

藝術(shù)指導(dǎo)是將完全不同外觀的圖像提供給不同視窗尺寸以改善視覺呈現(xiàn)的實(shí)踐，而不是同一圖像的不同尺寸版本。

藝術(shù)指導(dǎo)技術(shù)通過(guò)% 3c圖片%3E標(biāo)簽，它包含幾個(gè)% 3c源%3E標(biāo)簽提供不同的圖像供瀏覽器選擇，并添加%3Cimg%3E作為退路:

% 3c picture % 3E % 3c source media = "(max-width:420 px)" srcset = " Image-mobile . webp " width = " 360 " height = " 280 " % 3E % 3c source media = "(max-width:960 px)" srcset = " Image-table t . webp " width = " 760 " height = " 600 " % 3E % 3c img src = " Image-desktop . webp " width = " 1024 " height = " 820 " alt = "圖像提供

• 畫
  不同圖像的包裝由0或更多% 3c源%3E和一個(gè)%3Cimg%3E。
• 來(lái)源
  每個(gè)% 3c源%3E標(biāo)簽指定了媒體資源，在本例中是一個(gè)圖像，其srcset屬性是該資源的文件路徑。
  放置的順序這個(gè)標(biāo)簽的事件。瀏覽器將讀取條件在中定義媒體每個(gè)的屬性% 3c源%3E 從上到下。如果其中任何一個(gè)為真，它將顯示該圖像，如果后續(xù)的為真，則不會(huì)被讀取。
  一個(gè)例子是media="(max-width: 960px)"第二次% 3c源%3E。如果視窗的寬度小于等于960像素但大于420像素，image-tablet.webp會(huì)顯示出來(lái)，但是如果小于420px，image-mobile.webp將會(huì)顯示。
• img
  當(dāng)瀏覽器不支持% 3c圖片%3E或者% 3c源%3E標(biāo)簽或者沒有滿足任何媒體查詢，則%3Cimg%3E標(biāo)記將作為后備值或默認(rèn)值，并將被加載。因此，在大多數(shù)情況下，添加一個(gè)合適的大小是至關(guān)重要的。

額外小費(fèi)：您可以將藝術(shù)指導(dǎo)技術(shù)與不同的分辨率相結(jié)合。

% 3c picture % 3E % 3c source media = "(max-width:420 px)" srcset = " Image-mobile . webp 1x，Image-mobile-2x . webp 2x " width = " 360 " height = " 280 " % 3E % 3c source media = "(max-width:960 px)" srcset = " Image-table t . webp 1x，Image-table t-2x . webp 2x " width = " 760 " height = " 600 " % 3E % 3c img src = " Image-desktop . web

通過(guò)同時(shí)利用寬度和像素密度，您可以擴(kuò)大顯示圖像源的標(biāo)準(zhǔn)。

注意：如果您想了解可以幫助您有效地裁剪和調(diào)整圖像大小的工具，您可以看看提供響應(yīng)圖像通過(guò)web.dev

5.在關(guān)鍵資源之后加載您的映像

默認(rèn)情況下，如果我們不指定圖像的優(yōu)先級(jí)，瀏覽器會(huì)在我們站點(diǎn)的關(guān)鍵資源之前加載它們，這會(huì)導(dǎo)致性能下降并增加互動(dòng)時(shí)間(TTI)。

解決辦法

幸運(yùn)的是，本地解決方案，如惰性裝載允許我們推遲用戶最初看不到的屏幕外圖像，并專注于最重要的圖像，即折疊上方的圖像。

為了使用這個(gè)本地解決方案，我們必須添加裝貨屬性添加到我們的圖像中懶惰的價(jià)值:

%3C！-本機(jī)惰性加載-% 3E % 3c img src = " image . webp " loading = " lazy " width = " 700 " height = " 500 " alt = " Loaded by appearance " % 3E

這裝貨屬性可以有兩個(gè)值:

• 懶惰的:推遲資源的加載，直到它到達(dá)視區(qū)。
• 渴望的:立即加載資源，不管它在哪里。
  雖然這是瀏覽器的默認(rèn)行為，但在您希望設(shè)置loading="lazy "自動(dòng)在你的所有圖像和手動(dòng)指定哪些將首先可見。

因?yàn)槲覀兊哪繕?biāo)是延遲不出現(xiàn)在文件夾上方的圖像，所以我們不能添加裝貨首先顯示的屬性。否則，我們可以設(shè)置loading= "渴望"并補(bǔ)充fetchpriority= "高"更快地裝載它們。

額外小費(fèi)：使用的響應(yīng)圖像% 3c圖片%3E元素也只能延遲加載，包括裝貨屬性到回退%3Cimg%3E元素。

% 3c picture %3E % 3c source media = "(max-width:420 px)" srcset = " image-mobile . webp " % 3E % 3c img src = " image-desktop . webp " loading = " lazy " % 3E % 3C/圖片% 3E

6.緩存您的圖像

如果經(jīng)常訪問(wèn)的圖像沒有被緩存，網(wǎng)站的性能會(huì)受到影響，因?yàn)閷?duì)圖像提出許多請(qǐng)求已經(jīng)加載到用戶系統(tǒng)中的。

用戶應(yīng)該能夠直接從他們的系統(tǒng)中查看圖像，而不是再次等待他們下載。

解決辦法

解決方案是存儲(chǔ)頻繁訪問(wèn)的圖像用戶的瀏覽器緩存，并使用CDN服務(wù)為您將它們緩存在服務(wù)器上。

注意：要了解緩存如何為用戶工作以及我們可以遵循的不同策略，我推薦這篇演講和文章”喜歡你的收藏“由薩姆·索羅古德。

一旦我們有了針對(duì)圖像帶給我們的每個(gè)問(wèn)題的優(yōu)化技術(shù)，就值得記住的是，對(duì)于圖像的可訪問(wèn)性和SEO，還有更多的事情需要考慮，比如中高音屬性、文件名及其元數(shù)據(jù)。

也就是說(shuō)，是時(shí)候看看圖像服務(wù)將如何為我們省去數(shù)百個(gè)令人頭疼的問(wèn)題了。我們?nèi)ツ抢锇桑?/p>