前言
除了图片压缩外图片体验技巧来优化
实现
- 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 方向堆叠的方式进行。
原图与缩略图是叠在一起的,并且原图在上缩略图在下,两张图是在同一个位置,
所以我们可以看到一个从模糊变清晰的过程。
- 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资源加载完成开始渲染时,才会慢慢遮盖下面的背景图
- 渐进式图片
本质上属于一种图片格式
渐进式 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)对渐进式图片格式的支持不足,尽管随着时间推移,这些浏览器将逐渐被市场淘汰,但当前仍可能影响部分用户的浏览体验。