在當今網際網路時代，網站性能已經成為使用者體驗的關鍵之一。據 httparchive 最新提供的 2024年4月 Page Weight（頁面權重）相關資料展示：圖檔資源占據了整個網頁資源的 57%。比其他資源類型如 CSS、JavaScript、字型 等資源類型的總和還要多。
在Web開發中，“Page Weight（頁面權重）”是指網頁的總體大小，通常以位元組（bytes）或者更常見的是以“千位元組”（kilobytes，KB）或“兆位元組”（megabytes，MB）來衡量。Page Weight 是一個重要的性能名額，它直接影響到網頁的加載速度和使用者體驗。
與此同時，根據過去一年内的圖檔請求量與圖檔位元組的資料顯示，圖檔請求量在幾乎不變的情況下，圖檔位元組卻在不斷增加。雖然網頁内的平均圖檔請求量幾乎不變，網頁内的 圖檔的大小卻增加了約 `5%`。
這意味着，随着硬體裝置與網絡速度的不斷提升，網頁的圖檔正在變得越來越大，在提高網站的性能的過程中,優化圖檔資源應作為我們的首要任務之一。在本文中，我們将讨論圖檔格式、壓縮技術以及評估圖檔性能的名額。
一、優先考慮替代方案: CSS、SVG 及 WEB Font
在Web開發中，有時候我們可以使用其他替代方案來替代圖檔，這樣可以減少頁面的加載時間。以下是一些常見的替代方案：
替代方案 1：CSS
使用 CSS 可以輕松地建立簡單的圖形和圖案，如純色背景、漸變和形狀。這些樣式可以通過 CSS 屬性直接應用到 HTML 元素上，而無需額外的圖檔資源，進而減少了 HTTP 請求和頁面加載時間。
替代方案 2：SVG
SVG 是一種矢量圖形格式，它以 XML 格式存儲圖形資訊，可以通過 CSS 和 JavaScript 進行控制和動态修改。SVG 圖形可以無限放大而不失真，适用于各種分辨率和螢幕尺寸，是以非常适合用于圖示、簡單的圖形和動畫。
替代方案 3：WEB Font
使用 Web 字型可以将特定字型應用到網頁文本中，而無需将文本呈現為圖檔。這樣可以節省帶寬，并允許文本保持清晰度和可選的可通路性。常見的 Web 字型格式包括 WOFF（Web Open Font Format）和WOFF2，它們支援多種字型樣式和語言，并能夠與 CSS 配合使用。
替代方案 4：Icon Fonts
Icon Fonts 是一種将圖示呈現為字型形式的替代方案。它們通常是包含了各種圖示的字型檔案，可以通過 CSS 控制在網頁中顯示。
二、圖檔格式
在Web開發中，選擇合适的圖檔格式至關重要。不同的圖檔格式具有不同的特點和适用場景，正确選擇可以提高頁面加載速度、優化使用者體驗并減少帶寬消耗。
APNG(image/apng)
動态可移植網絡圖形，是無損動畫序列的良好選擇（GIF 性能較差）。AVIF 和 WebP 性能更好，但浏覽器支援較少。以下浏覽器支援：Chrome、Edge、Firefox、Opera、Safari。
AVIF (image/avif)
AVIF 圖像檔案格式，由于其性能高，且無需版稅，是圖像和動畫圖像的理想選擇。與 PNG 或 JPEG 相比，它的壓縮效果更好，支援更高的色深、動畫幀、透明度等。請注意，在使用 AVIF 時，應包含浏覽器支援更好的回倒退式（也就是說，要使用 <picture> 元素）。以下浏覽器支援：Chrome、Firefox（隻支援靜态圖，動态圖尚未實作）、Opera、Safari。
GIF (image/gif)
圖像互換格式，是簡單圖像和動畫的不錯選擇。無損和有索引的靜态圖像首選 PNG，動畫序列可考慮 WebP、AVIF 或 APNG。以下浏覽器支援：Chrome、Edge、Firefox、IE、Opera、Safari。
JPEG (image/jpeg)
聯合圖像專家小組圖像，靜态圖像有損壓縮的理想選擇（目前最流行）。如果需要更精确地再現圖像，則首選 PNG；如果需要更好的再現效果和更高的壓縮率，則首選 WebP/AVIF。以下浏覽器支援：Chrome、Edge、Firefox、IE、Opera、Safari。
PNG (image/png)
便攜式網絡圖形，與 JPEG 相比，PNG 能更精确地再現源圖像，或在需要透明的情況下更受青睐。WebP/AVIF 可提供更好的壓縮和再現效果，但浏覽器的支援比較有限。以下浏覽器支援：Chrome、Edge、Firefox、IE、Opera、Safari。
WebP (image/webp)
Web 圖像格式，是靜止圖像和動畫圖像的絕佳選擇。WebP 的壓縮效果比 PNG 或 JPEG 好得多，而且支援更高的色深、動畫幀和透明度等。AVIF 的壓縮效果稍好，但在浏覽器中的支援度不高，而且不支援漸進式渲染。以下浏覽器支援：Chrome、Edge、Firefox、Opera、Safari。
資訊來源：
[MDN Web Docs]
(https://developer.mozilla.org/zh-CN/docs/Web/Media/Formats/Image_types)
三、圖檔壓縮
在Web開發中，圖檔壓縮是一種重要的優化技術，它可以減少圖檔的檔案大小，進而減少頁面的加載時間。
有損壓縮
有損壓縮是指在壓縮過程中會丢失部分圖像資訊，進而減小檔案大小。這種壓縮方式适用于對圖像品質要求不是特别高的場景，例如網頁上的大部分圖檔。常見的有損壓縮算法包括JPEG、WebP（有損模式）等。有損壓縮可以顯著地減小檔案大小，但可能會導緻圖檔出現輕微的失真。
無損壓縮
無損壓縮是指在壓縮過程中不會丢失圖像資訊，進而保持圖檔品質的同時減小檔案大小。這種壓縮方式适用于對圖像品質要求較高的場景，例如圖示、線條圖等。常見的無損壓縮算法包括PNG、WebP（無損模式）等。雖然無損壓縮無法達到有損壓縮那樣極緻的壓縮效果，但能夠保持圖像品質的完整性。
壓縮工具
在Web開發中，有很多優秀的圖檔壓縮工具可以幫助我們壓縮圖檔，進而減小檔案大小。以下是一些常用的圖檔壓縮工具：
- TinyPNG (https://tinypng.com/)：這是一款線上圖檔壓縮工具，可以将 PNG 和 JPEG 圖檔壓縮到更小的檔案大小，而不影響圖像品質。它提供了簡單易用的界面，讓使用者可以快速上傳和壓縮圖檔。
- Squoosh (https://squoosh.app/)：Squoosh 是 Google 開發的一款圖檔壓縮工具，可以在浏覽器中快速壓縮圖檔。它支援多種壓縮算法和參數設定，使用者可以根據需要調整壓縮品質和檔案大小，以實作最佳的壓縮效果。
- imagemin (https://www.npmjs.com/package/imagemin): imagemin是一個用于壓縮圖檔的npm包，它支援多種圖檔格式，包括PNG、JPEG、GIF、SVG等。通過使用不同的插件，可以輕松地內建到建構流程中，實作自動化壓縮圖檔的目的。
- tinify (https://www.npmjs.com/package/tinify)：tinify是一個用于壓縮JPEG和PNG圖檔的npm包，它提供了簡單易用的API，可以通過Node.js代碼調用Tinify的服務進行圖檔壓縮。雖然它是一個付費服務，但提供了免費的API配額，适合小型項目和個人開發者使用。
四、性能評估名額
在Web開發中，我們可以使用一些工具來評估圖檔的性能，進而優化圖檔資源。以下是一些常用的圖檔性能評估名額：
檔案大小
圖檔檔案大小直接影響了網頁的加載速度。較大的圖檔檔案需要更長的時間下載下傳，進而延長了網頁的加載時間。是以，盡量減小圖檔的檔案大小是優化圖檔性能的首要任務之一。通常情況下，我們可以通過壓縮圖檔、選擇适當的圖檔格式以及優化圖檔品質來減小檔案大小。
圖檔尺寸
除了檔案大小外，圖檔的尺寸也會影響加載速度。過大的圖檔尺寸可能會導緻頁面内容的不必要的展示延遲，尤其是在移動裝置上。是以，確定圖檔尺寸适合在網頁中的顯示是至關重要的。通過調整圖檔尺寸，可以減少不必要的像素數量，進而降低圖檔檔案的大小和加載時間。
加載時間
圖檔加載時間是指從請求發送到圖檔完全呈現在使用者浏覽器中所需的時間。優化圖檔加載時間可以提高使用者體驗，并減少使用者的等待時間。常用的方法包括使用圖檔懶加載技術、延遲加載以及使用 CDN 加速圖檔加載等。
圖檔格式
選擇合适的圖檔格式對于優化圖檔性能至關重要。不同的圖檔格式具有不同的壓縮算法和透明度支援，是以在選擇圖檔格式時需要根據具體情況進行權衡。例如，JPEG 格式适用于照片和複雜圖像，而 PNG 格式适用于帶有透明背景的圖像。最新的圖檔格式如 WebP 和 AVIF 可以提供更好的壓縮率和品質，但在浏覽器支援方面可能存在一些限制。
視覺品質
除了優化圖檔的加載速度外，還需要注意保持圖檔的視覺品質。過度壓縮可能會導緻圖檔失真或模糊，進而影響使用者體驗。是以，在優化圖檔性能時，需要在保證檔案大小的前提下盡量保持圖檔的清晰度和細節。
相容性
最後，還需要考慮圖檔在不同裝置和浏覽器上的相容性。確定所選擇的圖檔格式和優化政策在各種浏覽器和作業系統上都能正常顯示和加載，以提供一緻的使用者體驗。
五、性能評估工具
Network
在浏覽器的開發者工具中，可以通過 Network 面闆檢視網站中的圖檔請求情況，包括請求時間、檔案大小、加載時間等資訊。通過分析這些資料，可以了解圖檔的加載性能，并進行相應的優化。
Lighthouse
Lighthouse 是一款由 Google 開發的網頁性能評估工具，可以幫助開發者評估網頁的性能、可通路性、最佳實踐等方面。在 Lighthouse 中，可以檢視網站中的圖檔性能名額，包括圖檔檔案大小、加載時間、格式選擇等資訊。通過 Lighthouse 的評估報告，可以了解網站中的圖檔優化情況，并提出相應的優化建議。
PageSpeed Insights
PageSpeed Inights ()是另一款由 Google 開發的網頁性能評估工具，可以幫助開發者評估網頁的性能，并提供優化建議。在 PageSpeed Insights 中，可以檢視網站中的圖檔性能名額，包括圖檔檔案大小、加載時間、格式選擇等資訊。通過 PageSpeed Insights 的評估報告，可以了解網站中的圖檔優化情況，并提出相應的優化建議。
六、總結
在當今網際網路時代，圖檔優化已經成為網站性能優化的重要環節。通過選擇合适的圖檔格式、壓縮圖檔檔案、優化圖檔加載時間等方法，可以有效提高網站的性能，優化使用者體驗。在Web開發中，我們應該重視圖檔優化，不斷學習和掌握圖檔優化的最佳實踐，以提高網站的性能和使用者體驗。
作者:之家-梁家玮
來源-微信公衆号:之家前端共享流
出處:https://mp.weixin.qq.com/s/O3WjpMvSsxwZIQsxFoomqw