選擇使用JPEG或PNG後備的照片和復(fù)雜圖像的WebP； 2.使用Squoosh或TinyPng等工具將圖像大小調(diào)整為最大顯示大小並壓縮； 3。使用帶有SRCSET和大小屬性的響應(yīng)式圖像； 4。啟用加載lazy加載=“懶惰”，並優(yōu)先考慮使用fetchPriority =“ high”的關(guān)鍵圖像； 5。通過支持格式轉(zhuǎn)換，調(diào)整和緩存的CDN傳遞圖像； 6。使用SVG進(jìn)行矢量圖形，並考慮漸進(jìn)的JPEG以獲得更好的性能 - 這種方法平衡了質(zhì)量和速度，從而大大改善了加載時(shí)間，用戶體驗(yàn)和SEO。

在網(wǎng)絡(luò)性能方面，圖像通常構(gòu)成頁面重量中最大的部分。正確優(yōu)化它們可以顯著改善負(fù)載時(shí)間，用戶體驗(yàn)和SEO。這是選擇正確格式和應(yīng)用有效技術(shù)的實(shí)用指南。

選擇正確的圖像格式

並非所有圖像格式都相等地創(chuàng)建。選擇正確的一個(gè)取決於內(nèi)容，質(zhì)量需求和瀏覽器支持。

• JPEG - 最適合帶有梯度的照片和圖像。
  它使用有損耗的壓縮，因此您可以通過最小的可見質(zhì)量損失大大減少文件大小。避免使用帶有文本或鋒利邊緣的圖形。

  

• PNG - 非常適合需要透明度或清晰細(xì)節(jié)的圖像（例如徽標(biāo)，圖標(biāo)或圖表）。
  使用無損壓縮，因此質(zhì)量保持較高，但文件尺寸大於JPEG。使用PNG-8以簡(jiǎn)化圖形來降低尺寸。

• WebP - 一種由Google開發(fā)的現(xiàn)代格式，支持有損和無損壓縮以及透明度。
  通常，比JPEG或PNG以類似的質(zhì)量提供25–35％的文件大小。在現(xiàn)代瀏覽器中得到廣泛支持。

  

• AVIF - 最新的競(jìng)爭(zhēng)者，比WebP提供更好的壓縮（最多小50％）。
  支持HDR，寬色域和動(dòng)畫。瀏覽器支持正在增長(zhǎng)，但尚未普遍。

• SVG - 非常適合圖形，徽標(biāo)和插圖等矢量圖形。
  獨(dú)立於分辨率的，尺寸較小，可以用CSS進(jìn)行樣式。始終將SVG用於不需要柵格格式的簡(jiǎn)單圖形。

專家提示：當(dāng)瀏覽器支持允許時(shí)，將WebP用作照片和復(fù)雜圖像的默認(rèn)選擇。提供JPEG或PNG作為較舊瀏覽器的後備。

調(diào)整和壓縮圖像大小

上傳全分辨率圖像並使用HTML/CSS浪費(fèi)帶寬進(jìn)行縮放。

• 調(diào)整到最大的維度
  如果您的網(wǎng)站以1200px的最大寬度顯示圖像，請(qǐng)不要使用4000px照片。在上傳之前調(diào)整大小。

• 使用壓縮工具
  例如：

  • Squoosh （免費(fèi)，基於網(wǎng)絡(luò)）
  • ImageOptim（MacOS）
  • tinypng（在線）
  • Photoshop“保存Web”可以減小文件大小而不會(huì)明顯質(zhì)量損失。

• 手動(dòng)調(diào)整壓縮設(shè)置
  對(duì)於JPEG，目標(biāo)質(zhì)量為60-80％。對(duì)於PNG，請(qǐng)使用諸如PNGQUANT之類的工具來減少顏色深度和文件大小。

使用帶有srcset和sizes響應(yīng)式圖像

根據(jù)用戶的設(shè)備和屏幕尺寸提供適當(dāng)尺寸的圖像。

 <img src =“ image-400.jpg”
     srcset =“ Image-400.jpg 400W，
             Image-800.jpg 800W，
             Image-1200.jpg 1200W“
     尺寸=“（最大寬度：500px）100VW，50VW”
     alt =“響應(yīng)式圖像”>

這告訴瀏覽器根據(jù)視口寬度選擇最佳圖像，並在移動(dòng)設(shè)備上節(jié)省帶寬。

利用懶惰的裝載和現(xiàn)代交付

• 啟用懶惰加載
  現(xiàn)代瀏覽器本地支持它：

   <img src =“ photo.jpg” loading =“ lazy” alt =“ ...”>

  在用戶滾動(dòng)附近，折疊下方的圖像才不會(huì)加載。

• 使用與圖像優(yōu)化的CDN
  像Cloudinary，Imgix或AWS CloudFront這樣的服務(wù)可以：

  • 自動(dòng)轉(zhuǎn)換為WebP/AVIF
  • 調(diào)整按需調(diào)整大小
  • 全球壓縮和緩存圖像

• 考慮進(jìn)步的jpegs
  這些首先加載低質(zhì)量的版本並逐漸改進(jìn)，從而使用戶更快地感知到負(fù)載時(shí)間。

優(yōu)化圖像加載順序

優(yōu)先考慮圖像：

• 提前加載關(guān)鍵圖像，以fetchpriority="high" （如果支持）：

   <img src =“ hero.jpg” fetchPriority =“ high” alt =“英雄圖像”>

• 推遲非關(guān)鍵圖像。

另外，如果與內(nèi)容相關(guān)的話，請(qǐng)避免在CSS背景中嵌入大圖像 - 它們不能輕易地延遲加載。

---

優(yōu)化Web圖像不僅僅是縮小文件。這是關(guān)於選擇正確的格式，提供合適的尺寸，並使用現(xiàn)代技術(shù)來平衡質(zhì)量和性能。做對(duì)了，您的網(wǎng)站會(huì)感覺更快，更快。

基本上：在可以的情況下，請(qǐng)使用WebP，在上傳之前調(diào)整大小，提供響應(yīng)式版本，並讓瀏覽器用懶惰的負(fù)載進(jìn)行繁重的舉升。

以上是優(yōu)化網(wǎng)絡(luò)圖像：格式和技術(shù)的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！