10分钟了解前端的图片格式
2024-12-09 11:13:16

本篇博客转载:聊聊几种常见的图片格式Webp、GIF、PNG、JPG

关于图片,算是前端性能优化的一个核心,所以这里就不自己整理,而是尽可能的采用其他大佬整理好的标准答案了。

文中的内容我根据自己的经验确认了一下,基本没什么问题,可以放心食用。

正文

前端开发中经常和图片打交道,那么熟悉各种图片格式的应用场景以及优劣势对于我们尤为重要。

基础的那些老古董问题让人心生烦躁,相比那些问题,图片这个问题虽然基础且老旧,但是在前端开发中确实频繁出现。

时至今日,在性能优化这里,图片的压缩依旧是一个避不开的问题。

关于网页中对图片的性能优化,后续会单独出一张内容,本次只是简单整理这些图片的格式,做个基础的了解。

关于压缩

  • 无损压缩:对文件的数据存储方式进行优化,采用某种算法表示重复的数据信息,能在保证图片的质量的同时降低图片的尺寸,png是其中的代表,但尺寸相比原图减少不多。可以还原
  • 有损压缩:在压缩的时候,去除了人眼无法识别的图片细节,图片质量会下降,图片尺寸能得到很大程度的压缩。不可还原
  • 无压缩:不会对图片进行任何压缩处理,能够精准的呈现原图片,例如:BMP。开发中我们考虑到加载性能问题,几乎不会考虑这种图片

GIF图

优点

  • Gif图采用LZW压缩算法进行编码,采用无损压缩,这意味着图片在压缩后质量不会受损
  • Gif图1987年提出的,距今发展了几十年了,兼容性好
  • 支持透明度,GIF允许图像中的像素具有不透明和透明属性,这使得它在创建带有透明背景的图像时非常有用。
  • 支持动画,GIF支持简单的动画,可以用来创建循环播放的短动画,这在网页设计和用户界面方面非常有用。

缺点

  • 只能存储8位颜色索引,色彩复杂、细节丰富的图片不适合

使用场景

  • 适合简单的动画或者图标,例如:Logo、Icon、动图。
  • 上报埋点时采用1 * 1像素的透明Gif图。
    • 避免跨域,用图片上报而不是采用fetch或ajax去上报,用Image的src不会存在跨域行为并且也会触发请求
    • 兼容性好,所有浏览器都支持Image对象,即便浏览器不支持XMLHttpRequest(例如古董级的IE),也能进行上报。相比与navigator.sendBeacon兼容性更好。
    • 体积最小,1*1的透明PNG是67字节,而Gif只需要43个字节。同样的性能比PNG图片减少35%的流量。
    • 支持透明,用Gif上报埋点最好是透明的,一是避免影响页面展示,而是可以不用存储颜色索引,减少图片大小。
    • 避免请求取消,ajax请求过程中离开页面会导致请求中断,最终导致上报失败。然而Image的src不会中断。

PNG图

PNG默认是PNG-24格式

png-8

  • png-8相比gif对透明的支持更好,同等质量下,尺寸也更小。
  • 非常适合作为gif的替代品。但png-8也一个明显的不足就是不支持动画。
  • 这也是png-8没办法完全替代gif的重要原因。如果没有动画需求推荐使用png-8来替代gif。

png-24、png-32

  • 图片质量和bmp差不多,在尺寸是比bmp更小。
  • 尺寸上比JPG、GIF更大,当然质量更高。

优点:

  • 支持透明度:PNG支持透明通道,允许创建带有透明背景的图像。
  • 无损压缩:可以保持图片质量不损失细节。
  • 广泛支持:PNG是一种通用格式,计算机或移动设备都支持。

缺点

  • 复杂、色彩丰富图片尺寸大
  • 不支持动画

适合场景

  • 适合图形设计,可以保存文本、线条图案等高质量、透明图像。
  • 相机设备,适合后期对图片进行处理。

JPG图

优点

  • 有损压缩:JPG格式具备出色的压缩性能,可以显著的减少图像文件的大小。这使得它在Web上显示一些质量要求不高的图像非常有用,减少加载时间
  • 广泛支持:是一种通用格式,在计算机以及手机设备上都广泛支持。
  • 色彩丰富:JPG支持24位颜色深度,因此可以显示百万种颜色。
  • 可调质量:用户可根据使用场景来调图片质量,较高的图片质量,会导致图片尺寸较大。

缺点

  • 不支持透明:不能够创建带有透明背景的图像,PNG或GIF更适合这种情况。
  • 损失性压缩:JPG是有损压缩,而且一旦压缩无法还原,会丢失一些细节。
  • 不适合带有文本或线条的图片: JPG压缩在处理文本和线条方面不如其他格式好,可能会导致图像出现锯齿或模糊情况。
  • 不适合Icon或者Logo:相对于PNG或GIF图,在尺寸上没有优势

WEBP图

兼容性

关于兼容性查询,想必大家或多或少都看过,这里我就不像他们那样放图浪费资源了。

想要查询图片的兼容性问题,直接访问: Caniuse.com,或者直接点击:“webp” | Can I use… Support tables for HTML5, CSS3, etc

总之,IE11依然不支持Webp,需要额外引入一些JS工具来进行解决,如果你的项目需要兼容IE11,那么就要注意这个问题了。

使用场景

  • 当Web要求图片加载速度和图片显示质量时,可以适当的降低下图片质量减少图片尺寸来满足场景。
  • 是用于要求色彩丰富的场景。

介绍

WebP(Web Picture)是一种现代的图像格式,由Google开发,旨在提供高质量的图像压缩和更快的加载速度。WebP支持有损和无损压缩,以及透明度,是一种灵活的图像格式,适用于Web和移动应用程序。

对于前端来说,该图片格式常用于一种优化网页加载速度的手段之一。

优点

  • 高压缩率:WebP 图像通常具有更小的文件大小,相对于传统格式如JPEG和PNG,可以减少带宽使用和加速页面加载速度
  • 高质量:即使在较高的压缩率下,WebP 图像通常能够保持较高的图像质量,减少了压缩损失。
  • 透明度:WebP支持透明通道,可以用于创建带有透明背景的图像,类似于PNG格式。
  • 动画:WebP还支持动画图像,允许创建小型、高质量的动画。
  • 广泛支持:大多数浏览器都已经支持,但是目前低版本的Safri以及IE还不支持。

缺点

  • 兼容性:考虑到目前还不能完全放弃IE以及旧版本Safri,所以还不能完全切到该图片格式。

使用场景

  • WebP 格式适用于网页开发,特别是那些需要快速加载的网站和移动应用程序。
  • 它适合用于图像库、图标、按钮、背景图像、动画以及需要高质量和小文件大小的图像。
  • WebP 的无损压缩特性使它适用于医学图像、卫星图像、地图和其他需要高质量和完整性的图像应用。

开发兼容

考虑到Webp格式还存在兼容性问题,开发中如何应用Webp图片格式?

  • 如果图片资源存储在服务端,可以设计一套通用方案,在服务端根据Accept请求头判断是否支持Webp格式,如果支持返回Webp格式,否则返回PNG格式
  • 如果你无法说服后端去实现上述方案还想采用Webp图片优化页面加载,可以考虑维护两个格式的图片,然后使用picture标签去实现
1
2
3
4
5
<picture>
<source type="image/webp" srcset="flower.webp">
<source type="image/jpeg" srcset="flower.jpg">
<img src="flower.jpg" alt="">
</picture>

结语

整理图片格式这个面试题相对来说我倒不是那么抗拒,这个问题虽然基础但是在开发中,如果专注性能优化的朋友可能会很熟悉。

早年我在优化小程序的时候,曾经在处理图片问题上废了不少功夫,那时候对图片相关的知识了解了很多,但是不成体系。

如今花了些时间整理了一下,心理倒也颇为感慨。

只是时间不够,不然我大概率还会整理一下矢量图和像素图的区别,还有一些性能优化的点。

后续在整理性能优化的相关文章的时候,我会着重整理相关内容。

参考

聊聊几种常见的图片格式Webp、GIF、PNG、JPG