文档章节

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

王尘宇
 王尘宇
发布于 2017/09/07 00:04
字数 732
阅读 7
收藏 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
前端知识点乱炖之一(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
前端每周清单第 43 期:2017 JavaScript 回顾、Rust 与 WebAssembly 开发游戏、Node.js 架构模式

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

王下邀月熊
2017/12/11
0
0
Web应用程序中关于图片的使用

Web应用程序中关于图片的使用 JPG:以24位颜色存储单个光栅图像 优点: 1. 与平台无关 2. 适合摄影作品和写实作品 3. 它支持最高级别的压缩,可提高或降低压缩的级别 4. 渐进式JPEG文件交错 ...

吞吞吐吐的
2017/09/08
0
0
【译】更多关于渐进式图片加载的实现

这篇文章也发在我的博客,欢迎围观😄 Translated by FrankZhang. 如有错误,敬请不吝告知,谢谢! 在以前的一篇文章中,我仔细分析了Medium.com用来展示图片的技术,这种技术可以在展示图片...

FrankCheung
07/02
0
0

没有更多内容

加载失败,请刷新页面

加载更多

get和post详解

get和post是表单提交的两种方式,get请求数据通过域名后缀URL传送,用户可见,不安全,post请求数据通过在请求报文正文里传输,相对比较安全。get是通过URL传递表单值,post通过URL看不到表单...

青衣霓裳
34分钟前
1
0
linux-如何快速替换IP

在Linux在做高可用的时候,经常会使用到虚拟IP。在windows上一个网卡可以配置两个IP,在Linux直接使用ip命令就可以添加了。 添加 ip address add 192.168.1.200/24 broadcast 192.168.1.255 ...

Linux就该这么学
39分钟前
0
0
Unix-Linux 编程实践教程 第五章 小结

设备文件中用逗号连接起来的两个数字为主设备号和从设备号。主设备号确定实际的设备驱动程序,从设备号作为参数。 如下图中的,主设备号-4,从设备号-2 设备文件中的i-node存储的是指向内核子...

Explorer0
41分钟前
1
0
virtual box centos7 挂载进行文件和共享使用说明

一、virtualbox共享文件夹无访问权限问题解决方法 (转载 http://www.cnblogs.com/zhuguanhao/p/6192777.html) 这篇文章主要介绍了virtualbox共享文件夹无访问权限问题解决方法,造成这个问题...

mbzhong
44分钟前
1
0
Rabbitmq---消息队列

一 . MQ:message queue   消息队列的作用:   1 通信解耦   2 高峰限流 原理分析: 一开始,认证系统是强耦合的,A系统传递认证系统消息接收计算结果的过程中   1 传给认证系统   2 认...

Ala6
48分钟前
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部