前端优化之图片

前言

除了图片压缩外图片体验技巧来优化

实现

1. background-image

    	.pic_container {
   	    width: 300px;
   	    height: 375px;
   	    background-image: url("../assets/origin.jpg"), url("../assets/small.jpg");
   	    background-repeat: no-repeat;
   	    background-size: 100% 100%;
   	}
   

	绘制background-image，图像以 z 方向堆叠的方式进行。
	原图与缩略图是叠在一起的，并且原图在上缩略图在下，两张图是在同一个位置，
	所以我们可以看到一个从模糊变清晰的过程。

2. img + background-image
   使用img的话，可以使用img + background-image组合来实现。

		<div class="pic_container">
		  <img src="../assets/origin.jpg" alt="origin" />
		</div>
		<style lang="scss" scoped>
			.pic_container {
			    background-image: url("../assets/small.jpg");
			    background-repeat: no-repeat;
			    background-size: 100% 100%;
			    img {
			        width: 300px;
			        height: 375px;
			    }
			}
		</style>

	img元素占位在图片还没开始渲染时，它在页面上实际上是透明的，所以我们能够在看到下面的背景图片
	等img资源加载完成开始渲染时，才会慢慢遮盖下面的背景图

3. 渐进式图片

	本质上属于一种图片格式
	渐进式 JPEG  在 Web 浏览器中呈现时，会首先给出模糊图像的外观。然后一点一点地开始图片渲染，直到它显示完全渲染的图像。
	浏览器实际上是逐行解释图像，但在占位符中提供了完整图像的模糊预览。
	随着 Web 浏览器的渲染引擎处理数据，图像的对比度开始变得更清晰、更详细。
	直到最后渲染完毕，用户将看到完整的清晰图像。

可以使用gm工具库来生成渐进式图片

npm install gm

const gm = require('gm').subClass({ imageMagick: true });
const path = require('path');

function transformImage(imagePath, transform, generatePath, callback) {
  gm(imagePath)
    .interlace('Line') // 生成渐进式图片
    .resize(transform.width, transform.height)
    .write(generatePath, callback);
}

const basePath = path.join(__dirname, '../src/assets/');

transformImage(
    path.join(basePath, 'sy.pic.jpg'), 
    { width: 500, height: 500 }, 
    path.join(basePath, 'sy.line.jpeg'), 
    (res) => {
        console.log(res);
    }
);

	优点：
	1.移动网络流量优化：渐进式图片下载技术允许用户仅初始下载图片的一部分，有效降低图像分辨率并减少数据使用量，特别适用于移动网络环境。
	2.减少加载等待时间：渐进式图片能够让用户先快速预览图片的轮廓，随后逐步加载更多图片细节，提升用户体验。
	缺点：
	1.图片格式转换成本：由于大多数现有图片采用普通压缩格式，转换为渐进式格式需要额外的处理成本。
	2.兼容性：部分老旧浏览器（例如IE8）对渐进式图片格式的支持不足，尽管随着时间推移，这些浏览器将逐渐被市场淘汰，但当前仍可能影响部分用户的浏览体验。