现如今网站所使用的的图片格式多种多样,但是有一种图片格式占到了 74% 的使用量。它就是 JPEG,即联合图像专家组。这类文件的后缀通常为 .jpg 或 .jpeg,是摄影中常见的图片类型。

JPEG 和图像压缩

JPEG 是 1992 年开发的一种用于压缩图像的格式,是目前 Internet 上最常用的图像格式,主要用于一些高色深的照片和复杂的图形展示。JPEG 图像是使用有损压缩算法处理过的图像,在图像被压缩时,会丢失细节信息。这是因为创建 JPEG 图像的目的是最大限度地减少存储位数,从而有效地减小文件大小。

依靠压缩减少文件大小,既可以节省磁盘空间又能缩短传输和加载的时间。而更短的传输时间让图像在网站上的加载速度更快。但是,在大多数情况下,减小文件大小会对内容产生影响。就照片和图形来说,减小文件大小可能会导致图像质量降低。过度压缩虽然让文件加载速度快但也会严重影响观看效果。

而随着互联网速度越来越快,尤其到了 5G 时代,我们对图片和视频的清晰度也有了超高的要求。这就导致一些网站为了保证清晰度,图片的体积都非常大,我们在浏览时就不能一次性看全整张图,而需要等等图片逐渐加载。

通常网站使用的 JPEG 的内容显示通常有两种类型。

  • 基线或标准 JPEG

  • 渐进式 JPEG

基线 JPEG(Baseline JPEG)

这是标准的 JPEG 格式压缩,包括数码相机和图像编辑软件等一些成像产品都会支持。基线 JPEG 最常见的应用之一是在 Web 浏览器中呈现的图像。基线 JPEG 算法在从网络下载处理数据时逐行渲染图像。当数据从网络到达计算机的缓冲区时,数据以流的形式进行处理。虽然压缩数据的目的是减小文件大小以加快下载速度,但这也取决于网络的速度和计算机 CPU 处理数据的能力。如果应用程序支持,GPU 还有助于渲染大文件。压缩时大于 30 MP(百万像素)的大型高分辨率 RAW 图像文件可能需要更长的时间来下载和解码。这就会形成我们查看大图时比较常见的从上至下逐行显示,即首先显示图像的顶部。然后它会逐行加载到底部,直到显示出完整的图像。

这种加载方式在面对特别大的图片时,往往需要我们等待过长才能看到完整图片,很容易让网站流失用户。为此,网站一般会选择相对更好一点的方式渐进式 JPEG(Progressive JPEG)。

渐进式 JPEG(Progressive JPEG)

渐进式 JPEG(Progressive JPEG),即PJPEG,是该标准的三种流行压缩模式之一。渐进式 JPEG 以特定方式压缩照片和图形,与基线 JPEG 不同,PJPEG 在 Web 浏览器中呈现时,会首先给出模糊图像的外观。然后一点一点地开始图片渲染,直到它显示完全渲染的图像。浏览器实际上是逐行解释图像,但在占位符中提供了完整图像的模糊预览。随着 Web 浏览器的渲染引擎处理数据,图像的对比度开始变得更清晰、更详细。直到最后渲染完毕,用户将看到完整的清晰图像。

当然我们一直都在强调没有什么是完美的,PJPEG 也有不足,来详细看一下它的优缺点:

但是相比而言 PJPEG 能够起到一种很有意义的心理效果,让用户有东西可看,而不必坐着干等大型图像慢慢显示在屏幕上。

目前 PJPEG 适用于大部分常用的浏览器,包括 Chrome、Firefox 和 Internet Explorer 9 及更高版本。旧版本的 Internet Explorer 在显示渐进式 JPEG 时存在一些问题,不过这只是很小一部分用户。而不支持渐进式 JPEG 格式的浏览器会像普通 JPEG 一样加载照片。

创建 PJPEG

一般我们正常使用图形编辑软件时,软件会自动将照片和图形保存为普通 JPEG。如果需要创建渐进式 JPEG 则需要手动调整。比如在 Photoshop 中,将图像导出为 JPEG 后,在格式中勾选“连续”,即保存为 PJPEG。

还可以使用免费程序软件 IrfanView 创建渐进式 JPEG 。

什么什么?你说太麻烦?不怕不怕,我要放大招啦!

又拍云图片处理支持直接输出渐进式 JPEG 图片,使用 图片 URL + 间隔符 + /progressive/true 参数就可以,想用就用,不怕麻烦!

如果你是网站管理者,如果你正在被高清大图的加载方式所困扰,可以来尝试一下渐进式 JPEG 加载哦!除了支持图片输出设置,又拍云图片处理还支持图片缩小、放大、裁剪、图片水印、文字水印、锐化、高斯模糊等 40+ 功能,让您换个花样玩转图片处理。还在等什么,赶快来试一试吧!

这两种完全不同的JPEG加载方式,你肯定见过!相关推荐

  1. 两种方法实现图片懒加载

    懒加载的实现原理 图片的加载是由src引起的,当对src赋值时,浏览器就会请求图片资源.根据这个原理,我们使用HTML5 的data-xxx属性来储存图片的路径,在需要加载图片的时候,将data-xx ...

  2. 动态链接库dll的两种加载方式

    在第一篇技术博客"动态链接库简介"中说到了两种加载方式,当时没有详细说明,这里详细说明一下 可以通过两种方式 1.隐式链接(需要.dll,.lib,.h) 2.显式链接(需要.dl ...

  3. 最新完整代码:使用word2vec预训练模型进行增量训练(两种保存方式对应的两种加载方式)适用gensim各种版本

    两种方式加载预训练模型(保存方式不一样,加载方式也不一样) 以腾讯训练的100为word2vec small版本为例 word2vec预训练模型下载 腾讯:https://ai.tencent.com ...

  4. Unity游戏开发——新发教你做游戏(三):3种资源加载方式

    文章目录 一.前言 二.Unity的目录结构规范 1.Resources(不是很推荐把资源放这个目录) 2.RawAssets(存放生资源) 3.GameRes(存放熟资源) 4.StreamingA ...

  5. SpringBoot八种bean的加载方式

    目录 第一种bean的加载方式-配置文件 第二种加载bean方式-注解和扫描 创建第三方的bean对象 第三种加载bean方式-不使用配置文件 扩展-bean的加载方式扩展FactoryBean< ...

  6. mysql获取配置文件信息,四种获取MySQL数据库配置文件加载顺序

    简介 有时候帮人排查一下MySQL数据库问题的时候,用ps -ef查看MySQL数据库进程的时候,竟然不显示配置的相关信息. 如果想看MySQL数据库的配置,就会一头雾水,于是就特地整理了一下,4种查 ...

  7. hive--udf函数(开发-4种加载方式)

    UDF函数开发 标准函数(UDF):以一行数据中的一列或者多列数据作为参数然后返回解雇欧式一个值的函数,同样也可以返回一个复杂的对象,例如array,map,struct. 聚合函数(UDAF):接受 ...

  8. Android图片加载之认识bitmap的四种加载方式

    Android的Bitmap有四种高效加载方式 从获取方式分: (1)以文件流的方式 假设在sdcard下有 test.png图片 FileInputStream fis = new FileInpu ...

  9. MyBatis 延迟加载的三种加载方式深入,你get了吗?

    延迟加载 延迟加载对主对象都是直接加载,只有对关联对象是延迟加载. 延迟加载可以减轻数据库的压力, 延迟加载不可是一条SQL查询多表信息,这样构不成延迟加载,会形成直接加载. 延迟加载分为三种类型: ...

最新文章

  1. codevs2693 上学路线(施工)
  2. 实现AIDL接口的Binder连接池
  3. reactjs组件的生命周期:创建时和更新时
  4. Linux下安装oracle数据库步骤
  5. Image-Based Aging Using Evolutionary Computing (EURO 2008)
  6. 根据定制的 XML 文件进行随机抽取节
  7. iOS开发那些事-iOS6苹果地图有用开发
  8. Centos6.3下rsync+sersync安装配置
  9. php x不能转移,[PHP] 从 PHP 5.3.X 迁移到 PHP 5.6.X不兼容点
  10. ajax中的get和post的区别
  11. [渝粤教育] 西南科技大学 翻译 在线考试复习资料
  12. 主动学习、纯半监督学习、直推学习的联系与区别
  13. 龙门飞甲的一点小小感想
  14. 【02】Java进阶:04-String、StringBuilder、ArrayList
  15. 【成功解决】运行qt生成的.exe文件报“无法找到入口”的问题
  16. 北京地铁线路色值颜色
  17. Python量化交易平台开发教程系列0-引言
  18. 一行代码实现自制炫酷二维码
  19. 在树莓派(Linux)上使用FTDI的usb转串口芯片ft232两种驱动方式(VCP和D2xx)
  20. windows上安装Robot Framework和RIDE

热门文章

  1. Java消息队列--ActiveMq 初体验
  2. 按键改变元素背景颜色 链式编程的原理 评分案例 each方法的使用
  3. 在线做计算机考研题,2018年计算机考研真题及参考答案
  4. php socket 效率,php socket 模型及效率问题
  5. Java8函数式编程(2)--流与管道
  6. mysql 特殊字符支持_mysql 解决生僻字,特殊字符插入失败
  7. Perl 教学 Perl5中的引用(指针)
  8. MAC下 IEDA发布tomcat项目的位置
  9. 26.Android Studio下Ndk开发(ffmpeg导入Android studio以cmake方式编译的过程)
  10. 【翻译】Nginx的反向代理