美文网首页
使用渐进式 JPEG 来提升用户体验

使用渐进式 JPEG 来提升用户体验

作者: 胡萝卜樱 | 来源:发表于2017-03-10 21:13 被阅读0次

JPEG文件有两种保存方式

1.Baseline JPEG(基准式)
2.Progressive JPEG(渐进式)

两种格式有相同尺寸以及图像数据,它们的扩展名也是相同的,唯一的区别是二者显示的方式不同。

Baseline JPEG

这种类型的JPEG文件存储方式是按从上到下的扫描方式,把每一行顺序的保存在JPEG文件中。打开这个文件显示它的内容时,数据将按照存储时的顺序从上到下一行一行的被显示出来,直到所有的数据都被读完,就完成了整张图片的显示。如果文件较大或者网络下载速度较慢,那么就会看到图片被一行行加载的效果,这种格式的JPEG没有什么优点,因此,一般都推荐使用Progressive JPEG。

image

Progressive JPEG

和Baseline JPEG一遍扫描不同,Progressive JPEG文件包含多次扫描,这些扫描顺寻的存储在JPEG文件中。打开文件过程中,会先显示整个图片的模糊轮廓,随着扫描次数的增加,图片变得越来越清晰。这种格式的主要优点是在网络较慢的情况下,可以看到图片的轮廓知道正在加载的图片大概是什么。在一些网站打开较大图片时,你就会注意到这种技术。

image

为什么要用渐进式图片

  • 增加用户体验,开始能看到个大概轮廓

  • 不占过多内存

  • 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

相关文章

网友评论

      本文标题:使用渐进式 JPEG 来提升用户体验

      本文链接:https://www.haomeiwen.com/subject/sfvogttx.html