“能用表情包解決的問題，絕不多說一個字。”
“當不知道回復什么的時候，甩過去一個表情包就好了。”
放眼望去，誰的 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 圖片格式轉換，高效地減少網站帶寬成本。
