前端开发应该了解的图片知识

2,942 阅读7分钟

作者:喜欢吃辣的程序员
原文:前端开发应该了解的图片知识

前端在日常的开发中,会遇到很多使用图片的场景,而图片在网站资源中所占的流量占比也比较高,合理的使用和优化图片,不仅可以减小带宽消耗和服务器压力,也可能会比其他的优化的手段会效率高一些,例如花大力气去优化前端打包文件。笔者在这篇文章里面总结了一些前端常用的图片类型、优缺点以及他们的使用场景。

图片的类型和特点

计算机中以矢量图或位图格式来显示图像:

  • 矢量图用线段和曲线来描述图像,图形也包含了色彩和位置信息,但不记录每一点的信息。进行矢量图形的编辑时,定义的是描述图形的线和曲线的属性,这些属性将被记录下来,对矢量图形的操作,例如改变位置、形状和大小等都不会改变矢量图形的品质。矢量图形在显示或输出图像时,图像的品质不受设备的分辨率的影响。

  • 位图,也称点阵图,如下图所示:

屏幕快照 2021-09-01 下午2.27.52.png

一张位图放大之后,会看到图片是有很多小格子组成的,像栅格一样,每个格由像素组成,每一个像素由二进制表示,每一个像素上的二进制位数越多表示的色彩越丰富。每一个像素上的色彩是固定的。进行位图的操作时,本质是对每一个像素上的信息的定义,它不像矢量图一样定义图像的轮廓线或者直线,所以位图的品质和图像生成时采用的分辨率相关的,这也是为什么位图被放大之后,位图的边缘上会出现很多锯齿的原因。

简单来说矢量图可以被无限放大,并且不会失真,而位图则在放大之后会出现失真的情况,但是位图因为在在像素上用二进制表示色彩,所以位图能表现的色彩丰富度会比矢量图多。

位图文件压缩类型

图片文件压缩分为两种类型,有损压缩和无损压缩。

  • 无损压缩是对文件本身的压缩,是对文件的数据存储的方式进行优化,用某种算法表示重复的数据信息,图像可以完全还原,不会影响图像内容,不会损失图像的任何细节。无损压缩是将相同的颜色信息只保存一次,无损压缩首先会确定图像中哪些区域是相同的,哪些是不同的。总的来说无损压缩可以删除一些重复的数据,可以减小在磁盘上保存的尺寸,但是并不能减少图像的内存占用量,这是因为,从磁盘上读取图像时,软件又会把丢失的像素用匹配的颜色信息填充进来。

  • 有损压缩是对图像本身的改变,在保存图像时保留了较多的亮度信息,而将色相相似的信息和周围的像素进行合并,合并的比例不同,压缩的比例也就不同,由于描述图像的信息减少了,压缩比例可以变得很高,图片的质量也会随之下降。有损压缩可以减少图像在内存和磁盘中所占用的空间,但是同时也会保持颜色的逐渐变化,删除图像中的突然变化,所以在屏幕上观看图像时,图像不会产生较大的外观影响,肉眼比较难以分辨出来,比如绿色的草地,在压缩的时间会围绕绿色的渐变来进行压缩。

前端常用的图片格式

前端常见的图片格式有GIF、PNG、JPEG、WEBP和SVG等。

  1. GIF GIF图像是基于颜色列表的,最多支持8位(256色),不支持半透明,只能是完全透明或者不透明,文件内部分成许多存储块,用来存储多福图像或者决定图像表现行为的控制块,用来实现帧动画和交互式的应用,GIF文件还通过LZW压缩算法无损压缩图像数据来减少图像尺寸。

  2. PNG 图片图像是无损压缩的图片格式,不支持动画,与有损压缩相比,压缩之后的体积相对也较大,支持PNG8、PNG24、PNG32三种格式:

  • PNG8: 非动画的Logo和图标等保真的小图尽量选择使用PNG8,尽量不选择使用PNG24和PNG32,因为PNG24和PNG32体积比PNG8大,PNG8格式主要是半透明的,支持透明度的调节,同一张图PNG8比GIF的体积是更小的。

  • PNG24:如果想要极好的显示效果,并且不在乎文件的体积大小,是可以选择PNG24的,PNG24支持2的24次方种颜色,不支持透明。

  • PNG32: 在PNG24的基础上增加了8位的透明信息,支持透明度的调节。

  1. JPEG JPEG适用于亮度和色彩压缩,在照片或者带阴影的图像上效果良好,但是不适用与图标几何图形,截图等图形场景。JPEG图片文件后缀名是.jpg或者.jpeg,是一种有损光栅图像格式,即属于有损压缩,每次压缩保存JPEG时,一些信息会永久丢失。

  2. WEBP WEBP是基于自影像编码格式VP8,非正式发音为weppy,支持有损压缩,以及使用重复数据替换的无损压缩。有损WEBP图像平均比视觉相似压缩级别的JPEG图像体积小25-35%。无损WEBP图像通常比PNG格式的相同图像小26%。 WEBP还支持动画:在有损WEBP文件中,图像数据由VP8比特流表示,其中可能包含多个帧。无损WebP保存ANIM描述动画的ANMF块和表示动画序列帧的块。支持循环。 WEBP现在在主要网络浏览器(IE除外)的最新版本中得到了广泛的支持,虽然它没有对老版本的浏览器进行支持,兼容性是存在一定问题。但是可以回退到JPEG或PNG格式,例如:

<picture>
    <source srcSet="example.webp 1x" type="image/webp">
    <img src="example.jpg">
</picture>
  1. SVG SVG可伸缩、无限放大图片质量不会下降,SVG文件是纯粹的XML,可以被很多文本编辑工具进行读取和修改,图像中的文本是可选的,可以和JavaScript一起进行运行,特别适合做地图,数据可视化,在线条艺术,LOGO和图标等方面都有应用。要想掌握SVG只是不是一件容易的事情,学习成本嫌贵较高,渲染成本也比较高,对性能有一定的影响。

扩展

除了以上在前端常见的图片格式之外,还有几种在项目中使用得相对较少的图片格式:

  • BMP(Bitmap)是Windows操作系统中的标准图像文件格式,支持多种压缩方法,包括有损或无损算法,可分为两类:设备相关位图(DDB)和设备无关位图(DIB),BMP文件通常是不压缩的,所以一般比同一幅图像的压缩图像文件格式要大很多。

  • TIFF是一种灵活的位图格式,大部分TIFF文件一般也是未压缩的,但是也支持有损压缩和无损压缩,主要用于存储包括艺术照之类的照片,可以是任何类型的图像。但是TIFF文件往往比其他格式的图像大。这是因为通常包含元数据,以及大多数TIFF图像未压缩或使用压缩算法后仍保留相当大体积的文件的事实。

  • APNG是Mozilla首次引入的一种文件格式,它扩展了PNG标准以添加对动画图像的支持。类似于动画GIF格式,APNG更强大,因为它支持各种颜色深度, 而GIF仅支持8位索引颜色。