页面利用渐进式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 at(@)符号的用法简介
Jul 11 PHP
php数组转换js数组操作及json_encode的用法详解
Oct 26 PHP
PHP header()函数常用方法总结
Apr 11 PHP
非常好用的Zend Framework分页类
Jun 25 PHP
PHP函数func_num_args用法实例分析
Dec 07 PHP
magento后台无法登录解决办法的两种方法
Dec 09 PHP
php面向对象之反射功能与用法分析
Mar 29 PHP
完美解决thinkphp唯一索引重复时出错的问题
Mar 31 PHP
PHP实现对xml的增删改查操作案例分析
May 19 PHP
laravel通过创建自定义artisan make命令来新建类文件详解
Aug 17 PHP
PHP实现压缩图片尺寸并转为jpg格式的方法示例
May 10 PHP
PHP设计模式(七)组合模式Composite实例详解【结构型】
May 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简单封装了一些常用JS操作
2007/02/25 PHP
php导出word文档与excel电子表格的简单示例代码
2014/03/08 PHP
PHP 读取和编写 XML
2014/11/19 PHP
php取得字符串首字母的方法
2015/03/25 PHP
PHP迭代器和迭代的实现与使用方法分析
2018/04/19 PHP
javascript动态加载实现方法一
2012/08/22 Javascript
js正则表达式匹配数字字母下划线等
2015/04/14 Javascript
javascript中使用new与不使用实例化对象的区别
2015/06/22 Javascript
浏览器复制插件zeroclipboard使用指南
2016/03/26 Javascript
深入理解jQuery 事件处理
2016/06/14 Javascript
微信小程序 页面跳转及数据传递详解
2017/03/14 Javascript
Vue axios 中提交表单数据(含上传文件)
2017/07/06 Javascript
angular 实现的输入框数字千分位及保留几位小数点功能示例
2018/06/19 Javascript
Vue 动态组件与 v-once 指令的实现
2019/02/12 Javascript
vue 集成jTopo 处理方法
2019/08/07 Javascript
[03:01]2014DOTA2国际邀请赛 小组赛7月13日TOPPLAY
2014/07/14 DOTA
Python实现的桶排序算法示例
2017/11/29 Python
Python3 queue队列模块详细介绍
2018/01/05 Python
flask框架视图函数用法示例
2018/07/19 Python
详解python3中的真值测试
2018/08/13 Python
Python使用ffmpy将amr格式的音频转化为mp3格式的例子
2019/08/08 Python
Python实现数值积分方式
2019/11/20 Python
如何基于Python + requests实现发送HTTP请求
2020/01/13 Python
flask框架渲染Jinja模板与传入模板变量操作详解
2020/01/25 Python
python中for in的用法详解
2020/04/17 Python
Python+OpenCV图像处理——实现轮廓发现
2020/10/23 Python
matplotlib之多边形选区(PolygonSelector)的使用
2021/02/24 Python
ivx平台开发之不用代码实现一个九宫格抽奖功能
2021/01/27 HTML / CSS
Java和Javasciprt的区别
2012/09/02 面试题
职工运动会邀请函
2014/01/19 职场文书
学雷锋月活动总结
2014/04/25 职场文书
大学生暑期社会实践证明范本
2014/10/24 职场文书
《开国大典》教学反思
2016/02/16 职场文书
Python标准库之typing的用法(类型标注)
2021/06/02 Python
Python 数据可视化之Seaborn详解
2021/11/02 Python
Django数据库(SQlite)基本入门使用教程
2022/07/07 Python