前言
除了图片压缩外图片体验技巧来优化
实现
- 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)对渐进式图片格式的支持不足,尽管随着时间推移,这些浏览器将逐渐被市场淘汰,但当前仍可能影响部分用户的浏览体验。