这两种完全不同的JPEG加载方式,你肯定见过!
现如今网站所使用的的图片格式多种多样,但是有一种图片格式占到了 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加载方式,你肯定见过!的更多相关文章
- 两种常用的jquery事件加载的方法 的区别
两种常用的jquery事件加载的方法 $(function(){}); window.onload=function(){} 第一个呢,是在DOM结构渲染完成以后调用的,这时候网页中一些资源还 ...
- fashion_mnist多分类训练,两种模型的保存与加载
from tensorflow.python.keras.preprocessing.image import load_img,img_to_array from tensorflow.python ...
- ios的UIImage的两种不同的图片加载方式 tom猫
在ios的UI交互设计时,对图片的处理是难免的:不同的处理方式会对内存有不同的影响: ********************************************************* ...
- Linux共享库两种加载方式简述
Linux共享库两种加载方式简述 动态库技术通常能减少程序的大小,节省空间,提高效率,具有很高的灵活性,对于升级软件版本也更加容易.与静态库不同,动态库里面的函数不是执行程序本身 的一部分,而是 ...
- Xamarin Android Fragment的两种加载方式
android Fragment的重点: 3.0版本后引入,即minSdk要大于11 Fragment需要嵌套在Activity中使用,当然也可以嵌套到另外一个Fragment中,但这个被嵌套的Fra ...
- DLL的两种加载方式
案例简述 在某项目中,需要使用两个不同版本的HCNetSDK库,我们通常使用的静态加载DLL的方式不能满足该需求,故用到动态加载DLL的方式. 背景技术及术语解释 静态加载:也称隐式调用,指在运行程序 ...
- Android Activity四种加载方式
Android之四种加载方式 (http://marshal.easymorse.com/archives/2950 图片) 在多Activity开发中,有可能是自己应用之间的Activity跳转,或 ...
- dll的加载方式主要分为两大类,显式和隐式链接
之前简单写过如何创建lib和dll文件及简单的使用(http://blog.csdn.net/betabin/article/details/7239200).现在先再深入点写写dll的加载方式. d ...
- Android学习笔记_50_(转 四种加载方式详解(standard singleTop singleTask singleInstance)
Android之四种加载方式 (http://marshal.easymorse.com/archives/2950 图片) 在多Activity开发中,有可能是自己应用之间的Activity跳转,或 ...
- Android 四种加载方式详解(standard singleTop singleTask singleInstance) .
Android之四种加载方式 (http://marshal.easymorse.com/archives/2950 图片) 在多Activity开发中,有可能是自己应用之间的Activity跳转,或 ...
随机推荐
- 从BST到LSM的进阶之路
前言 相信大家之前都了解过很多种数据结构,我之前总是两两的,也就是从局部上去进行比较,没有从整体上进行这些树的发展脉络进行梳理,因此经常看完没多久就忘了.看来确实是需要从本源出发,不仅要知其然还要知其 ...
- 神经网络入门篇:激活函数(Activation functions)
激活函数 使用一个神经网络时,需要决定使用哪种激活函数用隐藏层上,哪种用在输出节点上.到目前为止,之前的博客只用过sigmoid激活函数,但是,有时其他的激活函数效果会更好. 在神经网路的前向传播中, ...
- Windows文件句柄无效
今天我用FreeFileSync从移动硬盘复制一个名为Con的文件夹到本地硬盘,复制失败. 通过文件夹资源管理器Explorer直接访问文件夹则提示"禁止访问",右键属性切换到安全 ...
- 想基于AI变现吗,这个Star有1.8K的开源项目分享给你
前言 在如今AI爆发的时代,每个人都想借着AI这股风,进行变现,今天给大家分享一个开源项目,他可以让你基于AI的能力进行变现 项目介绍 这个项目在Github有1.8k个star,可见其欢迎程度,作者 ...
- K8s 多租户方案的挑战与价值
在当今企业环境中,随着业务的快速增长和多样化,服务器和云资源的管理会越来越让人头疼.K8s 虽然很强大,但在处理多个部门或团队的业务部署需求时,如果缺乏有效的多租户支持,在效率和资源管理方面都会不尽如 ...
- Oracle ADG容灾端部署Rman备份的一些实践经验
随着数据库中数据量的不断增加.业务的复杂性提高.各种政策颁布的系统容灾等级要求,数据库备份的工作及备份文件的有效性及备份文件的管理变得愈发重要.在Oracle数据库中提供了强大的备份和恢复工具,其中R ...
- 快速认识什么是:Docker
Docker,一种可以将软件打包到容器中并在任何环境中可靠运行的工具.但什么是容器以及为什么需要容器呢?今天就来一起学快速入门一下Docker吧!希望本文对您有所帮助. 假设您使用 Cobol 构建了 ...
- 7、If分支语句
1.程序的流程结构 程序的流程控制结构一共有三种: 顺序结构 选择结构 循环结构. 顺序结构: 从上向下 逐行执行 选择结构:条件满足,某些代码才会执行.0-1次 分支语句: if,switch,se ...
- 87 GB 模型种子,GPT-4 缩小版,超越ChatGPT3.5,多平台在线体验
瞬间爆火的Mixtral 8x7B 大家好,我是老章 最近风头最盛的大模型当属Mistral AI 发布的Mixtral 8x7B了,火爆程度压过Google的Gemini. 缘起是MistralAI ...
- RISC-V系列单片机快速入门指南
如何获取芯片开发资料 方法一:按型号选择 我们更推荐采用按型号选择的方法,获取所对应型号芯片的开发资料,这能有效降低错误使用资料的风险! 沁恒官网首页的产品中心,点击青稞 RISC-V 通用系列,可跳 ...