页面利用渐进式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 相关文章推荐
强烈推荐:php.ini中文版(2)
Oct 09 PHP
PHP数组实例总结与说明
Aug 23 PHP
php中定时计划任务的实现原理
Jan 08 PHP
web站点获取用户IP的安全方法 HTTP_X_FORWARDED_FOR检验
Jun 01 PHP
php递归方法实现无限分类实例代码
Feb 28 PHP
3个PHP多维数组转为一维数组的方法实例
Mar 13 PHP
PHP多进程编程实例
Oct 15 PHP
yii中widget的用法
Dec 03 PHP
php计算多维数组中所有值总和的方法
Jun 24 PHP
PHP实现获取某个月份周次信息的方法
Aug 11 PHP
php判断用户是否关注微信公众号
Jul 22 PHP
PHP 7.0新增加的特性介绍
Jun 08 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
消息持续发送的完整例子
2006/10/09 PHP
怎样使用php与jquery设置和读取cookies
2013/08/08 PHP
简单介绍PHP的责任链编程模式
2015/08/11 PHP
使用ThinkPHP生成缩略图及显示
2017/04/27 PHP
javascript 获取图片颜色
2009/04/05 Javascript
js判断是否为数组的函数: isArray()
2011/10/30 Javascript
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
2014/09/17 Javascript
Node.js事件循环(Event Loop)和线程池详解
2015/01/28 Javascript
基于JavaScript实现TAB标签效果
2016/01/12 Javascript
javascript中的后退和刷新实现方法
2016/11/10 Javascript
jQuery如何跳转到另一个网页 就这么简单
2016/12/28 Javascript
BootStrapValidator初使用教程详解
2017/02/10 Javascript
js 中rewrap-ajax.js插件实例代码
2017/10/20 Javascript
Vue 项目部署到服务器的问题解决方法
2017/12/05 Javascript
qrcode生成二维码微信长按无法识别问题的解决
2019/04/04 Javascript
Vue 自定义指令功能完整实例
2019/09/17 Javascript
[01:10:03]OG vs EG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
[01:30]我们共输赢 完美世界城市挑战赛开启全新赛季
2019/04/19 DOTA
在Django框架中伪造捕捉到的URLconf值的方法
2015/07/18 Python
PyQt5 pyqt多线程操作入门
2018/05/05 Python
Python超越函数积分运算以及绘图实现代码
2019/11/20 Python
零基础小白多久能学会python
2020/06/22 Python
Python内存泄漏和内存溢出的解决方案
2020/09/26 Python
Django用户认证系统如何实现自定义
2020/11/12 Python
德国在线购买葡萄酒网站:Geile Weine
2019/09/24 全球购物
园林设计师自荐信
2013/11/18 职场文书
寒假实习自荐信
2014/01/26 职场文书
《难忘的泼水节》教学反思
2014/02/27 职场文书
清明节网上祭英烈活动总结
2014/04/30 职场文书
服务行业口号
2014/06/11 职场文书
小学六一儿童节活动方案
2014/08/27 职场文书
预备党员转正思想汇报
2014/09/26 职场文书
党员干部四风问题整改措施思想汇报
2014/10/12 职场文书
邀请书格式范文
2015/02/02 职场文书
区域经理岗位职责
2015/02/02 职场文书
2015年挂职锻炼个人总结
2015/10/22 职场文书