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

 更新时间:2014年12月01日 16:13:08   投稿:hebedich  
这篇文章主要介绍了页面利用渐进式JPEG来提升用户体验度的相关资料,需要的朋友可以参考下

今天才认识到原来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 

具体教程参考 https://www.jb51.net/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实现从身份证中提取生日

    本文给大家分享的是一则使用php实现的从身份证中提取出生日期的函数,非常的简单,有需要的小伙伴可以参考下
    2016-05-05
  • php面向对象的用户登录身份验证

    php面向对象的用户登录身份验证

    这篇文章主要为大家详细介绍了php面向对象的用户登录身份验证,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • Laravel框架自定义公共函数的引入操作示例

    Laravel框架自定义公共函数的引入操作示例

    这篇文章主要介绍了Laravel框架自定义公共函数的引入操作,结合实例形式分析了Laravel5.5框架自定义公共函数的创建、配置、使用等相关操作技巧,需要的朋友可以参考下
    2019-04-04
  • Yii2分页的使用及其扩展方法详解

    Yii2分页的使用及其扩展方法详解

    这篇文章主要介绍了Yii2分页的使用及其扩展方法详解的相关资料,本文介绍的非常详细,具有参考借鉴价值,需要的朋友可以参考下
    2016-05-05
  • 常用PHP框架功能对照表

    常用PHP框架功能对照表

    这篇文章主要介绍了常用PHP框架功能对照表,对于选择PHP框架进行开发时具有一定的参考价值,需要的朋友可以参考下
    2014-10-10
  • tp5.1 框架路由操作-URL生成实例分析

    tp5.1 框架路由操作-URL生成实例分析

    这篇文章主要介绍了tp5.1 框架路由操作-URL生成,结合实例形式分析了tp5.1 框架针对路由操作URL生成的相关实现原理、操作技巧与注意事项,需要的朋友可以参考下
    2020-05-05
  • thinkphp3.2.3 分页代码分享

    thinkphp3.2.3 分页代码分享

    这篇文章主要为大家介绍了thinkphp3.2.3 分页代码,非常实用的代码,感兴趣的小伙伴们可以参考一下
    2016-07-07
  • php添加数据到xml文件的简单例子

    php添加数据到xml文件的简单例子

    下面小编就为大家带来一篇php添加数据到xml文件的简单例子。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • Yii框架分页技术实例分析

    Yii框架分页技术实例分析

    这篇文章主要介绍了Yii框架分页技术,结合实例形式详细分析了Yii框架相关控制器、模型与视图使用技巧,需要的朋友可以参考下
    2019-08-08
  • 详解PHP使用Redis存储session时的一个Warning定位

    详解PHP使用Redis存储session时的一个Warning定位

    本篇文章主要介绍了PHP使用Redis存储session时的一个Warning定位,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07

最新评论