文档章节

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

___白
 ___白
发布于 2015/11/05 10:59
字数 983
阅读 92
收藏 0

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

Baseline JPEG

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

baseline

Progressive JPEG

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

progressive

渐进式图片带来的好处是可以让用户在没有下载完图片就可以看到最终图像的大致轮廓,一定程度上可以提升用户体验。(瀑布留的网站建议还是使用标准型的)

baseline_vs_progressive

 

 

另外渐进式的图片的大小并不会和基本的图片大小相差很多,有时候可能会比基本图片更小。渐进式的图片的缺点就是吃用户的CPU和内存,不过对于现在的电脑来说这点图片的计算并不算什么。

说了这边多下面就改讲讲怎么讲图片保存为或者转化为Progressive JPEG了。

1、PhotoShop

在photoshop中有“存储为web所用格式”,打开后选择“连续”就是渐进式JPEG。

photoshop

 

2、Linux

检测是否为progressive jpeg : identify -verbose filename.jpg | grep Interlace(如果输出 None 说明不是progressive jpeg;如果输出 Plane 说明是 progressive jpeg。)

将basic jpeg转换成progressive jpeg:> convert infile.jpg -interlace Plane outfile.jpg

3、PHP

使用imageinterlaceimagejpeg函数我们可以轻松解决转换问题。

<?php
    $im = imagecreatefromjpeg("pic.jpg");
    imageinterlace($im, 1);
    imagejpeg($im, "./php_interlaced.jpg", 100);
    imagedestroy($im);
?>

4、Python

import PIL
from exceptions import IOError
 
img = PIL.Image.open(&quot;c:\\users\\biaodianfu\\pictures\\in.jpg&quot;)
destination = &quot;c:\\users\\biaodianfu\\pictures\\test.jpeg&quot;
try:
    img.save(destination, &quot;JPEG&quot;, quality=80, optimize=True, progressive=True)
except IOError:
    PIL.ImageFile.MAXBLOCK = img.size[0] * img.size[1]
    img.save(destination, &quot;JPEG&quot;, quality=80, optimize=True, progressive=True)

5、jpegtran

jpegtran -copy none -progressive <inputfile> <outputfile>

6、C#

using (Image source = Image.FromFile(@&quot;D:\temp\test2.jpg&quot;)) { 
    ImageCodecInfo codec = ImageCodecInfo.GetImageEncoders().First(c =&gt; c.MimeType == &quot;image/jpeg&quot;); 
    EncoderParameters parameters = new EncoderParameters(3);
    parameters.Param[0] = new EncoderParameter(System.Drawing.Imaging.Encoder.Quality, 100L);
    parameters.Param[1] = new EncoderParameter(System.Drawing.Imaging.Encoder.ScanMethod, (int)EncoderValue.ScanMethodInterlaced);
    parameters.Param[2] = new EncoderParameter(System.Drawing.Imaging.Encoder.RenderMethod, (int)EncoderValue.RenderProgressive); 
    source.Save(@&quot;D:\temp\saved.jpg&quot;, codec, parameters);
}


本文转载自:http://www.biaodianfu.com/progressive-jpeg.html

___白
粉丝 89
博文 2
码字总数 10
作品 0
深圳
私信 提问
渐进式 JPEG (Progressive JPEG)来提升用户体验

本文转载于:猿2048网站渐进式 JPEG (Progressive JPEG)来提升用户体验 1、概述 jpg格式分为:Baseline JPEG(标准型)和Progressive JPEG(渐进式)。两种格式有相同尺寸以及图像数据,扩展...

前端老手
08/28
11
0
使用渐进式 JPEG 来提升用户体验

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

FungLeo
2016/08/17
0
0
[开发者简报第十二期] Web历史 | Vim历史 | React的完整介绍 | JavaScript SEO | 编程算法 | JavaScript 代码规范

文摘 了解渐进式JPEG和WebP格式 什么是渐进式jpeg 渐进式JPEG是使用与典型标准JPEG不同的编码过程创建的图像。传统上,JPEG从上到下,从左到右进行编码和解码。这被称为基线编码。但是,渐进...

developergang
07/26
3.3K
2
Android Progressive JPEG 图片由模糊到清晰

我们在浏览网页的时候,经常会看到一些网络图片由模糊变的清晰的过程。在android 开发中,我们也会遇到这样的需求。那么这个是怎么实现的呢? 一,背景知识: 技术标签 关键字 Progressive ...

Carlyle_Lee
2018/11/11
141
0
Radware:研究显示图像优化不佳影响用户网站体验

日前,Radware发布了一份经过验证的数据,证实Web页面未经有效优化的图像会对用户体验产生明显可衡量的影响。 Radware委托神经科学研究领导者NeuroStrata对三种不同的图像渲染进行了测试。通...

d1j4robv
2014/11/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

聊聊nacos的notifyConfigInfo

序 本文主要研究一下nacos的notifyConfigInfo CommunicationController nacos-1.1.3/config/src/main/java/com/alibaba/nacos/config/server/controller/CommunicationController.java @Cont......

go4it
昨天
1
0
队列-顺序(c/c++实现)

队列是在线性表功能稍作一改形成的,在生活中排队是不能插队的吧,先排队先得到对待,慢来得排在最后面,这样来就形成了”先进先出“的队列。 队列(顺序)实现的三个步骤: 定义所需的功能(...

白客C
昨天
5
0
安装tomcat部署网站/nginx代理tomcat/tomcat部署多个网站

来源:https://blog.csdn.net/Powerful_Fy 安装jdk: Oracle官方下载 https://www.oracle.com/technetwork/java/javase/downloads/index.html yum安装openjdk: 1.查找可使用的jdk包: [roo......

asnfuy
昨天
4
0
Linux 安装 Android studio

官网下载linux 版本 android xxxxx-xxxx.tar.gz 然后 找到它 解压缩 得到 android-studio文件夹 执行 [root@monkey java]# mv ./android-studio /opt [root@monkey java]# cd /opt/android-s......

MrLins
昨天
6
0
VMware vSphere虚拟机的迁移

VMware vSphere 6.7下,虚拟机的迁移按照移动的内容,可以分为4种: 1)冷迁移(cold migration) 2)热迁移(vMotion) 3)存储热迁移(storage vMotion) 4)完全热迁移(shared-nothing ...

大别阿郎
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部