页面利用渐进式JPEG来提升用户体验度


Posted in PHP onDecember 01, 2014

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

Baseline JPEG

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

页面利用渐进式JPEG来提升用户体验度

Progressive JPEG

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

页面利用渐进式JPEG来提升用户体验度

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

页面利用渐进式JPEG来提升用户体验度

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

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

1、PhotoShop

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

页面利用渐进式JPEG来提升用户体验度 

具体教程参考 https://3water.com/photoshop/182198.html

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

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

<?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("c:\\users\\biaodianfu\\pictures\\in.jpg")
destination = "c:\\users\\biaodianfu\\pictures\\test.jpeg"
try:
  img.save(destination, "JPEG", quality=80, optimize=True, progressive=True)
except IOError:
  PIL.ImageFile.MAXBLOCK = img.size[0] * img.size[1]
  img.save(destination, "JPEG", quality=80, optimize=True, progressive=True)

5、jpegtran

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

6、C#

using (Image source = Image.FromFile(@"D:\temp\test2.jpg")) { 
  ImageCodecInfo codec = ImageCodecInfo.GetImageEncoders().First(c => c.MimeType == "image/jpeg"); 
  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(@"D:\temp\saved.jpg", codec, parameters);
}

以上就是使用渐进式JPEG图片来提升页面体验度的全部内容了,很简单实用,这里推荐给小伙伴们。

PHP 相关文章推荐
留言板翻页的实现详解
Oct 09 PHP
PHP PDO函数库详解
Apr 27 PHP
php 获取本机外网/公网IP的代码
May 09 PHP
PHP UTF8中文字符截断函数代码
Sep 11 PHP
php正则表达式使用的详细介绍
Apr 27 PHP
php正则取img标记中任意属性(正则替换去掉或改变图片img标记中的任意属性)
Aug 13 PHP
php+Mysqli利用事务处理转账问题实例
Feb 11 PHP
PHP类的封装与继承详解
Sep 29 PHP
PHP获取用户访问IP地址的5种方法
May 16 PHP
PHP对象、模式与实践之高级特性分析
Dec 08 PHP
PHP多进程简单实例小结
Nov 09 PHP
PHP CURL实现模拟登陆并上传文件操作示例
Jan 02 PHP
php页面函数设置超时限制的方法
Dec 01 #PHP
PHP实现抓取HTTPS内容
Dec 01 #PHP
php设置静态内容缓存时间的方法
Dec 01 #PHP
thinkphp实现发送邮件密码找回功能实例
Dec 01 #PHP
PHP清除字符串中所有无用标签的方法
Dec 01 #PHP
php防止网站被刷新的方法汇总
Dec 01 #PHP
phpstorm编辑器乱码问题解决
Dec 01 #PHP
You might like
简单的方法让你的后台登录更加安全(php中加session验证)
2012/08/22 PHP
php随机输出名人名言的代码
2012/10/07 PHP
php简单分页类实现方法
2015/02/26 PHP
基于PHP实现的事件机制实例分析
2015/06/18 PHP
PHP递归创建多级目录
2015/11/05 PHP
PHP code 验证码生成类定义和简单使用示例
2020/05/27 PHP
juqery 学习之三 选择器 层级 基本
2010/11/25 Javascript
浏览器常用高宽的jquery插件
2011/02/24 Javascript
jQuery UI AutoComplete 使用说明
2011/06/20 Javascript
JS自定义对象实现Java中Map对象功能的方法
2015/01/20 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
2015/09/06 Javascript
原生js实现轮播图
2017/02/27 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
2019/08/17 Javascript
Vue $attrs &amp; inheritAttr实现button禁用效果案例
2020/12/07 Vue.js
[52:27]2018DOTA2亚洲邀请赛 3.31 小组赛B组 paiN vs Secret
2018/04/01 DOTA
简单介绍Python中用于求最小值的min()方法
2015/05/15 Python
python实现爬虫统计学校BBS男女比例之数据处理(三)
2015/12/31 Python
python安装mysql-python简明笔记(ubuntu环境)
2016/06/25 Python
Python的时间模块datetime详解
2017/04/17 Python
使用Py2Exe for Python3创建自己的exe程序示例
2018/10/31 Python
selenium python 实现基本自动化测试的示例代码
2019/02/25 Python
Python配置虚拟环境图文步骤
2019/05/20 Python
Python实现时间序列可视化的方法
2019/08/06 Python
python orm 框架中sqlalchemy用法实例详解
2020/02/02 Python
python-docx文件定位读取过程(尝试替换)
2020/02/13 Python
python pyg2plot的原理知识点总结
2021/02/28 Python
HTML5语音识别标签写法附图
2013/11/18 HTML / CSS
英国领先的体验日提供商:Buyagift
2019/04/19 全球购物
Stutterheim瑞典:瑞典高级外套时装品牌
2019/06/24 全球购物
Bandier官网:奢侈、时尚前卫的健身服装首选目的地
2020/07/05 全球购物
活动总结模板
2014/05/09 职场文书
弘扬雷锋精神演讲稿
2014/05/10 职场文书
绿色环保标语
2014/06/12 职场文书
旅游活动总结
2014/08/27 职场文书
2014年社区计生工作总结
2014/11/18 职场文书
感谢信模板大全
2015/01/23 职场文书