這些表情包你有嗎？來 Battle 啊

2020 年 11 月 18 日
筆記

「能用表情包解決的問題，絕不多說一個字。」

「當不知道回復什麼的時候，甩過去一個表情包就好了。」

放眼望去，誰的 QQ/微信收藏中沒有幾頁代表性的表情包，那真的是 out 了。在當代網路社交生活中，當出現「只可意會不可言傳」的情緒和內涵時，表情包大概是最合適的載體。

常見的表情包有靜態圖片和動態圖片兩種。

靜態圖片最常見的格式是 jpg/png，動態圖片則是 gif。在平常工作生活中，不僅僅表情包，圖片在網頁設計中也是重中之重。

常見的三種圖片格式

圖片格式種類繁多，我們日常使用最多的圖片文件格式是 jpg、png 和 gif。這些格式由於與目前瀏覽器的兼容性，客戶端的網路速度以及用戶的普遍需求而成為最受歡迎的格式。

在了解這三種格式的圖片之前，我們需要先了解一個概念，就是圖片壓縮。

有損 vs 無損

圖片文件格式有可能會對圖片的文件大小進行不同程度的壓縮，圖片的壓縮分為有損壓縮和無損壓縮兩種。

有損壓縮：指在壓縮文件大小的過程中，損失了一部分圖片的資訊，也即降低了圖片的品質，並且這種損失是不可逆的，我們不可能從有一個有損壓縮過的圖片中恢復出原來的圖片。
無損壓縮：只在壓縮文件大小的過程中，圖片的品質沒有任何損耗。我們任何時候都可以從無損壓縮過的圖片中恢復出原來的資訊。

在了解這個簡單的情況後，我們詳細來看看這三種圖片格式的區別和特點。

JPEG 格式

JPEG（Joint Photographic Experts Group）即聯合影像專家組，是用於連續色調靜態影像壓縮的一種標準，文件後綴名為 .jpg 或 .jpeg，是最常用的影像文件格式。

JPEG 圖片格式的設計目標，是在不影響人類可分辨的圖片品質的前提下，儘可能的壓縮文件大小。這意味著 JPEG 去掉了一部分圖片的原始資訊，也就是進行了有損壓縮。JPEG 的圖片的優點，是採用了直接色，得益於更豐富的色彩，JPEG 非常適合用來存儲照片，用來表達更生動的影像效果，比如顏色漸變。

然而，JPEG 不適合用來存儲企業 Logo、線框類的圖。因為有損壓縮會導致圖片模糊，而直接色的選用，又會導致圖片文件體積更大。

PNG 格式

PNG（Portable Network Graphics）即攜帶型網路圖形，是一種採用無損壓縮演算法的點陣圖格式，文件後綴名為 .png。PNG 使用從 LZ77 派生的無損數據壓縮演算法，一般應用於 JAVA 程式、網頁中，它的壓縮比高，生成文件體積小。

PNG 格式是我們在數字設計項目中最常使用的格式。PNG 通常具有比其他格式更大的文件大小，但是它保留了硬性邊緣效果，且可以處理大量顏色。另外 PNG 有個比較有趣的特性，那就是支援透明背景，這也是大多數網站將 Logo 創建為 PNG 格式的主要原因。

GIF 格式

GIF（Graphics Interchange Format）即影像互換格式，是在 1987 年由 Compu Serve 公司為了填補跨平台影像格式的空白而發展起來的。眾所周知，它最大的特點就是「能動」。因此，GIF 通常用於從影像文件創建動畫。通過在壓縮中合併無損品質，可以無損傳輸和存儲這些文件，並且對影像庫的存儲影響較小。

GIF 是無損的，採用 GIF 格式保存圖片不會降低圖片品質。得益於數據的壓縮，文件體積小，也是 GIF 格式的優點。此外，它還具有支援動畫以及透明背景。

GIF 格式適用於對色彩要求不高同時需要文件體積較小的場景，比如企業 Logo、線框類的圖等。因其體積小的特點，現在 GIF 也已經被廣泛的應用在各類網站中。

從左到右，這些文件依次是：24 位 JPG 壓縮文件，8 位 GIF，8 位 PNG，全品質 24 位 JPG 和 24 位 PNG

新興的圖片格式 —— WebP

無論是 PC 端還是移動端，評價網站性能的一個主要指標就是頁面載入時間，而圖片佔到了頁面大小的 60%-70%。那麼如何保證圖片品質的前提下，縮小圖片體積，提升網頁載入速度，成為了一件有價值的事情。

如今，JPEG、PNG 以及 GIF 這些格式的圖片已經沒有太大的優化空間。而 Google 推出的 WebP 圖片格式給圖片優化提供了另一種可能。

WebP 是一種支援無損和有損壓縮的圖片格式，派生自影像編碼格式 VP8。根據 Google 的測試，無損壓縮後的 WebP 比 PNG 文件少了 45％的文件大小，即使這些 PNG 文件經過其他壓縮工具壓縮之後，WebP 還是可以減少 28％的文件大小。

WebP 現已成為主流網站喜歡的圖片格式，淘寶、豆瓣、京東等網站皆已使用 WebP 圖片以降低成本，提高網頁載入速度。但目前並非所有瀏覽器都支援 WebP，支援的情況參見如下圖所示：

又拍雲省錢大法

很多人都會擔心，部分瀏覽器不支援 WebP 圖片，特別是 Safari 也不支援，會不會影響用戶的體驗？

這裡就強勢推薦下又拍雲 WebP 自適應，無需網站伺服器和前端等層面技術上的任何改動，就能解除你的顧慮。那WebP 自適應是如何做到的呢？

通過 CDN 判斷瀏覽器是否支援 WebP

Google Chrome 、 Firefox 等瀏覽器以及許多其他工具和軟體庫都支援 WebP，但是目前並非所有瀏覽器都支援 WebP。因此需要對瀏覽器進行識別。又拍雲 CDN 通過 HTTP Accept 來自動判斷瀏覽器是否支援 WebP 格式的圖片。如果支援，又拍雲 CDN 則將原圖實時轉為 WebP 格式的圖片，並推送給瀏覽器；如遇到不支援 WebP 格式的瀏覽器，則推送原圖。

如何實現相同 URL 訪問，快取不同副本圖片？

如何實現相同 URL 訪問，快取不同副本圖片？

又拍雲 CDN 利用到了快取裡面的 Vary 機制，同一個 URL 根據不同 Header 頭的值快取多份不同的拷貝，同時保持 URL 不變。例如：

很明顯，WebP 是提升用戶體驗的一大利器，雖然瀏覽器對 WebP 的支援仍有需要改進的地方，但完全可以使用又拍雲 CDN 服務，來解決 WebP 兼容問題和處理批量 WebP 圖片格式轉換，高效地減少網站頻寬成本。