WEB前端优化:使用“渐进”图片或“交错”图片

本文介绍了JPEG、GIF和PNG图像格式中的渐进式显示特性,重点讲解了渐进式JPEG的工作原理及其在不同浏览器中的支持情况,并提供了PHP转换及Photoshop生成渐进式JPEG的方法。

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

一、简介  

      JPEG、GIF和PNG这三种图像格式都提供了一种功能,让图像能够更快地显示。图像可以以一种特殊方式存储,显示时先大概显示图像的草图,当文件全部下载后再填充细节(百度图片,QQ空间,点点网等显示大图时都使用的这种方式)。这起到一种很有意义的心理效果,因为这样使人们有东西可看,而不必坐着干等大型图像慢慢显示在屏幕上。但这种效果并不是所有浏览器都支持。

  在测试各个浏览器(未说明都为最新版本)时发现:

  1、Chrome对“渐进”和“交错”都支持良好

  2、Safari(PC/MAC)对“渐进”不支持,“交错支持良好”

  3、Fiefox对“渐进”和“交错”都支持良好

  4、Opera对“渐进”和“交错”都支持良好

  5、IE9对“渐进”和“交错”都不支持

  测试地址:Interlace_test

  图一:基本显示效果演示

  

  图二:渐进\交错显示效果演示

  

  上图一:

  图一中我们可以发现图片是从上倒下一条一条逐渐加载的,显示效果如图一的这种JPG压缩模式叫做顺序式编码(Sequential Encoding),一次将图像由左到右、由上到下顺序处理。也是一种常见的JPG编码模式。

  上图二:

  图二中我们可以发现同样是一样图片,因为图片较大图,要逐渐加载完我们才知道这张图片的大致轮廓,但是在图二上,由于使用了渐进式JPG格式,在图片加载的时候我们已经可以看到了图片的大致轮廓,这种就是渐进式JPG,使用了递增式编码(Progressive Encoding)。

  所以?

  所谓的渐进式JPG格式就是采用了递增式编码的JPG,你可以通过谷歌搜索关键字JPG Progressive Encoding查的更多英文的资料,因为我发现国内这方面的介绍不是很多。

  这种JPG格式是当图像传输的时间较长时,可将图像分数次处理,以从模糊到清晰的方式来传送图像(效果类似GIF在网络上的传输)。

  二、渐进式JPEG创建

  1. php转换

  据说是如下的代码:  

1
2
3
4
5
6
7
<?php
$image = imagecreatefromjpeg($this->attach['target']);
//imagefilter($image, IMG_FILTER_MEAN_REMOVAL);
imageinterlace($image, 1);//php的GD库中自带的函数
imagejpeg($image,$this->attach['target']);//生成相应图片
imagedestroy($image);
?>

  其他语言的转换自己去搜吧。

  2. photoshop生成

  大伙都知道photoshop中有个“存储为web所用格式”,然后,其中(见下图),那个连续勾选就是渐进式JPEG图片了:

  据说,需要勾选那个转换为sRGB选项,在某些浏览器下,图像设置为CMYK会出现一些问题!

  总结

  Scott Gilbertson对渐进式图片有其他的补充:

  1. 你永不知道基本式图片内容,除非他完全加载出来;

  2. 渐进式图片一开始大小框架就定好,不会像基本式图片一样,由于尺寸未设定而造成回流——提高的渲染性能;

  3. 渐进式图片也有不足,就是吃CPU吃内存。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值