序

图片类静态资源的处理，是前端开发中非常重要的一块。本文就前端图片资源优化这一项，来具体说一说。

图片资源分类

前端图片资源，可以从不同的维度来分类。

• 首先，图片按类型，可分为iconfont矢量资源和静态标量资源
• 其次，按存储位置，可分为本地图片和云端图片

图片资源优化

本地图片优化 - 构建压缩

首先，本地存储图片较少，只有一些浏览器页签icon等少量资源，特点是体积小但访问高频，会存放于项目本地，使得加载更快速。对于本地存储的图片，一般会在构建工具中，压缩。可压缩PNG/JPEG/GIF等图片，无损压缩图片大小。

矢量资源优化 - 存储为iconfont

对于用作图标的矢量图片来说，都应该存储为iconfont加以管理。有以下好处：

• 更快：
  • 轻量级：比SVG资源小、比标量图好控制大小
  • 减少网络请求：只需要加载字体文件，减少网络请求数量。如果每个图标是单个图片文件，需要单独请求。
• 好管理：
  • 打包方便：多个资源打包为一个字体文件，便于管理。如果每个图标是一个独立的SVG或PNG，管理不方便。
  • 样式控制方便：可改颜色大小，而标量图不能更改
  • 兼容性好：SVG兼容性比iconfont差
  • 授权方便：第三方不易直接获取图片文件
• 好维护：
  • 更新图片方便：可以不更新代码的情况下直接更新图标。而图片文件因为CDN缓存或浏览器缓存等因素，需要coding才能更新图标。

云端资源优化 - CDN加速访问

图片托管于CDN，用户访问时从最近的CDN节点获取资源，可加快访问速度。

代码技术手段

响应式图片

根据设备分辨率加载不同大小的图片,避免在移动端传输过大的图片。可以使用srcset实现响应式图片。

懒加载

浏览到某区域时才加载可视区域的图片,减少不必要的图片加载。常用的库如LazyLoad。

减少首屏加载图片数量

对首屏展示的图片数量进行优化,避免首屏加载过多图片导致加载缓慢。

预加载

对可能出现在用户浏览中的图片进行预加载,缩短访问时间。