聊聊前端圖片的格式和優化

前言

在當前的 web 開發過程中, 圖片的使用是一種重要的功能

本期就來聊聊, 開發中的圖片以及我們如何優化圖片

圖片的類型以及對比

位圖

位圖的特點是可以表現色彩的變化和顏色的細微過渡，產生逼真的效果，缺點是在保存時需要記錄每一個像素的位置和顏色值，佔用較大的存儲空間。

位圖的文件類型很多，如.bmp、.pcx、.gif、.jpg、.tif、PS的psd等；

矢量圖

矢量圖就像用幾何圖形來描述一幅圖，在矢量圖放大時，我們所記錄的幾何圖形的各種角度、形狀等並沒有改變，所以無論是放大還是縮小，都不會影響矢量圖的清晰度。

矢量圖形格式也很多，如AdobeIllustrator的.AI、.EPS和SVG、AutoCAD的.dwg和dxf、Corel DRAW的.cdr等。

彩色深度

彩色深度標準通常有以下幾種：

8位色，每個像素所能顯示的彩色數爲2的8次方，即256種顏色。
16位增強色，16位彩色，每個像素所能顯示的彩色數爲2的16次方，即65536種顏色。
24位真彩色，每個像素所能顯示的彩色數爲24位，即2的24次方，約1680萬種顏色。
32位真彩色，即在24位真彩色圖像的基礎上再增加一個表示圖像透明度信息的Alpha通道。
32位真彩色並非是2的32次方的色數，它其實也是1677萬多色，不過它增加了256階顏色的灰度,爲了方便稱呼，就規定它爲32位色

圖片的壓縮

無壓縮
有損壓縮
無損壓縮

無壓縮

無壓縮的圖片格式不對圖片數據進行壓縮處理，能準確地呈現原圖片。例如 BMP 格式的圖片。

有損壓縮

指在壓縮文件大小的過程中，損失了一部分圖片的信息，也即降低了圖片的質量（即圖片被壓糊了），並且這種損失是不可逆的。

常見的有損壓縮手段是按照一定的算法將臨近的像素點進行合併。壓縮算法不會對圖片所有的數據進行編碼壓縮，而是在壓縮的時候，去除了人眼無法識別的圖片細節。因此有損壓縮可以在同等圖片質量的情況下大幅降低圖片的體積。例如jpg格式的圖片使用的就是有損壓縮。

無損壓縮

在壓縮圖片的過程中，圖片的質量沒有任何損耗。我們任何時候都可以從無損壓縮過的圖片中恢復出原來的信息。

壓縮算法對圖片的所有的數據進行編碼壓縮，能在保證圖片的質量的同時降低圖片的體積。例如png、gif使用的就是無損壓縮。

圖片格式

gif

無損壓縮、索引色、透明、動畫

GIF(Graphics Interchange Format) 的原義是“圖像互換格式”，是一種基於 LZW 算法連續色調的無損的基於索引色的壓縮格式。

優勢

優秀的壓縮算法使其在一定程度上保證圖像質量的同時將體積變得很小。
可插入多幀，從而實現動畫效果。
可設置透明色以產生對象浮現於背景之上的效果。

缺點

由於採用了 8 位壓縮，最多隻能處理 256 種顏色，故不宜應用於真彩色(文末的附錄有解釋)圖片。

png

無損壓縮、索引色、透明、動畫

便攜式網絡圖形（簡稱 PNG，英語全稱：Portable Network Graphics）。PNG 能夠提供長度比 GIF 小30%的無損壓縮圖像文件。

png支持8位、24位、32位3種，我們通常叫它們png8、png24、png32。

PNG 同樣使用了無損壓縮格式，事實上 PNG 的開發就是因爲 GIF 所使用的無損壓縮格式專利問題而誕生的。

優點

不失真的情況下儘可能壓縮圖像文件的大小
像素豐富
支持透明（alpha通道）

缺點

文件大

jeg/jpeg

有損壓縮、直接色、適合大圖、體積小

JPEG 是一種很典型的使用有損壓縮圖像格式，也就是說使用者每次進行 JPEG 的存檔動作後，圖檔的一些內容細節都會遭到永久性的破壞，尤其是使用過高的壓縮比例，將使最終解壓縮後恢復的圖像質量明顯降低，如果追求高品質圖像，不宜採用過高壓縮比例。

Baseline JPEG

Baseline JPEG 文件存儲方式是按從上到下的掃描方式，把每一行順序的保存在 JPEG 文件中。打開這個文件顯示它的內容時，數據將按照存儲時的順序從上到下一行一行的被顯示出來，直到所有的數據都被讀完，就完成了整張圖片的顯示。

progressive jpeg

和 Baseline 一遍掃描不同，Progressive JPEG 文件包含多次掃描，這些掃描順尋的存儲在 JPEG 文件中。打開文件過程中，會先顯示整個圖片的模糊輪廓，隨着掃描次數的增加，圖片變得越來越清晰。

漸進式圖片帶來的好處是可以讓用戶在沒有下載完圖片就可以看到最終圖像的大致輪廓，一定程度上可以提升用戶體驗（瀑布流的網站建議還是使用標準型的）。

優點

可以支持 24bit 真彩色，普遍應用於需要連續色調的圖像如色彩豐富的圖片、照片等；
可利用可變的壓縮比以控制文件大小；
支持交錯（對於漸近式 JPEG 文件）；

缺點

JPEG 不適合用來存儲企業 Logo、線框類的圖。因爲有損壓縮會導致圖片模糊，而直接色的選用，又會導致圖片文件較GIF更大。
有損耗壓縮會使原始圖片數據質量下降。
JPEG 圖像不支持透明度處理，透明圖片需要召喚 PNG 來呈現。

JPEG XR（瞭解即可）

JPEG XR（全稱JPEG extended range）是一種連續色調靜止圖像壓縮算法和文件格式，基於由Microsoft開發的HD Photo（原稱Windows Media Photo），即原來由微軟開發並持有專利的圖像格式。它支持有損數據壓縮以及無損數據壓縮，並且是微軟的XPS文檔的首選圖像格式。目前支持的軟件包括.NET Framework（3.0 or newer），Windows Vista/Windows 7、Internet Explorer 9，Flashplayer 11等。

微軟希望 JPEG XR 能夠廣泛採用,但是替代 JPEG 格式仍面臨很大挑戰。

JPEG-XL格式（瞭解即可）

JPEG-XL格式是一種免版稅的位圖文件格式，支持有損和無損壓縮。它旨在超越現有的位圖格式，併成爲它們的通用替代。

JPEG-XL文件格式2021年才完成標準化，編碼系統在2022年早些時候得到確認，但它自2020年底以來一直被凍結而沒有被正式採用。如無意外，JPEG XL 格式將在 Chrome 110 版本中被棄用。

APNG

APNG（Animated Portable Network Graphics）顧名思義是基於 PNG 格式擴展的一種動畫格式，增加了對動畫圖像的支持，同時加入了 24 位圖像和 8 位 Alpha 透明度的支持，這意味着動畫將擁有更好的質量，其誕生的目的是爲了替代老舊的 GIF 格式，但它目前並沒有獲得 PNG 組織官方的認可。

這是目前的支持度, 主流瀏覽器都已經支持了

優點相對GIF來說

色彩豐富
支持透明
向下兼容 PNG
支持動畫

缺點

生成比較繁瑣
未標準化

webp

WebP 是谷歌開發的一種新圖片格式，WebP 是同時支持有損和無損壓縮的、使用直接色的、點陣圖。

在無損壓縮的情況下，相同質量的 WebP 圖片，文件大小要比 PNG 小26%；
在有損壓縮的情況下，具有相同圖片精度的 WebP 圖片，文件大小要比 JPEG 小 25%~34%；
WebP 圖片格式支持圖片透明度，一個無損壓縮的 WebP 圖片，如果要支持透明度只需要 22% 的格外文件大小。

目前這個時間點(2022.10), webp 的兼容性是足夠的, 可以直接使用:

優點

同等質量更小
壓縮之後質量無明顯變化
支持無損圖像
支持動畫

缺點

對於低版本瀏覽器的兼容不好(問題不算大, 有降級方案)

svg

無損、矢量圖、體積小、不失真、兼容性好

SVG是一種用 XML 定義的語言，用來描述二維矢量及矢量/柵格圖形。SVG提供了3種類型的圖形對象：矢量圖形（例如：由直線和曲線組成的路徑）、圖象、文本。

優點

SVG 與 JPEG 和 GIF 圖像比起來，尺寸更小，且可壓縮性更強。
SVG 是可伸縮的。
SVG 圖像中的文本是可選的，同時也是可搜索的（很適合製作地圖）。
SVG 可以與 JavaScript 技術一起運行
SVG圖形格式支持多種濾鏡和特殊效果，在不改變圖像內容的前提下可以實現位圖格式中類似文字陰影的效果。
SVG圖形格式可以用來動態生成圖形。例如，可用 SVG 動態生成具有交互功能的地圖，嵌入網頁中，並顯示給終端用戶。

缺點

SVG複雜度高會減慢渲染速度, 渲染成本比較高，對於性能有影響。
SVG 的學習成本比較高，因爲它是可編程的。

avif

AVIF 是由 AOMedia（開放媒體聯盟）在 2019 年發佈，基於 AV1 視頻編解碼器（源自谷歌的 VP9 ），由 Netflix 主導推動的圖片格式。如果你常常使用 Netflix 的客戶端，你就已經正在使用 AVIF 了。
這是當前時間點(2022.11), 瀏覽器的兼容性, 比例差不多和 19 年左右的 webp 一樣

目前可搭配的 polyfill: https://www.npmjs.com/package/avif.js

可以使其兼容性達到以下水平:

Chrome 57+
Firefox 53+
Edge 17+
Safari 11+

優點

avif，本身是開源的，同時無專利費用問題，可以免費商用
當前壓縮比(相對於 webp 來說更高)非常高、功能比較多、色域廣的圖片格式
google,amazon,netflix,microsoft,apple 都參與到開發組織，以後廣泛性兼容性就有了保障

目前有一些新的產品已經用上了這一圖片技術, 相信在未來的幾年內, 此格式的圖片會有更好地發展

HEIF（瞭解即可）

HEIF 是 MPEG（動態影像專家組）於 2015 年發佈，基於 HEVC (H.265) 視頻編解碼器。HEIF 的特點是支持非破壞新編輯和動畫、音頻（蘋果的 LivePhoto）。HEIF 目前在蘋果設備上被廣泛使用，iPhone 相機保存的照片已經是 HEIF 了。但是蘋果的 Safari 瀏覽器並不支持，原因應該是它使用的 HEVC (H.265) 的專利限制。

WebP 2（瞭解即可）

WebP2 是谷歌在 2021 年公開的 WebP 繼任者，主要目標是讓其有損壓縮能力達到 AVIF ，並且增加 HDR10、快速解碼等 WebP 缺失的功能，其無損壓縮也有提升

小結

這裏是常用圖片的小結

針對於較新技術的對比

AVIF 有損壓縮效果最好，無損壓縮非常糟糕。編碼速度很慢。
JPEG XL 無損壓縮效果最好，有損壓縮較 AVIF 有些許差距。編碼速度快。
WebP 2 無損壓縮效果優秀，有損壓縮的上限達到了 AVIF 的水平，但下限很低，不穩定。編碼速度很慢。

data url

通過圖片的 base64 編碼, 將一副圖片數據編碼成一串字符串，使用該字符串代替圖像地址，圖片隨着 HTML 的下載同時下載到本地，不再單獨消耗一個http來請求圖片

當然他也有缺點, 不適用於中,大型的圖片, 圖片的解析會消耗更多的性能, 並且相對於其他圖片格式，要大至少1/3

懶加載

說起圖片的懶加載, 這是一個老生常談的話題了

一種方案是: 開始是 loading 圖片佔位, 通過 API 來監聽圖片位置是否在視口中, 距離視口多少距離時, 纔開始加載圖片

這裏說的 API, 可以是 Intersection Observer 時間也可以使用 scroll 和 resize 事件進行處理

現在介紹一下另一種方案: img 的原生屬性: loading:

具體可查看: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img

至於加載的視口距離閾值，目前是沒辦法修改的，chrome 會根據當前的網絡情況設置對應的閾值。

對於2020 年 7 月以後的 chrome版本，4G 網絡下的視口距離閾值是 1250 像素，3G 網絡下是 2500 像素。

需要注意的是我們也需要手動指定圖片的寬高，否則我們可能會看到佈局發生偏移。一個完整的代碼實例如下：

這裏引用一篇文章裏的 demo: https://mathiasbynens.be/demo/img-loading-lazy

目前來說兼容性也還可以:

不支持加載屬性的瀏覽器將忽略它的存在。該屬性對它們沒有負面影響。

使用 srcset 和 sizes 屬性

在支持 srcset 的用戶代理中，當使用 w 描述符時，src 屬性會被忽略。當匹配了媒體條件 (max-width: 600px) 時，圖像將寬 200px，否則寬 50vw（視圖寬度的 50%）。

 <img src="clock-demo-200px.png"
      alt="Clock"
      srcset="clock-demo-200px.png 200w,
          clock-demo-400px.png 400w"
      sizes="(max-width: 600px) 200px, 50vw">

查看官方的例子: 點此查看

若要看到大小調整的效果，請打開單獨的頁面查看示例，以便拖動窗口，調整內容區域的大小。

如果想知道 200w 和 400w, 的具體含義, 可以查看官方文檔

總結

本文主要介紹了圖片的幾種基本類型, 以及最新的幾種, 分別比較了其中類型的一些優缺點

從使用率來說 png 仍然是最多的, 同時 webp 的使用率比以前擴大了許多, 後面又會出現一些新的格式, 他們有着更好的性能以及更小的尺寸

web端上來說, 未來圖片的發展還是依靠瀏覽器的兼容發展, 如果用戶使用的瀏覽器一直是最新的, 那我們就一直更新, 但是很遺憾的是, 現在大多數請求下都要考慮降級處理(一般 OSS 服務會自動降級),
這是目前新格式發展的最大障礙