wkiwi的博客

前端图片的优化

发布时间:2年前热度: 477 ℃评论数:

真的要用图片吗?


要实现需要的效果,真的需要图片吗?这是首先要问自己的问题。浏览器和Web标准的发展速度极快。

现在,很多特效(渐变、阴影、圆角等等)都可以用纯粹的HTML、CSS、SVG等加以实现,实现这些效果少则寥寥数行代码,多则加载额外的库(一张普通的照片比非常强大的效果库也大了许多)。这些效果不但需要的空间很小,而且在多设备、多分辨率下都能很好的工作,在低级浏览器上也可以实现较好的功能降级。因此在存在备选技术的情况下,应该首先选择这些技术,只有在不得不使用图片的时候才加入真正的图片。

备选技术


  • CSS效果、CSS动画。提供与分辨率无关的效果,在任何分辨率和缩放级别都可以显示得非常清晰,占用的空间也很小。

  • 网络字体。现在连很多图标库都是用字体方式提供,保持文字的可搜索性同时扩展显示的样式。

图片格式的选择

如果效果真的需要图片来表现,那么选择图片格式是优化的第一步。我们经常听到的词语包括矢量图、标量图、SVG、有损压缩、无损压缩等等,我们首先说明各种图片格式的特点

图片格式压缩方式透明度动画浏览器兼容

适应场景

JPEG有损压缩不支持不支持所有复杂颜色及形状、尤其是照片
GIF无损压缩支持支持所有简单颜色,动画
PNG无损压缩支持不支持所有需要透明时
APNG无损压缩支持支持Firefox
Safari
iOS Safari
需要半透明效果的动画
WebP有损压缩支持支持Chrome
Opera
Android Chrome
Android Browser
复杂颜色及形状
浏览器平台可预知
SVG无损压缩支持支持所有(IE8以上)简单图形,需要良好的放缩体验
需要动态控制图片特效

其中APNG和WebP格式出现的较晚,尚未被Web标准所采纳,只有在特定平台或浏览器环境可以预知的情况下加以采用


除过以上图片格式,京东还有一项技术为DPG

dpg技术实现

由于京东并没有开源dpg压缩算法,搜狐的文章也只是简单说明一下是借鉴了heif的技术。

1. dpg不是新的图片格式,它就是jpg,因此具有良好的兼容性;
2. dpg在京东能比jpg原图小70%,一部分原因是原图参数设置较高,如果拉倒同一起点,测试显示dpg比标准jpeg库小约10-20%,这个提升已经非常不错;
3. dpg会平滑图片中的细节,导致图片中的文字变糊。考虑到京东大都是商品细节描述的图片,如果这个问题得不到改善,个人认为能否在京东大规模应用,还是个未知数;
4. 测试显示dpg并没有比webp强,京东能有50%的下降同样是因为京东webp设置参数较高,不在同一起点。


前端,图片,优化

手机扫码访问