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

本文介绍了一种可以改善用户体验的图片格式——渐进式JPEG。相比于传统JPEG,它能在加载初期提供图片轮廓,使用户感知到图片加载进度,增强浏览体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

渐进式图片的使用

前端性能方面有许多可优化的点,而这些优化带来的就是用户体验的提升。今天我们要聊的东西并不能给性能带来提升,但却能在一定程度上提升用户的体验。
参考 博客

    场景:在访问页面的时候如果图片较大或者网速慢的情况我们会看到图片加载起来是有一个明显过程的,就是从上到下逐行呈现出来,这给用户的信号就是再等等图片还在加载中,并且图片没有加载出来的部分呈现一片空白,不利于体验,下面就看看渐进式图片怎么缓解这一情况

认识渐进式图片

渐进式图片其实是一种JPEG格式的图片,和普通的JPEG图片的区别如下:

  • 普通图片渲染时,数据将按照存储时的顺序从上到下逐行扫描被显示出来的,直到所有的数据都被读取完毕,就完成了整张图片的显示。
  • 渐进式图片渲染过程中,会先显示整个图片的模糊轮廓,随着扫描次数的增加,图片变得越来越清晰。这种格式的主要优点是在网络较慢的情况下,可以看到图片的轮廓知道正在加载的图片大概是什么。
口说无凭,看看效果
  • 生成两张相同的图片,均为JPEG格式

1、普通图片生成

2、渐进式图片生成(直接ps保存为JPEG格式,勾选连续)

  • 部署到服务器查看效果

    效果描述:从上面可以看到,两张图片的大小是差不多的,渐进式图片一开始呈现的效果为好像是一下子就完全加载出来了,只是看起来有点模糊。而普通图片是逐行扫描加载,已渲染的部分清晰可见。

  • 最终效果

总结

    从直观上来看好像渐进式图片要加载的快一点,这就是渐进式图片能够达到的体验提升效果。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值