“能用表情包解決的問題，絕不多說一個字。” “當不知道回覆什麼的時候，甩過去一個表情包就好了。” 放眼望去，誰的 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 圖片格式轉換，高效地減少網站頻寬成本。  #### 推薦閱讀 [白話科普，10s 瞭解 API](https://www.upyun.com/tech/article/588/%E7%99%BD%E8%AF%9D%E7%A7%91%E6%99%AE%EF%BC%8C10s%20%E4%BA%86%E8%A7%A3%20API.html) [白話科普系列——雙十一，竟然是一場有“預謀”的DDoS攻擊？](https://www.upyun.com/tech/article/589/%E7%99%BD%E8%AF%9D%E7%A7%91%E6%99%AE%E7%B3%BB%E5%88%97%E2%80%94%E2%80%94%E5%8F%8C%E5%8D%81%E4%B8%80%EF%BC%8C%E7%AB%9F%E7%84%B6%E6%98%AF%E4%B8%80%E5%9C%BA%E6%9C%89%E2%80%9C%E9%A2%84%E8%B0%8B%E2%80%9D%E7%9A%84DDoS%E6%94%BB%E5%87%BB%EF%BC%9