前端图片格式与浏览器性能优化

在当前的静态或者动态界面中，图片是用户体验提升的重要的一部分。良好的图片设计会提升用户体验，并且对于浏览器优化具有很好的效果。接触图片设计和前端开发已经有两年时间，下面简单总结几点：

1.图片格式

传统的网页开发主要使用三种格式的图片：jpg、png、gif。这三种图片都是栅格图片（图片信息使用像素点进行存储），如果进行缩放会影响图片的视觉效果。

jpg（jpeg）格式使用范围最广。通常情况下，色彩范围多，不包含透明图层的图片使用这个格式，传统网站80%的产品图和banner部分使用这个格式。例如下面的产品图（请忽略广告信息）。曾经某个央企网站 PC 端首页使用未压缩的高清jpg，然后首页卡顿严重，这个反例需要深思。首页中的轮播图可以使用 jpg 格式。

png图片通常适应于包含透明图层的图片。例如常见的icon图片或者小图标等。外形不规则，可以作为页面装饰。例如下面的图标。图标部分可以使用字体图标统一定制，如果复杂色彩的图标再使用 png 的图片。

gif是传统三种图片中占用空间最大的文件。目前主要使用在动图（很大程度已经被短视频替代）。

当前发展最快的三种图片是svg、webp、canvas（严格意义不是图片）。下面进行简单介绍。

canvas基于JavaScript语言进行2D绘图，一次性绘制图片（如果需要更改则全部重新渲染），可以以jpg或者png形式存储图片。适合于小游戏开发。

svg基于XML语言进行2D绘图，是一种独立的程序语言，每一个内容都是一个独立的对象，单独进行渲染，不适合游戏，适合谷歌地图等大型渲染应用。过度使用DOM技术会使得渲染效果减慢。可伸缩的矢量图格式（便于适应不同类型的浏览器和显示屏），使用xml定义。使用<svg>标签设置svg格式的图片。svg基于XML，可以用文本编辑器编辑。可以绘制图形，设置滤镜，设置渐变效果。 相同点：都可以在浏览器中创建图形。

webp图片格式：相对传统图片占用空间更小，淘宝和腾讯已经在使用。

ico 图标文件格式和尺寸：主要用于网页顶部标签或者状态栏的缩略图。详情参考 https://blog.csdn.net/weixin_41697143/article/details/94411200。

2.CSS优化

尽量使用css样式进行优化，避免使用图片。当前大部分浏览器已经支持css3效果，简单的动画和图片效果完全可以使用css进行完善。使用动画可以分为预设的translate动画，和自定义的animation动画，根据实际的页面复杂度进行设计。

传统的flash动画现在已经落伍了。毕竟这种把flash绑架到浏览器上的行为对于用户体验是很不好的（用户需要根据不同版本浏览器下载对应的Adobe flash player），并且在浏览器中进行询问。

当然，传统的网页制作工具DW，在当前各种各样的编译器存在情况下，市场份额也在慢慢下降。身边的同事朋友基本都在使用sublime、atom、webstrom等编译器，可以熟练使用DW的也是神一样的前辈了。

CSS 中一些属性会影响性能：大量的绝对定位等需要计算，比普通布局更消耗性能。

@keyframes bearRide {
  0% {
    transform: translateX(-1.875rem) translateY(-0.3125rem); }
  25% {
    transform: translateX(-3.75rem) translateY(0.3125rem); }
  50% {
    transform: translateX(-5.625rem) translateY(-0.3125rem); }
  75% {
    transform: translateX(-7.5rem) translateY(0.3125rem); }
  100% {
    transform: translateX(-9.375rem) translateY(-0.3125rem); } }

@-webkit-keyframes bearRide {
  0% {
    transform: translateX(-1.875rem) translateY(-0.3125rem); }
  25% {
    transform: translateX(-3.75rem) translateY(0.3125rem); }
  50% {
    transform: translateX(-5.625rem) translateY(-0.3125rem); }
  75% {
    transform: translateX(-7.5rem) translateY(0.3125rem); }
  100% {
    transform: translateX(-9.375rem) translateY(-0.3125rem); } }

@-webkit-keyframes steps {
  100% {
    width: 100%; } }

@keyframes steps {
  100% {
    width: 100%; } }

.loading .progress {
  background-color: transparent; }
  .loading .progress .step {
    height: 100%;
    width: 20%;
    background-color: #ff2947;
    right: 0;
    position: absolute; }

3.图片请求

减少图片请求，使用雪碧图（sprite 精灵图）。现在已经有其他的优化方案，不过传统的手艺不能丢，根据网站的实际情况进行优化。对于国企和政府网站，这个方法还是很关键的。

4.图片压缩

当前端的整体内容搭建完毕后，使用软件对整体的图片和代码进行压缩。设计稿中的图片分辨率和色彩深度等也可以随之调整。当然，性能和效果互相权衡。可以根据用户使用的设备分辨率定制图片，高清屏移动端可以定制界面。如果用户的网络良好，流量充足，可以使用大分辨率的图片。当然预先需要进行用户端判断。还是那句话，根据实际的用户需求和产品分析确定最后的设计方案吧。

2019年7月再次编辑