JPEG文件有两种保存方式
1.Baseline JPEG(基准式)
2.Progressive JPEG(渐进式)
两种格式有相同尺寸以及图像数据,它们的扩展名也是相同的,唯一的区别是二者显示的方式不同。
Baseline JPEG
image这种类型的JPEG文件存储方式是按从上到下的扫描方式,把每一行顺序的保存在JPEG文件中。打开这个文件显示它的内容时,数据将按照存储时的顺序从上到下一行一行的被显示出来,直到所有的数据都被读完,就完成了整张图片的显示。如果文件较大或者网络下载速度较慢,那么就会看到图片被一行行加载的效果,这种格式的JPEG没有什么优点,因此,一般都推荐使用Progressive JPEG。
Progressive JPEG
image和Baseline JPEG一遍扫描不同,Progressive JPEG文件包含多次扫描,这些扫描顺寻的存储在JPEG文件中。打开文件过程中,会先显示整个图片的模糊轮廓,随着扫描次数的增加,图片变得越来越清晰。这种格式的主要优点是在网络较慢的情况下,可以看到图片的轮廓知道正在加载的图片大概是什么。在一些网站打开较大图片时,你就会注意到这种技术。
为什么要用渐进式图片
-
增加用户体验,开始能看到个大概轮廓
-
不占过多内存
-
Chrome + Firefox + IE9浏览器下,渐进式图片加载更快,而且是快很多,至于其他浏览器,与基准式图片的加载一致,至少不会拖后腿(一个名叫Ann Robson的人,最近对各个浏览器下渐进式图片呈现做了测试)
在测试各个浏览器(未说明都为最新版本)时发现:
1.Chrome对“渐进”和“交错”都支持良好
2.Safari(PC/MAC)对“渐进”不支持,“交错支持良好”
3.Fiefox对“渐进”和“交错”都支持良好
4.Opera对“渐进”和“交错”都支持良好
5.IE9对“渐进”和“交错”都不支持
- 开始大小框架就定好,不会像基准式图片一样,由于尺寸未设定而造成回流——提高的渲染性能
检查图片是否是渐进式图片
我用的是imagemagick,先安装了homebrew
$ brew install imagemagick
输入要检查图片
$ identify -verbose file.jpg | grep Interlace
如果返回 Interlace: JPEG 图片是渐进式
如果返回 Interlace: None 图片不是渐进式
把图片变成jpeg渐进式的几种方法
1.Photoshop,sketch
-
在photoshop中有“存储为web所用格式”,打开后选择“连续”就是渐进式JPEG。
image
-
在sketch中导出为 progressive
2.PHP
- 使用imageinterlace和imagejpeg函数我们可以轻松解决转换问题。
<?php
$im = imagecreatefromjpeg('pic.jpg');
imageinterlace($im, 1);
imagejpeg($im, './php_interlaced.jpg', 100);
imagedestroy($im);
?>
3.利用ImageMagick
方法一:convert 2.jpg -interlace Plane 2.jpg
方法二:magick 2.jpg -interlace Plane 2.jpg
相关文章
【Mac技巧】分享几个打包好的图像处理脚本:https://sspai.com/post/29492
【如何生成渐进式JPEG】:http://www.qdfuns.com/notes/13972/b445e237058b19b3ab2b55bf5789b72f
网友评论