前端图片优化小记

个人感觉对于前端优化，尤其是图片优化方面了解不多，趁着周末阅读了几篇关于这方面的文章，收获满满，在这里做一个简单的小结。

参考文章：

• 图片延迟加载方案-by 齐修
• 图片较多的网站，如淘宝京东、美丽说花瓣、QQ空间、百度图片等都采用哪些技术优化图片展示？-by 秦墨鱼
• 图片延迟加载策略(JavaScript)-by Ice_shou
• 网站性能优化之图片优化

前端页面需要展示的图片较多时，根据具体的场景的不同有不同的解决方案：

图片优化方案：
1.使用base64编码
2.图片延迟加载
3.使用css、iconfont、svg代替普通图片
4.选择正确的图片格式
5.选择正确的图片尺寸

1.使用base64编码

image.png
使用场景：从淘宝首页来看，使用base64的图片，除了上图的二维码(8K)，其他大小基本维持在2K以下，主要应用在各种小logo的展示（小背景图/小gif也适用，作为对iconfont的补充，下文会提到）。值得关注的一点是，这里多数logo类型是image/webp。WebP具有更优的图像数据压缩算法，能使图片体积更小(关于WebP的介绍)。 image.png image.png

使用方式：

data:[<mediatype>][;base64],<data>

正确的姿势是使用css将图片作为背景,这样无须发送额外的http请求，而且图片数据能够随着外部样式表被缓存：

.logo {
    background-image:url(data:image/png;base64,sadfasdfsd);
}

2.图片延迟加载

当页面图片较多时，一次加载全部图片会极大降低页面加载速度，并且消耗巨额流量，对移动端来说简直就是灾难，图片延迟加载要做到的就是尽可能只加载用户需要看到的图片，避免不必要的图片请求。

加载单张图片

<!-- default.jpg是默认图片，大小不能过大，5kb以下 -->
![](default.jpg)</img>

//加载图片代码

var img = document.getElementById("img");
//oImg用来判断trueSrc指向的资源是否为空。
//如果oImg不能正常加载，不修改img.src，使用默认图片；
var oImg = new Image;
oImg.src = img.trueSrc;
oImg.onload = function() {
  img.src = oImg.src;
  oImg = null;
};

使用第三方库 lazySizes

lazySizes-Demo

High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration.

强大之处：

原生js，不依赖于jquery/zepto
自动监测可能发生变化的lazyload节点，不需要额外初始化
支持响应式图片srcset
性能高，改善SEO

举例：

<!-- 引入文件 -->
<script src="lazysizes.min.js" async=""></script>

<!-- 非响应式: -->
![](image.jpg)
<!-- 响应式: -->
<img
    data-sizes="auto"
    data-src="image2.jpg"
    data-srcset="image1.jpg 300w,
    image2.jpg 600w,
    image3.jpg 900w" class="lazyload" />

3.使用css、iconfont、svg代替普通图片

• 能用css样式解决的不要使用图片
• 页面中有各种小图标时，可以选择使用iconfont：矢量图标字体。
  • 能够减少不必要的http请求，字体文件加载成功后能够直接渲染图标；
  • 本身是字体，适用font-size等文字效果；
  • 兼容性较好；
    (附：阿里巴巴矢量图标库)
• svg矢量图标：支持缩放等操作，一张图适用多种场景，无须准备多套图，兼容性较好；

4.使用正确的图片格式

image.png

详情请移步：网站性能优化之图片优化----mata

5.使用正确的图片尺寸

这里需要用到img标签的srcset属性

image.png

以知乎为例，上图右边的广告图img标签使用了srcset属性，
用于适配不同的屏幕：在屏幕密度为1x的时候使用src指向的图片；屏幕密度为2x的时候使用srcset指向的图片。不同的屏幕都能获得最佳的图片效果。