当前位置: 首页 > Web前端 > HTML

提升页面体验的小技巧——渐进图

时间:2023-04-03 00:23:26 HTML

渐进图的前端性能有很多可以优化的点,这些优化带来的是用户体验的提升。我们今天要说的,并不能提升性能,但是可以在一定程度上提升用户体验。参考博客场景:访问页面时,如果图片较大或者网速较慢,我们会看到有一个明显的加载图片的过程,即从上到下逐行呈现,这是给用户的信号。等到图片还在loading,图片没有加载的部分是空白的,不利于体验。让我们看看如何使用渐进式图片来缓解这种情况。要知道渐进式图片其实就是JPEG格式的图片,与普通JPEG图片的区别在于:渲染普通图片时,数据会按照存储的顺序从上到下逐行显示,直到读取完所有数据,整个图像显示完毕。在渐进式图像渲染过程中,首先会显示出整个图像的模糊轮廓,随着扫描次数的增加,图像会变得越来越清晰。这种格式的主要优点是在网络慢的时候,可以看到图片的轮廓,知道即将加载的图片是什么。文字没有依据,只看效果生成两张一模一样的图片,都是JPEG格式1,普通图片生成2,逐行图片生成(直接ps另存为JPEG格式,勾选连续)部署到服务器上查看效果?????效果说明:从上图可以看出,两张图片的大小差不多。渐进图一开始的效果是好像一下子就装满了,但是看起来有点模糊。普通图片是渐进加载的,渲染的部分清晰可见。最终效果总结从直观上看,似乎渐进式图片应该加载得更快,这就是渐进式图片可以达到的体验提升效果。