如何生成渐进式JPEG

转载 (原文地址) 移花香 随笔 待整理 1902阅读 2014-08-28 07:24:15 举报

原网址

如何生成渐进式JPEG

技术
标准JPEG(baseline jpeg)与渐进式JPEG(progressive jpeg)

JPEG有两种类型:标准型和渐进式。标准型JPEG使用逐行式压缩编码。在浏览器中,若是 标准的JPEG,载入是由上往下显示的。

渐进式JPEG显示图像是从模糊/低分辨率,然后逐渐增强至完整显示。Path的图片采用的就是 渐进式JPEG。两种类型的JPEG可以采用下图生动说明:

baseline jpeg vs progressive jpeg

渐进式是一个好的解决方案,因为它可以让用户在没有下载完图片前就可以看到最终图像的大体轮廓(当 然也有人指出这影响UI体验)。但是我还是认为,对于网络连接不好的情况下,采用渐进式JPEG是有好处的。 同时,渐进式JPEG格也增强了Web页面的性能(但是要指出的是并不是所有浏览器都支持渐进式JPEG, 例如 IE天然就不支持)

好的,进入正题。为了得到渐进式JEPG我们可以怎么做呢?

产生渐进式JPEG

使用photoshop
当你在photoshop完成你的大作,要保存时。你可以选择"Save as",选择JPEG格式,那么你可以看到如下选项

PS选项

Baseline: 指示在屏幕上加载时按逐行加载
Baseline Optimized: 同样按按逐行加载,但是采用哈夫曼压缩编码
Progressive: 你可以指定3-5个层,用以代表在显示完整图像的3-5个阶段
使用jpegtran
使用Photoshop完成并不适合批量转换图片,特别是对于网站应用,大部分图片不是手工编辑而是由用户上传的。这里介绍 一个工具,jpegtran。这个工具被广泛用于优化网站JPEG图片。它提供许多JPEG 优化,压缩,变换功能,当然也包含从标准JPEG转渐进式JPEG。命令如下:

jpegtran -copy none -progressive <inputfile> <outputfile>
当然,如果你想玩玩新花样,自己定义渐进方式。你可以使用-scans命令选项。在github上就有一个这样的示例: resp_prog_jpg_tests。

使用PHP代码
其实PHP图像处理库已经帮你想好了。使用imageinterlace和imagejpeg函数我们可以轻松解决转换问题。下面是我所写的一个示例:

<?php
// Create an image instance
$im = imagecreatefromjpeg('2.jpg');

// Enable interlancing
imageinterlace($im, 1);

// Save the interlaced image
imagejpeg($im, './php_interlaced.jpg', 100);
imagedestroy($im);

?>
有关渐进式JPEG的介绍就先到这里了,待续。下面的链接同样十分有价值,建议阅读。

相关链接

一个progressive例子
在new ipad是选择baseline jpeg还是progressive jpeg
webkit retina上对JPEG显示的不足
JPEG基本入门【本文部分来源此文】
图像优化【这里介绍了一个Yahoo图像优化好工具】
作者: A Man

评论 ( 1 )
最新评论