前端优化之图片

前言

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

实现

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）对渐进式图片格式的支持不足，尽管随着时间推移，这些浏览器将逐渐被市场淘汰，但当前仍可能影响部分用户的浏览体验。