京東技術：用最小的圖片格式，打造最優的使用者體驗

weixin_33724059發表於2018-03-06
8122772-02e7bef48f2646db.jpg
京東技術.jpg
現在大型的網際網路電商網站，圖片的流量約佔90%，要堅持產品的傑出視覺體會，怎麼削減圖片的size，是我們一向重視的焦點。

在電商行業界，google在近些年敞開webp技能，在保證傑出的視覺體會情況下，將圖片鉅細削減了25%，現在在許多網際網路企業現已大規模使用。京東在2014年就開端大規模推行webp，降低了25%的cdn使用流量。

DPG的圖片壓縮技術在京東的使用

京東基礎架構部-智慧儲存部近期推出DPG圖片壓縮技術，圖片再經過DPG壓縮後相容jpeg，同時在全平臺、全部的瀏覽器都支援，DPG是一種有失真壓縮技術，但通過5名使用者10000張圖片的人眼瀏覽測試，和webp的清晰度對比沒有差距。該技術可以非常有效地減少圖片大小50%，減少cdn頻寬流量50%，加快圖片使用者在裝置上的渲染速度，直接節省使用者瀏覽流量，提升使用者購物體驗。

DPG格式和比較成熟的圖片格式比較：(採集京東圖片系統10w張圖片)

8122772-283b1a36f3e3ed9a
image

上圖所示，經過DPG壓縮後的圖片，體積僅有webp的50%，但是圖片的清晰度及視覺體驗方面和webp在並沒有太大的差距，在裝置渲染速度以及相容性方面，DPG要好於webp。

DPG圖片壓縮的技術背景

京東作為一家電商起家的網際網路交易平臺，目前圖片儲存量超過了上千億張，京東在儲存上只儲存原圖，每天各個業務方請求的時候，根據其業務特點請求webp，完成縮放、裁剪、補白邊等功能。根據不同的業務方有不同的需求，因此這些功能只能進行實時處理，並且所有的業務都要求單張圖片處理時間不能超過50ms，因此圖片壓縮也必須實時線上處理。

DPG圖片壓縮的技術思路

經過長時間的觀察，發現京東的圖片系統裡面的圖片，其背景的顏色和空白色佔據了30%以上的畫素點，因此針對這個特點，借鑑了heif的一些特性，做了一個實時線上的壓縮庫，壓縮效果非常好。從上圖的對比中可以看到，DPG影象壓縮技術可以壓縮掉63%的流量。目前該技術已經在京東內部全面推廣。

示例

原圖：

https://img30.360buyimg.com/popWaterMark/jfs/t5995/269/4680734391/306740/2fcc6842/59659caaN127f5381.jpg

8122772-ad912940231f9d4c
image

DPG壓縮後的圖片：

https://img30.360buyimg.com/popWaterMark/jfs/t5995/269/4680734391/306740/2fcc6842/59659caaN127f5381.jpg.dpg

8122772-6a0b5085088990c7
image

經過webp轉碼後的圖片:

https://img30.360buyimg.com/popWaterMark/jfs/t5995/269/4680734391/306740/2fcc6842/59659caaN127f5381.jpg.webp

8122772-189fd44dc5227456
image

上圖所示：原圖大小是306740位元組，webp是220408位元組 ，但是經過DPG技術壓縮後只剩下120038位元組，同時在PC端和手機端公國人眼觀看沒有出現任何的視覺差異，但是DPG壓縮過的圖片可只有webp的一半左右。

由此看出，待DPG在京東全業務覆蓋後，每年通過DPG技術節省的CDN流量費用將超千萬餘元，同時為京東使用者節省的手機流量將達到50%左右。

如何體驗？

按照樣例展示中url規則新增.dpg字尾或.webp字尾，即可輕鬆對比與體驗哦！

更多精彩內容請關注“IT實戰聯盟”公眾號哦~~~


8122772-20462c574060f3f5.jpeg
IT實戰聯盟.jpeg

相關文章