引言
最近在掘金看到很多动图头像，但都失真了，好奇就研究了下前端各种图片格式
视觉属性
图片的透明性和色彩丰富程度是两个重要的视觉属性，对于图像的呈现和使用都有着关键的影响。
色彩（Color）：
- 色彩丰富程度是指图像中可以显示的颜色数量。它通常以位（bit）为单位表示，例如8位色彩意味着可以显示2^8 = 256种颜色。 更高的色彩丰富程度意味着图像可以呈现更多的颜色细节和平滑的渐变效果。对于照片、图形和图像处理等领域，较高的色彩丰富程度非常重要，因为它可以确保图像在不同设备上显示更真实和细腻。
- 常见的色彩丰富程度有8位（256色）、16位（65,536色）、24位（约1600万色）和32位（约1677万色）等。 关注图片的透明性和色彩丰富程度对于选择正确的图像格式以及在设计和处理图像时都至关重要。对于需要有透明效果或需要在不同背景上使用的图像，选择支持透明性的格式（如PNG或GIF）是很重要的。而对于需要更高质量和更真实颜色表现的图像，选择具有较高色彩丰富程度的格式（如24位或32位的PNG或JPEG）是明智的选择。
8位色
每个像素所能显示的彩色数为2的8次方，即256种颜色。这种彩色深度适用于较古老的显示设备和简单的图像场景。它在色彩表现方面相对较弱，颜色过渡可能显得不够平滑，导致图像呈现出颗粒感，不适合表现细腻的色彩变化。
16位增强色
每个像素所能显示的彩色数为2的16次方，即65536种颜色。这种彩色深度相对于8位色有了明显的提升，能够更好地表现色彩细节和平滑的过渡效果。它适用于一些对色彩表现要求较高的场景，但仍然有一定的局限性。
24位真彩色
每个像素所能显示的彩色数为24位，即2的24次方，约为1680万种颜色。真彩色是最常见的彩色深度标准，它具备较好的色彩表现能力，可以呈现丰富的色彩细节和平滑的过渡效果，适用于绝大多数图像场景。
32位真彩色
32位真彩色在24位真彩色的基础上再增加了一个表示图像透明度信息的Alpha通道，通常称为32位色。这使得图像可以支持半透明效果，使得图像在叠加时能够更好地融合。32位真彩色并非是2的32次方的色数，它实际上也是约为1680万种颜色，但因为增加了Alpha通道，为了方便称呼，就规定它为32位色。
不同彩色深度的选择取决于图像的具体需求和展示平台的支持能力。较为复杂的图像和对色彩表现要求高的场景通常会选择较高的彩色深度，而简单的图像或者需要考虑性能的场景可能会选择较低的彩色深度。
对比度（Contrast）：
- 图像中不同颜色或亮度之间的差异程度，影响图像的明暗分界
- 高对比度和低对比度的区别，对图像整体视觉效果的影响
亮度（Brightness）：
- 图像的整体明暗程度，决定图像的整体明亮度
- 明亮图像和较暗图像的效果，影响图像的视觉表现和情感传递
清晰度（Sharpness）：
- 图像中细节的清晰程度，关系到图像的清晰度和细节表现
- 清晰度对图像质量的影响，影响图像的真实感和清晰感
透明性（Transparency）：
- 图片的透明性决定了图像中的哪些部分是透明的，即允许背景或下层图像透过。有透明性的图像可以让您将图像放置在其他背景上，形成无缝融合的效果。这在图标、徽标和图形设计中非常常见。
- 常见的支持透明性的图像格式是PNG和GIF，它们允许指定图像的某些区域为透明。例如，一个PNG图像可以有部分是不透明的，部分是透明的。
色调（Hue）：
- 图像中不同色彩的种类，涉及不同颜色的命名和区分
- 色调对图像氛围和情绪的影响，色调的选择传递特定的感觉和意境
饱和度（Saturation）：
- 图像中颜色的纯度和鲜艳程度，决定颜色的饱满度
- 高饱和度和低饱和度的视觉效果，影响图像的色彩感受和视觉强度
纹理（Texture）：
- 图像中表面的质感或细节，包括粗糙、光滑、木纹等
- 纹理在艺术创作中的应用，可以增加图像的趣味和观赏性
形状（Shape）：
- 图像中物体或对象的外形特征，涉及基本几何形状和轮廓
- 形状在视觉感知和图像识别中的重要性，影响图像的认知和理解
动态（Motion）：
- 动态图像和动画的视觉效果，涉及图像中运动和变化的表现 - 动态图像传递的信息和视觉冲击，对视觉表达具有独特影响
这些视觉属性涵盖了图片中常见的各种特征和效果，对于图像设计、图像处理、艺术创作以及视觉感知都有着重要的作用。深入了解和掌握这些属性有助于更好地理解图像，进行更有意义的图像创作和处理。
图的分类
光栅图和矢量图
图片一般分为两类：光栅图和矢量图。
光栅图：
光栅图是基于像素构成的图像。每个像素都有自己的颜色值，是图像最小的可见单元。光栅图格式常见的有JPEG、PNG、WEBP等。
矢量图：
矢量图使用点、线、多边形等几何形状来构图，而不是像素。矢量图具有高分辨率和无损缩放的特点，适合用于图标、徽标和需要频繁缩放的设计。SVG是一种常见的矢量图格式。
几何元素：
几何元素就像是用几何图形来拼接的图像。假设你想要画一条线，你可以用两个点来定义这条线的起点和终点，而这两个点就是几何元素。同样，你还可以用一些点来定义一个矩形、圆形、三角形等。这些点和形状的坐标信息被保存在计算机中，就像一张图纸一样，它们可以组合成更复杂的图形。
矢量图像与栅格化：
当矢量图像显示在屏幕上时，计算机会将矢量图形转换为像素图像的过程称为栅格化（Rasterization）。栅格化是将矢量图像中的几何元素和路径等转换为像素的过程。计算机会根据屏幕的分辨率和显示大小，将图像中的几何元素映射到屏幕上的像素点。
在栅格化过程中，计算机会根据矢量图像的数学公式和几何信息，决定每个像素点的颜色和亮度，然后在屏幕上以像素为单位绘制图像。这个过程中，矢量图像的优势在于可以无损地缩放，但在栅格化时，由于像素的有限性，可能会导致细节丢失或锯齿状的边缘（锯齿效应），尤其是在图像放大时
在矢量图像经过栅格化后，实际上仍然可以无损地缩放而不会失真。栅格化的过程将矢量图像中的几何元素和路径转换为像素图像，但这并不改变矢量图形的数学描述和几何信息。所以，当您放大矢量图像时，计算机会重新栅格化图像，并且会根据新的分辨率和显示大小生成更多的像素点，从而保持图像的清晰度和质量。
这是矢量图像的一个重要优点：在任何缩放级别下，它们都能保持较好的质量。因为矢量图像是使用数学公式描述的，所以不受像素数量的限制，可以无限制地放大或缩小而不会出现像素化或失真问题。
对比光栅图像（像素图像），它们在放大时会出现像素化问题，因为它们的像素数量是固定的。在放大光栅图像时，计算机只是简单地放大像素，导致图像变得模糊，并且在极端情况下，可能会出现马赛克效果
压缩分类
图片的压缩方式可以分为三类：无压缩、无损压缩和有损压缩。
无压缩：
无压缩的图片格式不对图片数据进行压缩处理，能准确地呈现原图片。其中，BMP是一种无压缩格式，保留了图像的所有信息，但文件体积较大。
无损压缩：
无损压缩算法对图片的所有数据进行编码压缩，能在保证图片质量的同时降低图片的尺寸。无损压缩格式中，PNG是常见的代表。PNG文件通常比BMP小，而且保持了图像的质量，适用于需要高质量和透明背景的情况。
有损压缩：
有损压缩算法会在压缩过程中去除图片中人眼无法察觉的细节，从而降低图片的尺寸。虽然有损压缩会导致一定程度的图像质量损失，但对于一般应用来说，这些损失是可以接受的。有损压缩格式中，JPEG是最常见的代表。JPEG文件通常较小，适用于在网页上显示图片和储存大量照片。
图片格式
GIF（Graphics Interchange Format）:
GIF（图形交换格式）是一种常见的图片格式，具有以下特点：
优点：
- 支持动画和透明度： GIF支持多帧动画，使其在展示简单动画和表情包等方面非常适用。同时，它也支持透明度，可以创建带有透明背景的图像。
- 广泛兼容性： GIF格式被广泛支持，几乎所有的现代浏览器和图像编辑软件都可以正常显示GIF图像。
- 无损压缩： GIF使用无损压缩算法，保持图像质量，适用于一些需要保留细节的图像场景。
- 适用于简单图标和动画表情包： 由于其支持动画和透明度，GIF常用于制作简单的图标和有趣的动画表情包。
缺点：
- 有限的颜色深度： GIF仅支持256色，对于照片等颜色丰富的图像，会出现色彩丢失和较低的图像质量。
- 不适合保存高质量照片： 由于有限的颜色深度，GIF不适合保存高质量的照片，特别是那些需要更多色彩细节的照片。
- 文件较大： 由于无损压缩，GIF图像文件较大，不适合在网页上频繁使用或作为高质量图片的存储格式。
使用场景：
GIF适用于需要展示简单动画和透明背景的场景，例如动画表情包、简单图标、以及一些简易的动画图像。
JPEG（Joint Photographic Experts Group）:
JPEG是一种广泛使用的图片格式，具有以下特点：
优点：
- 广泛兼容性： JPEG是一种通用的图片格式，在几乎所有现代设备和软件上都得到支持，包括电脑、手机、相机等。
- 有损压缩： JPEG使用有损压缩算法，可以显著减小图像文件的大小，同时保持适度的图像质量。这使得JPEG成为存储和传输照片的理想格式。
- 适合保存照片和复杂图像： JPEG对颜色细节的损失通常不会对照片和复杂图像造成明显影响，使其成为摄影、艺术品和复杂图像的首选格式。
缺点：
- 不支持透明度： JPEG不支持透明度，因此不适合用于制作带有透明背景的图像。
- 压缩损失： JPEG使用有损压缩，图像质量会在一定程度上受损。较高的压缩率会导致更明显的图像失真。
- 不适合无损图像需求： 由于压缩损失，JPEG不适合对图像完整性要求极高的场景，如医学图像、图像编辑等领域。
