這篇文章得到了我們親愛(ài)的朋友們的支持童話世界，一個(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ù)字化并開(kāi)始看到結(jié)果從未如此簡(jiǎn)單。但是，當(dāng)我們都開(kāi)始大規(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)站如此重要？
• 常見(jiàn)問(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ù)清楚地表明，沒(méi)有經(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)檫@正是您閱讀本文的目的！

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

解決辦法

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

解決方法是優(yōu)化我們的圖像，壓縮它們并減小它們的尺寸幾乎沒(méi)有質(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)了開(kāi)源工具，您可以使用這些工具將圖像壓縮添加到您的開(kā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í)聽(tīng)到了很多關(guān)于下一代格式的消息，如WebP、AVIF或JPEG XL，但仍然令人驚訝的是許多網(wǎng)站沒(méi)有遷移到這些格式并繼續(xù)下去提供了差的UX和差的性能結(jié)果。

解決辦法

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

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

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

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

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

• WebP

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

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

• AVIF

它是一種開(kāi)源的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)畫(huà)和圖形元素在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)寬比，因此沒(méi)有保留正確大小的占位符框。這會(huì)導(dǎo)致圖像加載時(shí)的布局變化，從而導(dǎo)致性能和可用性問(wèn)題。

解決辦法

作為開(kāi)發(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í)。

如果沒(méi)有高度中的屬性%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è)置寬度和高度屬性打開(kāi)% 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è)置圖像的高度和寬度也很重要“巴里·波拉德寫(xiě)的。

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

通常，有了CSS，我們就有了讓我們的圖像占據(jù)我們想要的空間的超能力；問(wèn)題是所有超級(jí)大國(guó)都負(fù)有重大責(zé)任。如果我們縮放一個(gè)圖像，而之前沒(méi)有針對(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é)的圖像由于沒(méi)有提供突出顯示它們的裁剪圖像而在其他屏幕尺寸上失去其用途時(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)挝蝗绱蟊娖?chē)（Volkswagen的縮寫(xiě)）,全身長(zhǎng)的,雷姆,calc()，以及像素可以用在這個(gè)屬性中。唯一不能使用的單位是百分比(%).

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

瀏覽器過(guò)程包括了解設(shè)備寬度、檢查大小屬性，然后從srcset對(duì)具有該寬度的圖像進(jìn)行成像。如果沒(méi)有該寬度的圖像，瀏覽器將選擇第一個(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)是將完全不同外觀的圖像提供給不同視窗尺寸以改善視覺(jué)呈現(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 = "圖像提供

• 畫(huà)
  不同圖像的包裝由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)簽或者沒(méi)有滿足任何媒體查詢，則%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)指定哪些將首先可見(jiàn)。

因?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)的圖像沒(méi)有被緩存，網(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>