天天承載上億圖片訪問的網站帶寬下降50%，只用了這一招

前言

咱們知道，理想的網頁應該在 1 秒內打開，而在頁面的總體大小中，圖片每每是所佔比例最大的一部分，據Akamai統計，圖片大小已經佔據整個網站63%的體積，成爲網站頁面中最消耗帶寬和影響頁面加載速度的部分之一。所以下降網站圖片大小成爲優化網站性能和節省帶寬最有效的辦法。網站經常使用的 PNG、JPEG、GIF 和 SVG 圖片通常都有很大的壓縮餘地，可是圖片質量在很大程度上影響着網站的用戶體驗。幸而，谷歌推出的WebP 圖片格式，可以在不影響用戶體驗的前提下，能減小圖片50%大小。

花瓣全站啓用圖片WebP格式先後帶寬對比：

△花瓣網的帶寬和請求變化趨勢

從5月7日開始，花瓣在使用又拍雲CDN並開啓WebP自適應功能後，在整體請求幾乎沒有變化的狀況下，總體帶寬降低了一半。

花瓣是如何完成整站圖片改造的？

WebP圖片格式轉換和瀏覽器兼容，無需網站服務器和前端等層面技術上的改動，徹底能夠經過又拍雲CDN服務來完成。

雲處理服務：實時完成圖片格式轉換

針對jpg、png、gif等非WebP格式圖片時，需轉換爲WebP格式，提供給瀏覽器訪問。

又拍雲提供了多種做圖方式

• 原圖訪問 ，示例：/a.jpg
• 縮略圖版本號，示例：/a.jpg!123
• URL 做圖 ，示例：/a.jpg!/format/webp
• 版本號 + URL 做圖：/a.jpg!123/format/webp

又拍雲圖片集羣天天處理超9000萬次做圖請求，且與又拍雲的CDN、雲存儲服務無縫結合。所以使用又拍雲CDN服務，就能將原圖實時轉換爲WebP格式。

經過又拍雲CDN實現WebP兼容

1. 經過CDN判斷瀏覽器是否支持WebP

Google Chrome 、 Opera 等瀏覽器以及許多其餘工具和軟件庫都支持 WebP，可是目前並不是全部瀏覽器都支持 WebP。所以須要對瀏覽器進行識別。又拍雲CDN經過HTTP Accept來自動判斷瀏覽器是否支持WebP格式的圖片。若是支持，又拍雲CDN則將原圖實時轉爲 WebP 格式的圖片，並推送給瀏覽器；如遇到不支持WebP格式的瀏覽器，則推送原圖。

2. 如何實現相同 URL 訪問，緩存不一樣副本圖片？

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

請求頭字段 Accept: image/webp -> 響應頭須要知足 Vary: Accept 以及 Content-Type: image/webp;

請求頭字段 Accept-Encoding: gzip -> 響應頭須要知足 Vary: Accept-Encoding 以及 Content-Encoding: gzip

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

推薦閱讀：

又拍雲CDN如何實現WebP兼容？

上傳圖片一覽WebP圖片格式壓縮效果