阿呆🐱的空间站
11 min read

图片知识介绍

图片类型和特点

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

  • 矢量图
    • 矢量图用线段和曲线来描述图像，图形也包含了色彩和位置信息，但不记录每一点的信息。进行矢量图形的编辑时，定义的是描述图形的线和曲线的属性，这些属性将被记录下来，对矢量图形的操作，例如改变位置、形状和大小等都不会改变矢量图形的品质。矢量图形在显示或输出图像时，图像的品质不受设备的分辨率的影响
  • 位图，也称点阵图
    • 一张位图放大之后，会看到图片是有很多小格子组成的，像栅格一样，每个格由像素组成，每一个像素由二进制表示，每一个像素上的二进制位数越多表示的色彩越丰富。每一个像素上的色彩是固定的。进行位图的操作时，本质是对每一个像素上的信息的定义，它不像矢量图一样定义图像的轮廓线或者直线，所以位图的品质和图像生成时采用的分辨率相关的，这也是为什么位图被放大之后，位图的边缘上会出现很多锯齿的原因

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

位图文件压缩类型

  • 有损压缩
    • 有损压缩是对图像本身的改变，在保存图像时保留了较多的亮度信息，而将色相相似的信息和周围的像素进行合并，合并的比例不同，压缩的比例也不同，由于描述图像的信息减少了，压缩比例可以变得很高，图片的质量也会随之下降
    • 有损压缩可以减少图像在内存和磁盘中所占用的空间，但是同时也会保持颜色的逐渐变化，删除图像中的突然变化，所以在屏幕上观看图像时，图像不会产生较大的外观影响，肉眼比较难以分辨出来，比如绿色的草地，在压缩的时间会围绕绿色的渐变来进行压缩
  • 无损压缩
    • 无损压缩是对文件本身的压缩，是对文件的数据存储的方式进行优化，用某种算法表示重复的数据信息，图像可以完全还原，不会影响图像的内容，不会损失图像的任何细节
    • 无损压缩是将相同的颜色信息只保存一次，首先确认图像中哪些区域是相同的，哪些是不同的
    • 总的来说：无损压缩可以删除一些重复的数据，可以减少在磁盘上保存的尺寸，但是并不能减少图像的内存占用量，这是因为，从磁盘上读取图像时，软件又回把丢失的像素用匹配的颜色信息填充进来

前端需了解的图片格式

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

  • GIF
    • GIF图像是基于颜色列表的，最多支持8位(256色)，不支持半透明，只能是完全透明或者不透明，文件内部分成许多存储块，用来存储多福图像或者决定图像表现行为的控制块，用来实现帧动画和交互式的应用，GIF文件还通过LZW压缩算法无损压缩图像数据来减少图像尺寸
  • PNG PNG图片图像是无损压缩的图片格式，不支持动画，与有损压缩相比，压缩之后的体积相对也较大，支持PNG8、PNG24、PNG32三种格式
    • PNG8: 非动画的Logo和图标等保真的小图尽量选择使用PNG8，尽量不选择使用PNG24和PNG32，因为PNG24和PNG32体积比PNG8大，PNG8格式主要是半透明的，支持透明度的调节，同一张图PNG8比GIF的体积是更小的
    • PNG24：如果想要极好的显示效果，并且不在乎文件的体积大小，是可以选择PNG24的，PNG24支持2的24次方种颜色，不支持透明
    • PNG32: 在PNG24的基础上增加了8位的透明信息，支持透明度的调节
  • JPEG
    • JPEG适用于亮度和色彩压缩，在照片或者带阴影的图像上效果良好，但是不适用与图标几何图形，截图等图形场景。
    • JPEG图片文件后缀名是.jpg或者.jpeg，是一种有损光栅图像格式，即属于有损压缩，每次压缩保存JPEG时，一些信息会永久丢失
  • WEBP
    • WEBP是基于自影像编码格式VP8,非正式发音为weppy，支持有损压缩，以及使用重复数据替换的无损压缩。有损WEBP图像平均比视觉相似压缩级别的JPEG图像体积小25-35%。无损WEBP图像通常比PNG格式的相同图像小26%。
    • WEBP还支持动画：在有损WEBP文件中，图像数据由VP8比特流表示，其中可能包含多个帧。无损WebP保存ANIM描述动画的ANMF块和表示动画序列帧的块。支持循环。
    • WEBP现在在主要网络浏览器(IE除外)的最新版本中得到了广泛的支持，虽然它没有对老版本的浏览器进行支持，兼容性是存在一定问题
  • SVG
    • SVG可伸缩、无限放大图片质量不会下降，SVG文件是纯粹的XML，可以被很多文本编辑工具进行读取和修改，图像中的文本是可选的，可以和JavaScript一起进行运行，特别适合做地图，数据可视化，在线条艺术，LOGO和图标等方面都有应用
  • AVIF
    • AVIF 是由开放媒体联盟 (AOM) 开发并于 2019 年发布的另一种最新图像格式。该格式基于 AV1 视频编解码器，源自视频帧

其他图片格式

  • BMP(Bitmap)是Windows操作系统中的标准图像文件格式，支持多种压缩方法，包括有损或无损算法，可分为两类：设备相关位图(DDB)和设备无关位图(DIB)，BMP文件通常是不压缩的，所以一般比同一幅图像的压缩图像文件格式要大很多
  • TIFF是一种灵活的位图格式，大部分TIFF文件一般也是未压缩的，但是也支持有损压缩和无损压缩，主要用于存储包括艺术照之类的照片，可以是任何类型的图像。但是TIFF文件往往比其他格式的图像大。这是因为通常包含元数据，以及大多数TIFF图像未压缩或使用压缩算法后仍保留相当大体积的文件的事实
  • APNG(Animated Portable Network Graphics)是Mozilla首次引入的一种文件格式，它扩展了PNG标准以添加对动画图像的支持。类似于动画GIF格式，APNG更强大，因为它支持各种颜色深度, 而GIF仅支持8位索引颜色

图片压缩

借助第三方工具压缩

  • ImageMagick 支持命令行操作，功能强大
  • TinyPNG 在线压缩工具，简单易用
  • Squoosh Google推出的在线压缩工具，支持多种格式转换和压缩
  • ImageOptim 通过编写脚本来简化和标准化这方面的操作

响应式图片

响应式图片技术允许根据不同设备和屏幕大小加载合适的图片资源，从而提高加载速度和节省带宽

使用 srcset 和 sizes

< img src="small.jpg" 
  srcset="small.jpg 300w, medium.jpg 600w, large.jpg 1200w" 
  sizes="(max-width: 600px) 300px, (max-width: 1200px) 600px, 1200px" 
  alt="Example image">

使用picture

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  < img src="image.jpg" alt="Example image">
</picture>