当前网络中，图片仍是占用流量较大的一部分，因此要优化加载速度，可以从图片处理下手。
1、懒加载
有时候一个网页会包含很多的图片，服务器压力就会很大。不仅影响渲染速度还会浪费带宽。
为了解决以上问题，提高用户体验，就出现了懒加载方式来减轻服务器的压力，优先加载可视区域的内容，其他部分等进入了可视区域再加载，从而提高性能。
浏览器是否发起请求图片是根据<img>的src属性，所以实现懒加载的关键就是，在图片没有进入可视区域时，先不给<img>的src赋值，这样浏览器就不会发送请求了，等到图片进入可视区域再给src赋值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.demo img { width: 736px; height: 490px; background: url(images/loading.gif) 50% no-repeat;}
</style>
</head>
<body>
<div class="demo" style="width: 736px; margin: 0 auto;">
<img class="lazy" data-echo="images/big-1.jpg">
<img class="lazy" data-echo="images/big-2.jpg">
<img class="lazy" data-echo="images/big-3.jpg">
<img class="lazy" data-echo="images/big-4.jpg">
<img class="lazy" data-echo="images/big-5.jpg">
</div>
<script>
window.Echo = (function(window, document, undefined) {
'use strict';
var store = [],
offset,
throttle,
poll;
var _inView = function(el) {
var coords = el.getBoundingClientRect();
return ((coords.top >= 0 && coords.left >= 0 && coords.top) <= (window.innerHeight || document.documentElement.clientHeight) + parseInt(offset));
};
var _pollImages = function() {
for (var i = store.length; i--;) {
var self = store[i];
if (_inView(self)) {
self.src = self.getAttribute('data-echo');
store.splice(i, 1);
}
}
};
var _throttle = function() {
clearTimeout(poll);
poll = setTimeout(_pollImages, throttle);
};
var init = function(obj) {
var nodes = document.querySelectorAll('[data-echo]');
var opts = obj || {};
offset = opts.offset || 0;
throttle = opts.throttle || 250;
for (var i = 0; i < nodes.length; i++) {
store.push(nodes[i]);
}
_throttle();
if (document.addEventListener) {
window.addEventListener('scroll', _throttle, false);
} else {
window.attachEvent('onscroll', _throttle);
}
};
return {
init: init,
render: _throttle
};
})(window, document);
Echo.init({
offset: 0,
throttle: 0
});
</script>
</body>
</html>2、图片处理
主要通过对图片进行缩放裁剪、质量压缩以及格式转换等操作，减小图片的体积从而加快图片加载速度，节省大量的服务器宽带资源和数据空间。
1、使用云服务提供商的图片处理功能
使用腾讯云、阿里云、七牛云等服务商提供的URL图片处理服务
http://www.example.com/static/img/49ba59abbe56e057.png + ?图片处理接口 + 图片处理功能，通过访问存放在服务商对象存储上的图片+URL参数，就可以返回处理好的图片
免费额度：
腾讯云基础图片处理10TB/月，对象存储10GB/月
阿里云基础图片处理10TB/月，对象存储无免费额度
七牛云基础图片处理20TB/月，对象存储10GB/月
功能：
功能数量差不多吧，常用功能都有
2、自己开发图片处理功能
拿NodeJs来说，可以使用node-images、sharp.js 等库
node-images 是Node.js轻量级跨平台图像编解码库，无需安装任何图像处理库，jQuery风格的API，简单可依赖
sharp.js 支持更多的格式可以是JPEG，PNG，WebP，AVIF和TIFF格式，也可以是未压缩的原始像素数据，输入流可以分为多个处理管道和输出流方便链式处理。由于使用libvips，处理速度快，功能更新强大，但安装较麻烦。npm安装可以添加代理
sharp_binary_host=https://npm.taobao.org/mirrors/sharp
sharp_libvips_binary_host=https://npm.taobao.org/mirrors/sharp-libvips2.1、格式转换
WebP 是由谷歌开发的一种旨在加快图片加载速度的图片格式,并能节省大量的服务器宽带资源和数据空间，它具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量；在 JPEG 和 PNG 上的转化效果都相当优秀、稳定和统一
PNG转WebP
GIF转WebP
可以看到转换后的 WebP 体积大幅减少，图片质量也得到保障，但是不可否认的是它现在仍然存在少部分浏览器的兼容性问题
我们可以判断浏览器是否支持WebP格式，支持则使用WebP图片，不支持则加载原图
判断浏览器是否支持 webp 的几种解决方法：
1、使用 canvas 的 toDataURL 进行判断
document.createElement('canvas').toDataURL('image/webp', 0.5).indexOf('data:image/webp') === 0;2、通过加载一张 webp 图片进行判断
Google官方文档是这样处理的（先加载一个WebP图片，如果能获取到图片的宽度和高度，就说明是支持WebP的，反之则不支持）
function check_webp_feature(feature, callback) {
var kTestImages = {
lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",
lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",
alpha: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",
animation: "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA"
};
var img = new Image();
img.onload = function () {
var result = (img.width > 0) && (img.height > 0);
callback(feature, result);
};
img.onerror = function () {
callback(feature, false);
};
img.src = "data:image/webp;base64," + kTestImages[feature];
}3、在服务端根据请求header信息判断浏览器是否支持webp
const accept = request.headers.accept
accept.includes('image/webp')2.2、质量变换、缩放裁剪
列表页使用对原图进行缩放裁剪得到的缩略图加快页面加载速度
对于Jpeg、WebP图片，通过对图片质量进行调节，减少网络传输数据
3、图片高级压缩
TinyJPG、TinyPNG使用智能有损压缩技术来减小JPG、PNG文件的文件大小。通过有选择地减少图像中的颜色数量，需要较少的字节来存储数据。效果几乎是看不见的，但文件大小却有很大差异！
腾讯云提供服务, 已经稳稳地存活了 5年363天
桂公网安备45092102000147号
还没有评论，快来抢第一吧