`
axl234
  • 浏览: 268964 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

使用渐进式JPEG来提升用户体验

 
阅读更多

 

JPEG文件有两种保存方式他们分别是Baseline JPEG(标准型)和Progressive JPEG(渐进式)。两种格式有相同尺寸以及图像数据,他们的扩展名也是相同的,唯一的区别是二者显示的方式不同。

 

Baseline JPEG

 

这种类型的JPEG文件存储方式是按从上到下的扫描方式,把每一行顺序的保存在JPEG文件中。打开这个文件显示它的内容时,数据将按照存储时的顺序从上到下一行一行的被显示出来,直到所有的数据都被读完,就完成了整张图片的显示。如果文件较大或者网络下载速度较慢,那么就会看到图片被一行行加载的效果,这种格式的JPEG没有什么优点,因此,一般都推荐使用Progressive JPEG。

 


Progressive JPEG

和Baseline一遍扫描不同,Progressive JPEG文件包含多次扫描,这些扫描顺寻的存储在JPEG文件中。打开文件过程中,会先显示整个图片的模糊轮廓,随着扫描次数的增加,图片变得越来越清晰。这种格式的主要优点是在网络较慢的情况下,可以看到图片的轮廓知道正在加载的图片大概是什么。在一些网站打开较大图片时,你就会注意到这种技术。

 


渐进式图片带来的好处是可以让用户在没有下载完图片就可以看到最终图像的大致轮廓,一定程度上可以提升用户体验。(瀑布留的网站建议还是使用标准型的)




另外渐进式的图片的大小并不会和基本的图片大小相差很多,有时候可能会比基本图片更小。渐进式的图片的缺点就是吃用户的CPU和内存,不过对于现在的电脑来说这点图片的计算并不算什么。

说了这边多下面就改讲讲怎么讲图片保存为或者转化为Progressive JPEG了。

1、PhotoShop

 

在photoshop中有“存储为web所用格式”,打开后选择“连续”就是渐进式JPEG。

 

 

 

 
分享到:
评论

相关推荐

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

    页面利用渐进式JPEG来提升用户体验度 在网页设计与优化中,图片的加载速度对于用户体验至关重要。由于JPEG格式在互联网上广泛使用,它对页面性能的影响不容忽视。JPEG文件主要有两种保存方式:Baseline JPEG(标准...

    YLProgressiveImageDemo:一个图片渐进式(模糊到清晰)下载示例

    5. **用户体验设计**:渐进式加载不仅可以提升加载速度,还能通过动态地改变图片质量,为用户提供实时反馈。例如,可以先显示低质量的模糊图片,随着数据的加载,逐渐提高图片的清晰度。 YLProgressiveImageDemo-...

    HowMediumdoesprogressiveimage

    5. 用户体验优化:渐进式图像加载对用户体验有显著提升,尤其是在移动设备上。快速展示基本信息,使用户感觉页面响应迅速,同时也降低了用户等待完整图片加载的不耐烦感。 6. 性能指标:通过渐进式加载,Medium能够...

    jpeg2000

    此外,它还支持“渐进式传输”,即图像数据可以按照优先级顺序逐步传输和显示,提高了用户体验。 Kakadu_V2.2.3是JPEG2000的一个实现版本,它是一个强大的JPEG2000编解码器,由Kakadu Systems公司开发。这个版本...

    Photoshop-Quick-Jpeg-Web-Optimizer-Action:您好,我为网络图片创建了此操作。 质量70,渐进式JPEG。 它会自动将您的图片保存到桌面上。 只需按F9键即可采取行动!

    "渐进式JPEG"是JPEG的一种显示方式,它允许图像在不完全加载时逐步显示,提高了用户体验,尤其是在网络连接较慢的情况下。 Photoshop的动作功能允许用户录制一系列操作,然后通过简单的快捷键(如F9)重复执行这些...

    JPEG2000标准与图像压缩

    总结来说,JPEG2000标准通过引入小波变换和自适应熵编码,实现了高效、灵活和高质量的图像压缩,其码流特性、渐进式显示、随机访问以及颜色管理功能都极大地提升了数字图像处理的水平。对于有兴趣深入理解这一技术的...

    jpeg-turbo.zip

    此外,它还提供了一种称为“渐进式JPEG”的模式,允许图像在网络中逐步加载,提高了用户体验。 该库提供了C和C++接口,可以方便地集成到各种应用程序中,如图像处理软件、服务器端的图像处理服务、以及需要快速处理...

    JPEG2000图像压缩基础、标准和实践——部分1.pdf

    此外,JPEG2000的渐进式解码特性使得在网络上传输大图像文件时能够快速预览低分辨率版本,改善了用户体验。 ### 结论 JPEG2000图像压缩技术代表着图像压缩领域的重大进步,它结合了高效的压缩算法和灵活的标准框架...

    YUV图像JPEG编码代码

    - 还可以使用渐进式编码,使得JPEG图像可以在下载部分数据后就开始显示,提高用户体验。 5. **实际应用**: - 这种C语言实现的JPEG编码器可能对嵌入式系统或资源有限的环境特别有用,因为它不需要依赖外部库,只...

    仿渐进式加载图片浏览器 iOS

    在iOS开发中,仿渐进式加载图片浏览器是一种优化用户体验的重要技术。渐进式加载意味着图片在用户查看时逐步显示,而不是一次性加载完整张图片,这样可以显著减少初始加载时间,提升应用性能,并且在低带宽环境下...

    react-image-lazy:围绕React图像的轻质包装纸,具有内置误差边界和渐进式加载效果

    `react-image-lazy` 是一个专门为React设计的轻量级组件库,它提供了一种优雅的方式来处理图像的懒加载和错误处理,同时带有渐进式加载效果,极大地优化了网页性能。以下是关于这个库的详细知识点: 1. **React组件...

    JPEG+2000新的静止图像压缩标准

    JPEG2000的码流组织采用了渐进式的编码方式,这意味着接收端可以在接收到一部分数据后就开始解码和显示图像,随着更多数据的到来,图像的质量会逐渐提高。这种方式不仅提高了传输效率,也增强了图像传输的交互性和...

    swift-Concorde在iOS中实现ProgressiveJPEG图片加载的三方库。

    渐进式JPEG是一种特殊的JPEG图像格式,它允许图片在下载过程中逐步显示,提高了用户体验,尤其是在网络速度较慢的情况下。 Concorde库的设计目标是提供一个高效、易于集成的解决方案,帮助开发者在iOS应用中实现高...

    HDPhoto与JPEG2000比较

    与其他格式相比,JPEG2000的一个显著特点是支持渐进式解码,即可以在接收部分数据后就开始显示图像。 **编码器设置:** - 不同的小波变换方法; - 多级分解; - 可变比特率编码; - 无损压缩选项。 #### 附录2:...

    JS实现图片加载模糊到清晰.zip

    综上所述,"JS实现图片加载模糊到清晰"是通过利用渐进式JPEG、`Intersection Observer API`、CSS滤镜和JavaScript事件监听等技术,提供更好的用户体验,尤其是在图片资源较大的网页中。通过理解和实践这个技术,...

    Concorde下载和解码渐进JPEGs

    在IT行业中,渐进式JPEG(Progressive JPEG)是一种图像编码方法,允许图像在加载过程中逐步显示,而不是一次性完整加载。这种技术对于网络环境不稳定或带宽有限的情况非常有用,因为用户可以提前看到图像的大致轮廓...

    jpeg ios .a 静态库 libjpeg-turbo

    它支持JPEG基线和渐进式编码,以及YCbCr、RGB、灰度等多种颜色空间。 3. **iOS开发环境**: iOS应用的开发主要使用Swift或Objective-C语言,通过Xcode IDE进行。静态库(.a文件)是iOS应用中常见的一种库形式,它...

    libjpeg-turbo-2.0.1.tar.gz

    3. **渐进式JPEG支持**:libjpeg-turbo支持创建和处理渐进式JPEG,允许图像在下载过程中逐步显示,提高了用户体验。 4. **JPEG质量控制**:用户可以根据需求调整JPEG的压缩质量,平衡图像质量和文件大小。 三、版本...

    Java_一个Android库,用于管理图像和它们使用的内存.zip

    3. **渐进式JPEG加载**:支持渐进式JPEG,用户可以先看到低质量的图像,随着数据的加载,图像逐渐清晰,提高了用户体验。 4. **Bitmap复用**:通过Bitmap池,Fresco可以复用已经解码的Bitmap,进一步节省内存。 5....

Global site tag (gtag.js) - Google Analytics