前端图片优化小记

我的感受对于前端优化，尤为是图片优化方面了解很少，趁着周末阅读了几篇关于这方面的文章，收获满满，在这里作一个简单的小结。

参考文章：

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

前端页面须要展现的图片较多时，根据具体的场景的不一样有不一样的解决方案：

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

1.使用base64编码

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

使用方式：

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.使用正确的图片格式

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

5.使用正确的图片尺寸

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

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