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

今天，在互聯網上創造內容是常態，而不是例外。建立個性化網站、將產品數字化并開始看到結果從未如此簡單。但是，當我們都開始大規模地創建內容，用越來越多的數據填充網絡，并存儲數百個zettabytes的內容時，會發生什么呢？

嗯，正是在這個時候，大品牌和托管平臺，如谷歌或Netlify，尋求解決方案來優化我們產生的數據，使網絡更輕，因此更快，促進措施和技術來提高我們網站的性能，并獎勵那些這樣做的人在他們的搜索引擎排名中的更好的位置。這就是為什么今天，網絡表現和在線表現一樣重要和時尚。

目錄:

• 什么是Web性能？
• 為什么圖像優化對Jamstack網站如此重要？
• 常見問題的修復
• 使用影像服務CDN的優勢
• 案例研究:Jamstack站點中的圖像組件
• 結論

什么是WEB性能？

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

如果你最大限度地減少加載時間，提高UX，讓你的網站更快，更多的用戶將能夠訪問你的網站，無論設備或互聯網連接，增加訪客保留，忠誠度和用戶滿意度，這將最終幫助你實現你的業務目標，并在搜索引擎中排名更好。

圖像與網頁表現的關系

很明顯，當我們想到內容時，首先想到的是文本。但是，如果我們把文本放在一邊，還有什么其他選擇呢？視頻？圖像？是的，圖像在今天的網絡上扮演著非常重要的角色，不僅僅是在100%專注于這項資產的平臺上，比如拼趣或者不濺，但在我們每天瀏覽的大多數網頁上。

根據2021年末的網絡年鑒，95.9%的網頁包含至少一個%3Cimg%3E標簽，99.9%的人至少產生過一次對圖像資源的請求。

—媒體、圖像、網絡年鑒2021章節

就像圖像在內容創作中的應用一樣，優化它們是提高頁面加載速度的關鍵并在盡可能短的時間內渲染，因為圖像比任何其他資源占用更多的字節。雖然在過去幾年中，由于使用了新的圖像優化技術，每頁圖像傳輸的大小已經減少，但仍有許多工作要做。

圖像是性能和UX的關鍵元素，從核心網絡生命衡量標準，例如最大容量涂料試圖識別給定頁面上最重要的折疊內容，證明了這一點。

根據在中進行的分析網絡年鑒的性能部分，的img標簽代表42%的LCP元素的網站，而71-79%的頁面有形象作為LCP元素，因為它們也可以使用CSS作為背景應用。這些數據清楚地表明，沒有經過良好優化的圖像，就不會有好的性能。

鑰匙以用戶為中心的指標通常取決于頁面上圖像的大小、數量、布局和加載優先級。這就是為什么我們的很多性能指南都在談論圖像優化。

—艾迪·奧斯馬尼

為什么圖像優化對JAMSTACK網站如此重要？

您可能已經知道，圖像優化是在理想條件下交付高質量圖像必須經歷的過程，有時需要借助圖像轉換API和全球內容交付網絡(CDN)使過程更簡單和可擴展。

雖然優化圖像在任何應用程序中都是必須的，但在Jamstack生態系統中，考慮到Jamstack架構的主要目標之一是提高web性能，優化圖像甚至更為重要。

Jamstack是一種架構方法，它將web體驗層從數據和業務邏輯中分離出來，提高了靈活性、可伸縮性、性能和可維護性。

—Jamstack.org

Jamstack站點是分離的:前端與后端是分離的，并且預先構建在高度優化的靜態頁面在被部署之前。但也不是一成不變的。通過使用JS和API與后端服務對話，它還允許動態內容。

你可能會問，圖片和靜態網站架構有什么關系？作為網頁年鑒地址圖片對Jamstack網站的影響,圖像是一個好的UX的主要瓶頸。大部分責任在于使用較舊的格式，如PNG和JPEG，而不是使用下一代格式，如WebP或AVIF，使用戶等待太長時間，并在核心網站生命指標中產生糟糕的分數。

但是，如果您擔心由于大型、優化不佳的圖像而無法獲得預期的性能，請不要擔心，因為這正是您閱讀本文的目的！

常見問題的修復

在大多數web性能測量工具中，例如網頁測試或者PageSpeed洞察，當我們生成關于網站狀態的報告時，我們可以找到與圖像相關的參數。這些參數涉及大小、格式、編碼等等，即我們的圖像有多優化。

在本節中，我們將列舉由于使用圖像而經常出現的問題，以及針對每一個問題的理論優化技術。

1.使用壓縮文件

想象一下在一個項目中工作，比如開發到，成百上千的人可以上傳內容到你的平臺而不被審查。在這種情況下，您的項目應該具有大型高分辨率圖像，因為不是每個人都知道帶寬消耗和加載速度的下降。

解決辦法

很明顯，我們想給我們的內容創作者自由，但是我們不能對將在我們的網站上顯示的圖像的分辨率或傳送和下載速度抱有僥幸心理。

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

1. 有損壓縮
   這種壓縮類型使用的算法刪除不太重要的數據以減小文件大小。
   當考慮使用這種有損技術時，我們必須記住兩件事:通過丟棄部分圖像信息，圖像質量將受到負面影響，如果有人用這種技術壓縮一張圖片，而我們想再次壓縮它，它會損失更多的質量。
2. 無損壓縮
   另一方面，無損壓縮壓縮數據而不影響圖像質量。
   這種技術允許圖像在隨后的壓縮中不損失質量。盡管如此，它還是會導致文件變大，這是我們在質量不能改變項目價值主張的情況下盡量避免的。

當決定使用這些技術時，最重要的是了解我們的用戶以及他們想從我們的網站上找到什么。如果我們考慮社交網絡，我們可以看到兩個明顯的趨勢，那些專注于文本和多媒體內容。

很明顯，對于以文本為中心的社交網絡來說，損失一點點圖像質量對他們來說不是一個大問題，并且可以減少五分之一的圖像文件大小，這意味著性能的大幅提高。因此，有損壓縮顯然是這種情況下的理想技術。然而，對于專注于圖像內容的社交網絡來說，最重要的事情是以優異的質量交付圖像，因此無損壓縮在這里會發揮更好的作用。

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

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

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

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

雖然近年來我們確實聽到了很多關于下一代格式的消息，如WebP、AVIF或JPEG XL，但仍然令人驚訝的是許多網站沒有遷移到這些格式并繼續下去提供了差的UX和差的性能結果。

解決辦法

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

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

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

— Addy Osmani(圖像優化專家)

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

• WebP

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

它的優點是跨大多數現代瀏覽器的統一支持，其無損8位透明通道和有損RGB透明，支持各種類型的元數據和動畫。另一方面，它不支持HDR或寬色域圖像，也不支持漸進解碼。

• AVIF

它是一種開源的AV1圖像文件格式以更好的有損和無損壓縮方式存儲靜態和動態圖像比目前網絡上最流行的格式，提供了50%的文件大小比JPEG節省。它與...直接競爭JPEG XL，其壓縮質量相似，但功能更多。

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

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

請記住，無論您選擇哪種格式，如果您想要一個有效的結果，您必須從最佳質量的主圖像生成壓縮文件。

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

%3C圖片%3E %3C！-如果不支持AVIF，將呈現WebP。-% 3E % 3c source srcset = " img/image . avif " type = " image/avif " % 3E % 3C！-如果不支持WebP，將呈現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.指定尺寸

當寬度和高度尚未添加屬性到%3Cimg%3E標簽，瀏覽器無法計算圖像的長寬比，因此沒有保留正確大小的占位符框。這會導致圖像加載時的布局變化，從而導致性能和可用性問題。

解決辦法

作為開發人員，我們有能力提高UX，減少布局變化。我們已經完成了一部分，通過添加寬度和高度對著圖像。

乍一看，這似乎是一個簡單的任務，但在后臺，瀏覽器在不同的場景中計算這些圖像的大小是一項繁瑣的工作:

• 用于在響應式設計中調整大小的圖像。

如果我們有一個響應式設計，我們會希望圖像保持在容器的邊緣，使用下面的CSS來實現:

img {最大寬度:100%；高度:自動；}

為了讓瀏覽器在加載前計算圖像的長寬比和正確大小，我們的%3Cimg%3E標記必須包含定義的高度和寬度當我們在CSS中指定高度(或寬度)以及相反的屬性width(或height)為auto時。

如果沒有高度中的屬性%3Cimg%3E，上面的CSS最初將高度設置為0，因此當圖像加載時會有內容移動。

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

• 對于可以改變長寬比的響應圖像。

在Chromium的最新版本中，您可以設置寬度和高度屬性打開% 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 = "不同縱橫比的響應圖像。"%3E % 3C/圖片% 3E

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

4.為所有設備優化圖像，并適當調整它們的大小

通常，有了CSS，我們就有了讓我們的圖像占據我們想要的空間的超能力；問題是所有超級大國都負有重大責任。如果我們縮放一個圖像，而之前沒有針對該用例進行優化，我們將使瀏覽器加載一個不合適大小的圖像從而惡化了裝載時間。

當我們談到未針對顯示圖像的設備和/或視窗進行優化的圖像時，有三種不同的情況:

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

解決辦法

幸運的是，今天我們有響應圖像技術來解決上面列出的三個問題，通過向瀏覽器提供每個圖像在大小、分辨率和/或設計上的不同版本，以便他們根據用戶的屏幕大小和/或設備特征來確定加載哪個圖像。

現在讓我們看看這些解決方案是如何在每種情況下用HTML實現的:

1.分辨率更改修復:不同尺寸的響應圖像

解決方案是正確調整原始圖像的大小根據視口大小。

為此，請使用%3Cimg%3E用標記科學研究委員會屬性是不夠的，因為它只允許為瀏覽器指定一個圖像文件。但是通過添加srcset和大小屬性，我們可以指定相同圖像和媒體條件的更多版本，以便瀏覽器可以選擇顯示哪一個。

讓我們看一個響應圖像的簡單示例，并理解每個屬性:

% 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個視窗提供3種不同的尺寸" %3E

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

注意：單位如大眾汽車（Volkswagen的縮寫）,全身長的,雷姆,calc()，以及像素可以用在這個屬性中。唯一不能使用的單位是百分比(%).

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

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

2.設備的像素密度更改修復:不同分辨率的響應圖像

解決方案是允許瀏覽器來選擇合適分辨率的圖像對于每個顯示密度。

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

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

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

3.設計變更修復:不同顯示器的不同圖像

解決方案是為每個屏幕尺寸提供具有不同比例或焦點的特別設計的圖像這種技術被稱為藝術指導。

藝術指導是將完全不同外觀的圖像提供給不同視窗尺寸以改善視覺呈現的實踐，而不是同一圖像的不同尺寸版本。

藝術指導技術通過% 3c圖片%3E標簽，它包含幾個% 3c源%3E標簽提供不同的圖像供瀏覽器選擇，并添加%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和一個%3Cimg%3E。
• 來源
  每個% 3c源%3E標簽指定了媒體資源，在本例中是一個圖像，其srcset屬性是該資源的文件路徑。
  放置的順序這個標簽的事件。瀏覽器將讀取條件在中定義媒體每個的屬性% 3c源%3E 從上到下。如果其中任何一個為真，它將顯示該圖像，如果后續的為真，則不會被讀取。
  一個例子是media="(max-width: 960px)"第二次% 3c源%3E。如果視窗的寬度小于等于960像素但大于420像素，image-tablet.webp會顯示出來，但是如果小于420px，image-mobile.webp將會顯示。
• img
  當瀏覽器不支持% 3c圖片%3E或者% 3c源%3E標簽或者沒有滿足任何媒體查詢，則%3Cimg%3E標記將作為后備值或默認值，并將被加載。因此，在大多數情況下，添加一個合適的大小是至關重要的。

額外小費：您可以將藝術指導技術與不同的分辨率相結合。

% 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

通過同時利用寬度和像素密度，您可以擴大顯示圖像源的標準。

注意：如果您想了解可以幫助您有效地裁剪和調整圖像大小的工具，您可以看看提供響應圖像通過web.dev

5.在關鍵資源之后加載您的映像

默認情況下，如果我們不指定圖像的優先級，瀏覽器會在我們站點的關鍵資源之前加載它們，這會導致性能下降并增加互動時間(TTI)。

解決辦法

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

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

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

這裝貨屬性可以有兩個值:

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

因為我們的目標是延遲不出現在文件夾上方的圖像，所以我們不能添加裝貨首先顯示的屬性。否則，我們可以設置loading= "渴望"并補充fetchpriority= "高"更快地裝載它們。

額外小費：使用的響應圖像% 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.緩存您的圖像

如果經常訪問的圖像沒有被緩存，網站的性能會受到影響，因為將對圖像提出許多請求已經加載到用戶系統中的。

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

解決辦法

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

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

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

也就是說，是時候看看圖像服務將如何為我們省去數百個令人頭疼的問題了。我們去那里吧！