最近搜狐科技报道了京东推出了一种新的dpg图片压缩格式,文中的主要观点如下:
在不牺牲清晰度的前提下:
- dpg比jpg体积小65%
- dpg比webp体积小50%
- dpg有jpg同样优秀的兼容性
针对以上观点,我做了如下调研:
dpg与jpg比较
首先,dpg并不是一种全新的图片格式,它就是jpeg,这点我们用GraphicsMagick的命令行工具可以清楚地看出:
[zhyang@localhost dpg]$ gm identify -verbose 59659caaN127f5381.jpg.dpg
Image: 59659caaN127f5381.jpg.dpg
Format: JPEG (Joint Photographic Experts Group JFIF format)
Geometry: 790x743
......
这也就解释了第3点兼容性的问题。
文中报道,原图大小是306740字节,dpg压缩图大小是120038字节,dpg图比原图大幅减小约61%。这有一部分原因是因为dpg图比原图使用了更小的压缩质量因子q(注:质量因子越大,图片质量越高,文件也越大)和采样因子:
原图
[zhyang@localhost dpg]$ gm identify -verbose 59659caaN127f5381.jpg
......
JPEG-Quality: 94
JPEG-Colorspace: 2
JPEG-Colorspace-Name: RGB
JPEG-Sampling-factors: 1x1,1x1,1x1
dpg压缩图
[zhyang@localhost dpg]$ gm identify -verbose 59659caaN127f5381.jpg.dpg
......
JPEG-Quality: 86
JPEG-Colorspace: 2
JPEG-Colorspace-Name: RGB
JPEG-Sampling-factors: 2x2,1x1,1x1
若用标准libjpeg库,采用与dpg相同的q和采样因子压缩后,图片的大小为166549字节。dpg压缩图比标准jpeg压缩图小27.9%.
为了进一步比较两者的压缩效果,引入广泛使用的客观评价指标SSIM(注:SSIM值反映了压缩图相对原图的扭曲程度, 值越小扭曲越大):
DPG压缩图SSIM值:
(R, G & B SSIM index)
89.8812%
95.3736%
91.6946%
libjpeg压缩图SSIM值:
(R, G & B SSIM index)
91.2599%
96.8804%
93.4639%
从SSIM值上看,q=86时,libjpeg压缩效果要比dpg好。若继续降低libjpeg压缩质量因子q以逼近dpg的SSIM值,可得到q=79时,两者SSIM值接近,此时文件大小为130753字节,dpg压缩图比其小8.2%左右。
dpg与webp比较
京东webp压缩图大小为220408字节,dpg图比其小45.5%左右。
由于无法从结果图获取具体的压缩质量q和其他压缩参数,这里使用webp默认的压缩参数和压缩质量q=86进行压缩,此时文件大小为130818字节,dpg图比webp图小8.2%左右。可以肯定的是京东webp压缩质量因子一定大于86,预估在94左右。
q=86时,webp图与原图比较的SSIM值为:
(R, G & B SSIM index)
91.699%
97.0325%
93.826%
显然,从SSIM值上,q=86的webp压缩效果要优于dpg.
若进一步降低q以比较dpg的SSIM值,可得当q=78时,webp图片大小为99942字节。此时,dpg比webp大26.4%左右。
更多图片比较
为了进一步评估dpg的效果,我从京东选取更多的图片进行测试,并有意识挑选了尺寸相差较大的图片。测试步骤如下:
- 下载原图和dpg图(在原图后加上.dpg后缀),比较两个图片的大小;
- 计算dpg图与原图的SSIM值;
- 利用libjpeg压缩原图,通过迭代减小压缩因子方式使jpeg与原图的SSIM值逼近第2步的值,并与dpg文件大小作比较;
- 用与第3步相似的步骤,逼近获得webp的压缩因子和文件,并与dpg大小作比较。
测试结果见附录。从结果中不难看出,dpg比libjpeg压缩后的文件要小10%-20%左右,但比webp要大约15%左右。dpg相比libjpeg还是取得了不错的效果。但在测试过程中也发现,部分dpg图相比较原图,色彩和细节部分有所丢失,显得画面有一些糊,一定程度上影响了感官,尤其在图中存在文字的情况下尤为明显,在测试数据中也表现为SSIM值较低。这一部分原因是因为dpg使用的采样因子比原图低,更主要的原因个人认为是dpg有意平滑了部分细节,毕竟存储这些细节肯定需要更多的字节数。
(注:将原图和dpg图贴在两个窗口中来回切换看尤为明显)
总结
1. dpg不是新的图片格式,它就是jpg,因此具有良好的兼容性;
2. dpg在京东能比jpg原图小70%,一部分原因是原图参数设置较高,如果拉倒同一起点,测试显示dpg比标准jpeg库小约10-20%,这个提升已经非常不错;
3. dpg会平滑图片中的细节,导致图片中的文字变糊。考虑到京东大都是商品细节描述的图片,如果这个问题得不到改善,个人认为能否在京东大规模应用,还是个未知数;
4. 测试显示dpg并没有比webp强,京东能有50%的下降同样是因为京东webp设置参数较高,不在同一起点。
dpg技术实现
由于京东并没有开源dpg压缩算法,搜狐的文章也只是简单说明一下是借鉴了heif的技术。
这里可以先看一下webp官方给出的为什么webp能比jpeg小的原因:
Why WebP (lossy) is Better than JPEG
Prediction coding is a main reason WebP wins over JPEG. Block adaptive quantization makes a big difference, too. Filtering helps at mid/low bitrates. Boolean arithmetic encoding provides 5%-10% compression gains compared to Huffman encoding.
从中可以看出编码部分对于size减小的贡献有限,主要在预测和滤波部分。heif与webp原理是相通的,所以是不是dpg利用了heif即hevc的帧内预测和滤波技术消除图片中冗余的数据量后,再用jpg编码?这还需要进一步研究。
附录
dpg详细测试数据
原图 | 原图尺寸 | 原图大小 | 原图质量 | dpg图大小(比原图增大) | dpg平均SSIM | dpg质量 | jpeg大小(比dpg增大) | jpeg质量 | webp大小(比dpg增大) | webp质量 |
---|---|---|---|---|---|---|---|---|---|---|
原图 | 325x430 | 105369 | 99 | 23244(-77.94%) | 94.20% | 86 | 29184(25.55%) | 83 | 18636(-19.82%) | 85 |
原图 | 350x350 | 102400 | 98 | 20172(-80.30%) | 89.05% | 86 | 22016(9.14%) | 74 | 24473(21.32%) | 85 |
原图 | 350x350 | 23449 | 86 | 13107(-44.10%) | 94.92% | 86 | 13824(5.47%) | 71 | 14745(12.50%) | 85 |
原图 | 247x241 | 17715 | 99 | 5836(-67.06%) | 99.12% | 86 | 7577(29.83%) | 83 | 3891(-33.33%) | 85 |
原图 | 350x350 | 36044 | 95 | 12288(-65.91%) | 95.64% | 86 | 15360(25.00%) | 84 | 9318(-24.17%) | 85 |
原图 | 350x350 | 36044 | 95 | 12288(-65.91%) | 95.64% | 86 | 15360(25.00%) | 84 | 9318(-24.17%) | 85 |
原图 | 350x350 | 34918 | 93 | 14540(-58.36%) | 97.34% | 86 | 16281(11.97%) | 76 | 12902(-11.27%) | 85 |
原图 | 750x2761 | 772915 | 99 | 192000(-75.16%) | 98.17% | 86 | 230195(19.89%) | 84 | 141721(-26.19%) | 85 |
原图 | 160x160 | 10035 | 93 | 3993(-60.21%) | 92.80% | 86 | 4300(7.69%) | 78 | 3072(-23.07%) | 85 |
原图 | 450x450 | 40038 | 93 | 16486(-58.82%) | 97.37% | 86 | 19660(19.25%) | 83 | 10035(-39.13%) | 85 |
原图 | 750x2963 | 387072 | 99 | 101683(-73.73%) | 98.99% | 86 | 113664(11.78%) | 81 | 64921(-36.15%) | 85 |
原图 | 750x2963 | 387072 | 99 | 101683(-73.73%) | 98.99% | 86 | 113664(11.78%) | 81 | 64921(-36.15%) | 85 |
原图 | 450x450 | 52121 | 99 | 13824(-73.48%) | 98.44% | 86 | 15052(8.88%) | 73 | 9932(-28.15%) | 85 |
原图 | 750x1139 | 676556 | 99 | 114790(-83.03%) | 94.49% | 86 | 164761(43.53%) | 81 | 103424(-9.90%) | 85 |
原图 | 160x160 | 17203 | 99 | 4096(-76.19%) | 97.10% | 86 | 4096(0.00%) | 75 | 3276(-20.02%) | 85 |
原图 | 450x450 | 99328 | 99 | 20275(-79.59%) | 97.03% | 86 | 20684(2.02%) | 76 | 14848(-26.77%) | 85 |
原图 | 750x633 | 106291 | 95 | 33484(-68.50%) | 95.88% | 86 | 37888(13.15%) | 78 | 25088(-25.07%) | 85 |
原图 | 220x220 | 26316 | 97 | 8704(-66.93%) | 96.15% | 86 | 10035(15.29%) | 81 | 7577(-12.95%) | 85 |
原图 | 160x160 | 8601 | 99 | 2560(-70.24%) | 97.82% | 86 | 2150(-16.02%) | 44 | 2150(-16.02%) | 85 |
原图 | 450x450 | 52428 | 99 | 14745(-71.88%) | 98.60% | 86 | 13824(-6.25%) | 65 | 13824(-6.25%) | 85 |
原图 | 750x693 | 222617 | 99 | 56729(-74.52%) | 95.73% | 86 | 67788(19.49%) | 81 | 55193(-2.71%) | 85 |
原图 | 160x160 | 17817 | 99 | 3993(-77.59%) | 97.17% | 86 | 5222(30.78%) | 86 | 3072(-23.07%) | 85 |
原图 | 450x450 | 177971 | 99 | 27033(-84.81%) | 93.84% | 86 | 31334(15.91%) | 79 | 23654(-12.50%) | 85 |
原图 | 240x240 | 22425 | 90 | 10854(-51.60%) | 94.14% | 86 | 10649(-1.89%) | 71 | 12083(11.32%) | 85 |
原图 | 350x350 | 32972 | 90 | 14643(-55.59%) | 96.22% | 86 | 14848(1.40%) | 66 | 16486(12.59%) | 85 |
原图 | 790x1600 | 951398 | 99 | 175206(-81.58%) | 94.18% | 86 | 216678(23.67%) | 80 | 165990(-5.26%) | 85 |
原图 | 160x160 | 17100 | 97 | 4710(-72.46%) | 92.78% | 86 | 5427(15.22%) | 80 | 4403(-6.52%) | 85 |
原图 | 350x350 | 132300 | 99 | 18841(-85.76%) | 92.60% | 86 | 21811(15.76%) | 78 | 19251(2.18%) | 85 |
原图 | 750x654 | 163225 | 93 | 69632(-57.34%) | 93.00% | 86 | 85504(22.79%) | 82 | 61952(-11.03%) | 85 |
原图 | 749x882 | 187904 | 93 | 88883(-52.70%) | 95.14% | 86 | 108134(21.66%) | 83 | 77414(-12.90%) | 85 |
原图 | 160x160 | 21299 | 99 | 4096(-80.77%) | 96.17% | 86 | 4710(14.99%) | 78 | 3686(-10.01%) | 85 |
原图 | 350x350 | 79360 | 99 | 11878(-85.03%) | 96.63% | 86 | 13312(12.07%) | 76 | 9728(-18.10%) | 85 |
原图 | 180x180 | 28057 | 97 | 6144(-78.10%) | 91.06% | 86 | 7987(30.00%) | 84 | 5939(-3.34%) | 85 |
原图 | 350x350 | 87347 | 97 | 16281(-81.36%) | 90.02% | 86 | 19660(20.75%) | 80 | 17305(6.29%) | 85 |
原图 | 750x951 | 417894 | 97 | 99635(-76.16%) | 91.79% | 86 | 115302(15.72%) | 80 | 100352(0.72%) | 85 |
原图 | 180x180 | 41984 | 99 | 6348(-84.88%) | 87.72% | 86 | 8089(27.43%) | 83 | 6451(1.62%) | 85 |
原图 | 350x350 | 142336 | 99 | 17817(-87.48%) | 88.02% | 86 | 23142(29.89%) | 82 | 19558(9.77%) | 85 |
原图 | 790x808 | 484761 | 99 | 103731(-78.60%) | 92.38% | 86 | 126156(21.62%) | 84 | 84787(-18.26%) | 85 |
原图 | 240x240 | 48025 | 98 | 11468(-76.12%) | 95.97% | 86 | 11980(4.46%) | 76 | 11161(-2.68%) | 85 |
原图 | 350x350 | 58368 | 98 | 14028(-75.97%) | 97.03% | 86 | 14848(5.85%) | 77 | 11980(-14.60%) | 85 |
原图 | 990x1208 | 539648 | 98 | 113561(-78.96%) | 94.17% | 86 | 114278(0.63%) | 69 | 109363(-3.70%) | 85 |
原图 | 160x160 | 23552 | 99 | 5427(-76.96%) | 96.15% | 86 | 6041(11.31%) | 77 | 4915(-9.43%) | 85 |
原图 | 350x350 | 129024 | 99 | 22425(-82.62%) | 90.79% | 86 | 24985(11.42%) | 80 | 18534(-17.35%) | 85 |
原图 | 800x800 | 344064 | 99 | 50790(-85.24%) | 96.47% | 86 | 77721(53.02%) | 83 | 36556(-28.03%) | 85 |
原图 | 160x160 | 24268 | 99 | 4812(-80.17%) | 87.04% | 86 | 5734(19.16%) | 83 | 3686(-23.40%) | 85 |
原图 | 350x350 | 99020 | 99 | 15155(-84.70%) | 84.69% | 86 | 14848(-2.03%) | 72 | 14438(-4.73%) | 85 |
原图 | 750x750 | 205209 | 92 | 104550(-49.05%) | 92.68% | 86 | 161484(54.46%) | 84 | 87859(-15.96%) | 85 |
原图 | 283x157 | 7680 | 86 | 3481(-54.67%) | 95.26% | 86 | 3891(11.78%) | 71 | 3174(-8.82%) | 85 |
原图 | 645x376 | 26521 | 86 | 11776(-55.60%) | 93.39% | 86 | 4300(-63.49%) | 18 | 8908(-24.35%) | 85 |
原图 | 240x120 | 12185 | 86 | 6963(-42.86%) | 91.32% | 86 | 7475(7.35%) | 73 | 7372(5.87%) | 85 |
原图 | 292x157 | 13209 | 86 | 6860(-48.07%) | 89.57% | 86 | 5120(-25.36%) | 52 | 7884(14.93%) | 85 |
原图 | 645x376 | 50278 | 86 | 25292(-49.70%) | 89.69% | 86 | 11059(-56.27%) | 26 | 24985(-1.21%) | 85 |
原图 | 240x120 | 13824 | 86 | 7782(-43.71%) | 87.91% | 86 | 8294(6.58%) | 73 | 9011(15.79%) | 85 |
原图 | 240x120 | 12902 | 86 | 7782(-39.68%) | 92.68% | 86 | 7884(1.31%) | 72 | 9113(17.10%) | 85 |
原图 | 338x220 | 72089 | 99 | 14950(-79.26%) | 93.99% | 86 | 18022(20.55%) | 82 | 14950(0.00%) | 85 |
原图 | 350x350 | 84889 | 90 | 39424(-53.56%) | 84.98% | 86 | 38502(-2.34%) | 78 | 47104(19.48%) | 85 |
原图 | 790x986 | 468172 | 99 | 119808(-74.41%) | 97.07% | 86 | 138854(15.90%) | 84 | 100966(-15.73%) | 85 |
原图 | 338x220 | 111104 | 99 | 24780(-77.70%) | 92.60% | 86 | 29696(19.84%) | 84 | 27238(9.92%) | 85 |
原图 | 292x157 | 20070 | 86 | 11878(-40.82%) | 82.70% | 86 | 4812(-59.49%) | 21 | 13721(15.52%) | 85 |
原图 | 240x120 | 9830 | 86 | 5632(-42.71%) | 91.49% | 86 | 6144(9.09%) | 72 | 6553(16.35%) | 85 |
原图 | 107x107 | 4403 | 86 | 2355(-46.51%) | 92.57% | 86 | 2457(4.33%) | 71 | 2560(8.70%) | 85 |
原图 | 380x272 | 31334 | 86 | 15974(-49.02%) | 91.09% | 86 | 15872(-0.64%) | 71 | 16691(4.49%) | 85 |
原图 | 292x157 | 18022 | 86 | 10342(-42.61%) | 94.54% | 86 | 11059(6.93%) | 73 | 11264(8.92%) | 85 |
原图 | 240x120 | 14336 | 86 | 8396(-41.43%) | 89.84% | 86 | 8806(4.88%) | 73 | 9318(10.98%) | 85 |
原图 | 107x107 | 5017 | 86 | 2764(-44.91%) | 92.64% | 86 | 2867(3.73%) | 72 | 2867(3.73%) | 85 |
原图 | 240x120 | 11366 | 86 | 6246(-45.05%) | 92.92% | 86 | 6758(8.20%) | 73 | 6860(9.83%) | 85 |