浅谈图片加载:逐行扫描VS交错扫描
来源:互联网 发布:oppo r9怎么改3g网络 编辑:程序博客网 时间:2024/05/17 21:06
一,前言
最近在不断地扩充自己web开发的知识面,看得比较泛,难得五一假期就在学习之余实践一下,毕竟纸上得来终觉浅,况且“纸上”的不一定都对,之前看了一篇博客讲图片加载的,博主大概是淘宝前端团队的吧,讲得很透彻,分享一下:
图片格式与设计那点事儿
虽然是10年的文章了,但是鉴于图片格式近几年并没有大的改动,而且博主讲得比较透彻,所以很有参考价值。
本篇博客只是对上面博客的验证以及在rails上的实践,推荐阅读上面那篇博客。
二,图片加载中的扫描方式
在带宽有限的时候显示大图片始终是个问题,特别在移动设备上,长加载时间导致了长白屏时间,用户体验不好。
如果细心观察各类网页上图片的加载,你会发现有从上到下(逐行扫描)的加载和先加载模糊的照片再逐渐变清晰(交错扫描)两种方式(网速不好时特别明显)。
可见,为了效果明显,特地选了一张2M左右的照片,同样图片,同样大小(其实为了实验的可靠性,第二张特意调得大一些,多个20k吧),第二种方式的加载看似更快,先交错加载出图片轮廓,再慢慢填充细节,GIF动图可能不是太明显,大家可以自己去试一下。
上面两张图片都是JPG格式的,只是有个属性(interlace【译:交错】)不同,造成了两种图片编码格式,对应两种浏览器的图片解码方式,也就会产生上面的两种视觉效果。
关于两种扫描方式的底层的不同大家可以去看JPG或者PNG的编码方式,这里有个图片供参考,注意红框部分。标准模式下,存储时时将图片从左上角到右下角的像素点存下来,每个像素点有RGB三个值,以一行有三个像素点为例:
正常:RGBRGBRGB(一次显示完)
交错:RRR(第一次显示)GGG(第二次显示)BBB(第三次显示)
因为假期还有许多学习任务,所以图片存储这一部分并没有深入了解,上面的存储方式只是猜测,也算是提供了一个思路,更多信息请自行谷歌(关键词:interlace PNG 或者 progressive JPEG),欢迎回来分享。
三,生成interlace PNG、progressive JPEG
①Photoshop处理
在前端开发中,许多图片都是从美工图片中切下来的,然后在PS上进行简单的处理作为静态资源使用。
其实上面那篇博客就有相关的内容,不过既然自己实践了一下,也为了保证阅读的连续性,还是上一下图片吧。
②rails中使用MiniMagick处理
好,重点来了,怎么用代码来处理图片呢?在图片上传这个环节,涉及到服务器对图片的修改及保存。因为web后台使用了rails,所以图片处理库也就用了MiniMagick:
MiniMagick的安装使用
因为MiniMagick其实是调用了ImageMagick(或者GraphicsMagick,取决于你安装了哪个软件)来进行图片处理,所以我们要先安装ImageMagick。
1,安装ImageMagick
#Mac OS X (本地开发环境)brew install ImageMagick#ubuntu(产品部署环境)apt-get install software-properties-commonsudo apt-get updatesudo apt-get install imagemagick libmagickwand-dev
2,在rails中安装MiniMagick
在Gemfile文件中加入下面一行,然后执行bundle命令来安装gem包即可:
# image processgem 'mini_magick'
3,rails使用MiniMagick来生成交错扫描的图片
image = MiniMagick::Image.open(image_path)# => format之后就不是交错的模式了,所以要先format再设置交错模式image.format 'png'image.interlace "plane" #选择交错模式image.write image_path
4,enjoy it!
在终端中执行下面命令,检查图片是否是交错扫描的,返回None代表不是交错扫描的,否则是交错扫描。
identify -verbose filename.jpg | grep Interlace
注意:identify命令是安装ImageMagick之后才有的。
ImageMagick是一个很强大的软件处理工具,裁剪、放大缩小、图片加文字这些根本不在话下,有兴趣可以研究一下,日后有空看看图片处理的源码也是蛮有意思的。
四,一些想法
其实4G网络下,一般的web图片(40k)左右,上述两种图片加载方式其实差别不大,而且有一部分人认为,先加载模糊的图片其实用户体验也并不好,所以怎么选择就见仁见智了。
我在最近写的一个作品展示页面(有大量图片)上遇到了图片逐行加载时间比较久(有几秒时间图片只有一截,下面空白等待加载)影响用户体验的问题,因此换成交错扫描的加载方式,起码页面打开会在极短时间内显示模糊图片,当用户认真看的时候,图片早就变清晰了。
其实解决方法还有很多,例如图片我应该处理成缩略图和原图两种,在index页面显示缩略图(因为足够小,所以加载速度足够快,两种图片加载方式没有明显区别),点击进去再显示原图。以后还会涉及到展示页超过一页,设置延时加载图片的问题,以后有实践的话会分享记录一下。
希望自己能尽快拓展知识面(有利于更好地理解学习更多的内容),同时也能挤出时间深入研究某一两个点,逝者如斯夫,加油,在有限的时间内尽可能多做事,多学习才是关键,多花时间最多算努力,虽然努力也很重要。
- 浅谈图片加载:逐行扫描VS交错扫描
- 逐行扫描与隔行扫描
- 逐行扫描与隔行扫描
- 什么叫逐行扫描和隔行扫描?
- 逐行扫描和隔行扫描的比较
- 隔行扫描与逐行扫描的来龙去脉
- 什么叫逐行扫描和隔行扫描
- 隔行扫描与逐行扫描的区别
- 逐行扫描和隔行扫描的区别,原理
- 逐行扫描
- 什么叫逐行扫描和隔行扫描?它们有什么优缺点?
- 隔行扫描与逐行扫描视频有什么区别
- 逐行扫描和隔行扫描?它们有什么优缺点?
- 逐行扫描(Progressive scanning),隔行扫描(interlace scanning),场
- 隔行扫描和逐行扫描(interlace and progressive )
- FFmpeg怎么区分识别视频是逐行扫描还是隔行扫描
- ffmpeg将视频从隔行扫描转为逐行扫描
- Android:图片加载库Glide VS Picasso
- Leetcode:85. Maximal Rectangle
- Metaspoilt简单攻击操作
- Java数据类型及类型转换
- composer centos下的安装教程
- arp欺骗
- 浅谈图片加载:逐行扫描VS交错扫描
- 41-Climbing Stairs-leetcode
- centos7安装 mysql
- ANSI、UTF-8、Unicode(little endian)、Unicode big endian
- C中存储器分配
- Android控件属性大全
- 同样的错误不能犯两次(九):透支一时
- 【整理转载】四月股票市场分析与复盘
- 22