写在最前
本文梳理下图片各种格式的区别和应用场景
在我们的日常开发中，选择正确的图片格式不仅可以帮助提升视觉体验，还可以提高加载速度
有损压缩&无损压缩
不同图片格式会对图像做不同程度压缩，分为有损压缩和无损压缩
- 有损压缩：压缩过程中，损失了部分图片信息，图片质量降低，损失不可逆，常见有损压缩手段:按照算法将临近的像素点合并
- 无损压缩：只在压缩文件大小的过程中，不损耗图片质量
索引色&直接色
计算机表示颜色有两种形式：索引颜色(Index Color)和直接颜色(Direct Color)
- 索引色：一个数字代表（索引）一种颜色，存储图片时存储一个数字的组合，同时存储数字到图片颜色的映射。只能存储有限种颜色，通常是256种颜色，对应到计算机系统中，使用一个字节的数字索引一种颜色。
- 直接色：四个数字代表一种颜色，四个数字分别代表这个颜色中红色、绿色、蓝色以及透明度。现在流行的显示设备可以在这四个维度分别支持256种变化，直接色可以表示2的32次方种颜色。并非所有的直接色都支持这么多种，为压缩空间，有可能只有表达红、绿、蓝的三个数字，每个数字也可能不支持256种变化
点阵图&矢量图
- 点阵图（位图，像素图）：构成点阵图的最小单位是象素，位图由象素阵列的排列实现其显示效果，每个象素有自己的颜色信息，在编辑位图图像时，可操作的对象是每个象素，我们可以改变图像的色相、饱和度、透明度，从而改变图像显示效果。点阵图缩放会失真，类比沙画，当我们从远处看画面细腻多彩，但靠得非常近的时候，就能看到组成画面的每粒沙子以及每个沙粒的颜色
- 矢量图（向量图）：矢量图不纪录画面上每一点的信息，而是纪录元素形状及颜色的算法，打开矢量图时，软件对图象做对应的函数运算，将运算结果【图形的形状和颜色】显示。无论显示画面大还是小，画面上的对象对应的算法不变，所以，即使对画面进行倍数相当大的缩放，其显示效果仍然相同(不失真)
图片格式
JPEG（JPG）（Joint Photographic Experts Group）
目前最流行的图像格式，文件小且加载快，大多数社交媒体平台（比如小红书和Instagram）会将上传的图片转换为JPG，根据不同场景使用固定尺寸控制图片分辨率
适合存储和传输照片或复杂色彩的图像
优点
- 快速加载：文件较小，方便网络传输和存储
- 兼容性：几乎所有的网页浏览器、操作系统和图像查看器都支持
- 直接色：采用直接色，支持1670万种颜色，适合复杂和多色彩的图像
缺点
- 有损压缩：图像质量下降，特别是在多次编辑和保存后
- 不支持透明度：所有透明区域会被填充为白色或其他颜色
PNG（Portable Network Graphics）
无损压缩的位图片形格式，可以在保存图像的同时保持其原始质量
PNG压缩比高，生成文件体积小，结合了GIF和TIFF优点，支持压缩不失真、透明背景、渐变图像的要求
PNG常用于网页中的图标、标志和图形元素等小图片
优点
- 无损压缩：不会因多次编辑和保存而损失图像质量
- 支持透明背景：适合网页设计和图像合成
- 兼容性：几乎所有网页浏览器和图像编辑软件都支持
- 色彩范围更广：支持从8位到32位的色彩深度，适合需要更高精度和更广色彩范围的应用
缺点
PNG文件通常比JPEG大，不适合用于对文件大小要求严格的场景
GIF（Graphics Interchange Format）
公用的图像文件格式标准，一系列图片或一小段无声视频，不断循环，也不需要按下播放和暂停键。
GIF不仅有动画GIF，还有静态GIF
- 适用于对色彩要求不高同时需要文件体积较小的场景，比如企业Logo、线框类的图等
- 很受欢迎的表情包就大多是GIF，GIF比视频小很多，容易加载，更容易在社交媒体上分享
优点
- 动画支持：包含多帧图像，形成连续的动画效果
- 透明度支持：允许图像中某些部分透明，可以很好地融入网页背景
- 兼容性广：几乎所有的网页浏览器和图像查看器都支持
- 无损压缩：不会降低图片质量
- 大小要远小于BMP格式的图片
缺点
- 索引色：通常限制在256种颜色以内，它在显示复杂图像和渐变方面的能力较弱
- 不支持高级图像编辑：不支持高级图像编辑功能，如图层、滤镜等
SVG（Scalable Vector Graphics）
为什么SVG放大后不会失真：基于XML的矢量图形格式，与传统的位图格式（如JPG和PNG）不同，SVG使用数学方程来描绘图形元素，由直线和曲线以及绘制它们的方法组成。放大时，我们看到的还是线和曲线，不会出现像素点
广泛用于网页设计、图标制作和数据可视化等领域，适合用来绘制企业Logo、Icon
优点
- 无限缩放：无限缩放不会失真，能在各种屏幕尺寸上都保持清晰，适合响应式界面设计
- 文件较小：比等效的JPG、PNG图片文件小得多，能显著减少网页加载时间，提高用户体验
- 支持动画和交互：可以创建复杂的动画效果和交互图形
- 处理简单图形时高效
- 只需要一个文本编辑器就能修改
缺点
- 对于复杂的图像（如高细节的插图或大型数据可视化），SVG文件可能变得很大，导致浏览器渲染性能下降
PSD（Photoshop Document）
是Adobe Photoshop的原生文件格式，支持Photoshop的所有功能，包括图层、蒙版、文本效果、调整层、滤镜、注释以及多种图像选项
广泛用于专业图像编辑和设计领域
优点
- 图层支持：支持无限数量图层，进行复杂图像设计和编辑
- 无损编辑：原始图像数据始终保持不变，直到最终输出
- 保留元数据：包含关于文件的详细信息，如作者、版权、历史记录等
缺点
- 文件过大：PSD文件包含所有图层和编辑信息，文件很大，不适合直接用于网页或电子邮件
- 性能问题：编辑可能会消耗大量内存，导致性能下降
- 专有格式：Adobe的专有格式，无法使用Photoshop以外的软件打开
AI
与PSD相似，AI文件格式在网络上不可用，专门在Adobe Illustrator上设计编辑。AI格式文件可以包含矢量图形、字体、文本以及复杂的设计元素，如渐变、图案、混合、蒙版和透明度效果
- 品牌设计： 创建和编辑企业标志、品牌视觉元素等
- 广告制作： 设计广告、海报、传单等，需要多种尺寸和高分辨率输出
- 包装设计： 设计产品包装，需要精确的尺寸和颜色控制
优点
- 矢量图形：支持矢量图形，可无限放大而不失真，适合需要多种尺寸应用的设计
- 设计完整性：保留设计的所有元素和属性，包括颜色、渐变、图层和效果
缺点
- 文件过大：包含大量矢量路径和效果时文件过大
- 学习难度大：Adobe Illustrator是一款功能强大的软件
webp
Google开发，提供比JPEG更优的图像压缩。支持无损和有损压缩
优点
- 高效压缩：提供了比JPEG更高的压缩效率，同时保持良好图像质量
- 支持透明度：适合网页设计
- 支持动画：类似于GIF，但提供更好的压缩和更优的质量
- 无损质量：即使在高压缩率下，WebP也能保持图像质量，适合高质量的图像显示
缺点
- 兼容性问题：一些旧的浏览器和设备不支持WebP格式
- 编辑工具支持有限
HEIF（高效率图像文件格式）
相对较新格式，提供比JPEG更高的压缩效率，在相同的图像质量下，HEIF文件更小
- 智能手机摄影：手机可使用HEIF格式存储高质量的照片和视频，节省存储空间
- 视频和图像集成：HEIF适合需要将高质量视频和图像结合在一起的应用场景
优点
- 支持高质量图像：尽管压缩率高，HEIF仍能保持高质量的图像输出，适合高分辨率摄影
- 支持元数据：包括拍摄信息、编辑数据、色彩配置文件等
- 与视频编码兼容：可以与高效率的视频编码无缝集成，适合存储和传输高质量的视频内容
- 支持透明度和 16 位色深，可使图像色彩更丰富、渐变更平滑
缺点
- 兼容性受限：HEIF是一种相对较新的格式，很多设备和软件都还不支持它
- 编辑和处理限制：与广泛支持的JPEG相比，支持HEIF的图像编辑和处理软件较少
PDF（便携式文档格式）
是Adobe公司开发的一种文件格式，无论在任何设备或操作系统上，PDF格式都能保持文档的完整性和一致性
- 电子书和手册经常以PDF格式发布，以确保跨设备的阅读体验
- 法律文件、合同、官方表格等通常使用PDF格式，确保文件的正式性和安全性
- PDF文件非常适合打印，以打印的文档与屏幕上的显示一致
优点
- 跨平台一致性：能够在不同的操作系统和设备上保持相同的显示效果
- 支持多种媒体内容：以包含文本、图像、矢量图形、音频和视频等
- 安全性：支持加密和权限设置，限制编辑、复制、打印等操作
- 广泛支持：几乎所有的操作系统和设备都支持，且有大量免费和商业软件可以打开和创建PDF
缺点
- 编辑困难：编辑通常更困难和有限
- 格式限制：PDF不是最适合动态内容或交互式应用的格式
TIFF（Tag Image File Format）
标签图像文件格式，它对图像信息的存放灵活多变，可以支持很多色彩系统，无损压缩，文件大，保留所有图像细节和颜色信息
在各种地理信息系统、摄影测量与遥感等应用中，要求图像具有地理编码信息，例如图像所在的坐标系、比例尺、图像上点的坐标、经纬度、长度单位及角度单位等
BMP（Bitmap（位图））
是Windows操作系统中的标准图像文件格式，Windows系统内部各图像绘制操作都是以BMP为基础。采用无损压缩和直接色，所以体积最大，太大的文件格式导致它几乎没有用武之地
优点
- 包含图像信息丰富，无压缩，图像质量高
- 支持索引色和直接色
缺点
- 占用磁盘空间过大
- 在同样图片质量下，BMP格式的图片文件大小是GIF格式的很多倍
RAW（原始图像文件）
摄影中使用的图像文件格式，记录了相机图像传感器捕获的未处理的图像数据，保存所有原始数据，没有经过任何压缩或颜色处理，提供了最大的灵活性和图像质量
优点
- 非破坏性编辑：编辑无损，原始数据始终保持不变
- 后期处理灵活性：允许摄影师在后期处理中有更大的调整空间，如曝光、白平衡、对比度和色彩
- 细节保留：由于没有压缩，RAW文件能够保留更多的图像细节，尤其是在高光和阴影部分
- 色彩信息：通常包含比JPEG更广的色彩范围，使得色彩调整更为精确
缺点
- 文件较大：需要更多存储空间
- 兼容性问题：不是所有的图像浏览和编辑软件都支持RAW格式
写在最后
一般在开发中常用的图片格式为PNG、JPG和SVG，其中小图片适合使用PNG、大图片适合使用JPG、期望不失真的图片（企业Logo）使用SVG、动图使用GIF
了解了常见图片格式的优缺点及其应用场景，能够帮助我们在日常使用各种图片格式时也能知道他们各自的特点和应用场景
