新的图像格式旨在对抗网站膨胀

自 15 年前标准 JPEG、GIF 和 PNG 格式推向市场以来,在支持图像格式方面没有取得太大进展。 原因很简单:跨不同浏览器类型支持新的图像格式很困难。 然而,在过去几年中出现了两种新的图像格式,并且最近开始作为优化图像的一种方式获得关注:WebP(由Google提出)和JPEG XR(由Microsoft支持)。

网站图像吸引了很多讨论,这是有充分理由的:根据HTTP档案,台式计算机上 网站页面权重的61% 是图像,而在移动设备上,这一比例上升到65%。 最重要的是,随着图像变得越来越大,网页上的图像字节数平均每年增长 30% 以上。

自 15 年前标准 JPEG、GIF 和 PNG 格式推向市场以来,在支持图像格式方面没有取得太大进展。 原因很简单:跨不同浏览器类型支持新的图像格式很困难。 然而,在过去几年中出现了两种新的图像格式,并且最近开始作为优化图像的一种方式获得关注:WebP(由Google提出)和JPEG XR(由Microsoft支持)。

WebP vs JPEG XR

两者都借鉴了过去15年的重大技术进步,各有其独特的优势。 每种格式都支持无损和有损压缩以及完全透明,JPEG XR 支持图像的渐进式渲染。 使用这些新格式的网站正在看到显着的结果,与类似质量的JPEG相比,通常 可以节省25%到50%的字节

两者的最大缺点 – 最近的主要采用速度有点慢 – 是浏览器支持:例如,WebP仅在Chrome,Opera和一些较新的Android设备中受支持。 IE 10+ 完全支持 JPEG XR,但在 IE 9 中支持有限。 两者都不支持Firefox和Safari。 对于许多不使用这些浏览器的用户来说,网站的图像似乎已损坏。

Facebook支持WebP

网络P图像格式对这些新格式的一个重大公开测试是Facebook去年春天对WebP的实施。 Facebook能够使用支持WebP的浏览器向用户提供图像,但是当用户试图通过保存,编辑或重新共享照片来操作照片时,就会出现问题。 一位沮丧的用户问道:“如何禁用这个怪物?

图像格式实现的提示

网站可以从这些新的图像优化技术中受益匪浅,但在朝这个方向发展时,需要牢记一些事情:

  • 了解人们将如何使用网站图像。 就Facebook而言,用户显然没有被考虑在内,因为下载,保存,编辑和共享照片是由很大一部分Facebook受众进行的活动。
  • 质量规范化很重要。 使用多种有损格式时,需要考虑质量设置的差异。 选择产生类似感知质量降级的质量设置可以使用 SSIM(结构相似性)等算法来完成。
  • 仅在浏览器支持的情况下使用 WebP 和 JPEG XR。 由于浏览器支持没有交叉,对于希望朝这个方向发展的网站来说,支持两者以实现最大覆盖范围可能是有意义的。

使用这些新的图像优化格式有很多好处,当考虑到上述几点时,网站将看到显着提高的性能和字节节省。 进一步的浏览器支持 – 特别是来自Firefox和Safari – 将更加甜蜜。

Facebook
Twitter
LinkedIn
电子邮件
打印