在某些项目中需要加载大量的图片,会大大的影响加载速度。这里总结了几种前端关于图片优化的方法:
1 使用恰当的图片格式:
常见的图片格式有pngjpggif等,有的修饰图片或者有特殊要求的图片例如背景要求透明可能更适合无损压缩的png,而绝大多数的图片用jpg格式的就可以满足需求了。GIF格式的多用于动画,不过动画也建议用video标签或者视频形式,svg也可。
2 尽量不用图片
比如在页面开发时某些图片或者修饰可以通过给特定的标签添加样式来实现,就省去了图片的引入。
常见的例如 三角形,圆形,不规则放置的直线,半透明,阴影,边框,渐变等等。
3 图片的引入方式的选择
我们知道前端页面的图片引入方式主要有两大类:
1 通过img标签
2 通过css的background属性
3 应该还有其他的方法,有待探索
这里可以根据实际情况来选择合适的引入方法。
4 图片压缩
图片的清晰度和大小能够满足一般的需求就可以了,没必要太大,这个时候可以通过各种图片压缩器,将图片大小尽可能的压缩,减小网站加载图片的容量大小,提高加载速度。
这里分享一款压缩工具:
5 资源的lazyload或postpone
lazyload:延迟到其他资源下载完成后再加载
postpone:延迟到元素可见再加载。
针对某些需要大量同步加载的图片数据可以用延迟可见或加载的办法来使网页加载图片时更优化合理。但是这种策略,目前都需要对应的脚本。
6 字体图标
针对网页中需要实现的图标或者同种图标的不同颜色,可以用字体图标的形式,使用方便简单
7 使用data url。
资源内嵌于CSS或HTML中,而不必单独请求。注意,多个地方都要使用的资源不一定适合用此优化方式,因为图片数据重复多了,增加流量。另外许多浏览器对data url有长度限制,注意资源的大小。
8 css sprite
以上是个人在做项目时使用总结的东西,关于图片的优化方法还在继续探索中。。