文档章节

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

王尘宇
 王尘宇
发布于 2017/09/07 00:04
字数 732
阅读 6
收藏 0

一、简介

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转换 据说是如下的代码:
<?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会出现一些问题!

© 著作权归作者所有

共有 人打赏支持
王尘宇
粉丝 1
博文 450
码字总数 469557
作品 0
西安
使用渐进式 JPEG 来提升用户体验

今天才认识到原来JPEG文件有两种保存方式,分别是Baseline JPEG(标准型)和Progressive JPEG(渐进式)。两种格式有相同尺寸以及图像数据,扩展名也是相同的,唯一的区别是二者显示的方式不...

FungLeo
2016/08/17
0
0
前端每周清单第 43 期:2017 JavaScript 回顾、Rust 与 WebAssembly 开发游戏、Node.js 架构模式

前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公...

王下邀月熊
2017/12/11
0
0
前端知识点乱炖之一(HTML/CSS)

前面面试知识总结之HTML/css篇 1.行内元素、块级元素和空(void)元素有哪些? 行内元素:a 、b、span、img、input、strong、select、label、em、button、textarea。 块级元素:div、ul、li、...

w-rain
2016/03/23
61
0
JAVA转换jpg图片为渐进式图片

很早之前看到一篇《web前端图片极限优化策略》,了解有jpg分为baseline-jpeg和preogressive-jpeg。 具体的区别如下: baseline-jpeg: 在文件较大或者网络下载速度较慢的情况下,用户在浏览器...

一路向北的兔斯基
2016/04/21
600
1
浅谈Web图像优化

前端优化有很多,图像优化也是其中的一部分。无论是渐进增强还是优雅降级,图像优化成为了开发上不可忽视的一部分。 知其然,须知其所以然 图像优化的前提是需要了解图像的基本原理。常规的图...

johnson
2017/10/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

c++_CWinApp

CWinApp:MFC 中的主应用程序类封装用于 Windows 操作系统的应用程序的初始化、运行和终止. ON_COMMAND(ID_FILE_NEW, &CWinApp::OnFileNew)ON_COMMAND(ID_FILE_OPEN, &CWinApp::OnFileOpen...

一个小妞
6分钟前
0
0
可变对象传入set

set=([1,2,3]), 其中([ ])只是set的表现形式,并不是把list放入set中 >>> s1=set([1,2,3])>>> L[1, 2, 3]>>> s1{1, 2, 3}>>> s1(L)Traceback (most recent call last): File "<std......

fadsaa
9分钟前
0
0
多生产与多消费:操作栈

代码同“多生产与一消费”,区别在于测试类代码 public class Test { public static void main(String[] args) { MyStack myStack = new MyStack(); Produce produce......

起个昵称好难啊
10分钟前
0
0
@Component 的作用

1、@controller 控制器(注入服务) 用于标注控制层,相当于struts中的action层 2、@service 服务(注入dao) 用于标注服务层,主要用来进行业务的逻辑处理 3、@repository(实现dao访问) ...

踏破铁鞋无觅处
10分钟前
0
0
工厂模式

工厂方法模式 一个抽象产品类,可以派生出多个具体产品类。 一个抽象工厂类,可以派生出多个具体工厂类。 每个具体工厂类只能创建一个具体产品类的实例。 简单工厂模式 又称静态工厂方法模式...

noob_fly
13分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部