web性能优化之图片处理

web性能优化之图片处理

2018-07-23 6

当前网络中,图片仍是占用流量较大的一部分,因此要优化加载速度,可以从图片处理下手。

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-imagessharp.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-libvips

2.1、格式转换

WebP 是由谷歌开发的一种旨在加快图片加载速度的图片格式,并能节省大量的服务器宽带资源和数据空间,它具有更优的图像数据压缩算法,能带来更小的图片体积,而且拥有肉眼识别无差异的图像质量;在 JPEG 和 PNG 上的转化效果都相当优秀、稳定和统一

PNG转WebP

3eeafe3c7b092c0a.jpg

GIF转WebP

7473484033089421.jpg

可以看到转换后的 WebP 体积大幅减少,图片质量也得到保障,但是不可否认的是它现在仍然存在少部分浏览器的兼容性问题

cdd9a347d09018ae.png

我们可以判断浏览器是否支持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文件的文件大小。通过有选择地减少图像中的颜色数量,需要较少的字节来存储数据。效果几乎是看不见的,但文件大小却有很大差异!

https://tinypng.com/

评论(0)

还没有评论,快来抢第一吧