图像

Image

在计算机视觉中，图像是现实世界场景的二维（或多维）表示，由离散的像素 (Pixel) 组成。每个像素都包含颜色或强度信息，共同构成了我们所看到的视觉内容。图像是计算机视觉系统最基础的输入数据。

图像的表示

图像在计算机中通常被表示为一个多维数组或矩阵，其维度取决于图像的类型。

1. 像素 (Pixel):
   • 图像的最小组成单元。每个像素代表图像中的一个点，并存储该点的颜色或强度信息。
   • 像素值通常是整数，范围取决于颜色深度（如0-255）。
2. 分辨率 (Resolution):
   • 图像的宽度和高度，通常以像素为单位表示（如1920x1080）。
   • 分辨率越高，图像包含的细节越多，文件越大。
3. 颜色深度 (Color Depth):
   • 每个像素用于表示颜色的位数。位数越多，能表示的颜色种类越多，颜色过渡越平滑。
   • 例如，8位灰度图每个像素有256个灰度级；24位RGB彩色图每个像素有1677万种颜色。
4. 通道 (Channels):
   • 图像的颜色信息通常通过多个通道来表示。
   • 灰度图 (Grayscale Image): 只有一个通道，每个像素值代表亮度信息（通常0代表黑色，255代表白色）。
   • RGB图 (Red, Green, Blue Image): 有三个通道，分别代表红、绿、蓝三种颜色分量。通过这三种颜色的不同组合，可以表示出几乎所有的可见光颜色。
   • RGBA图: 在RGB基础上增加一个Alpha通道，用于表示透明度。

图像的格式

• JPEG   Joint Photographic Experts Group
• PNG   Portable Network Graphics
• GIF  Graphics Interchange Format
• APNG Animated Portable Network Graphics

1. APNG

APNG 是 Animated Portable Network Graphics 的缩写，由 Mozilla 于 2004 年提出，旨在为 PNG 格式添加动画支持，同时保持对非动画 PNG 的向后兼容。

核心特性：

1. 动画支持：支持多帧动画，包括帧速率、循环次数等控制。
2. 无损压缩：基于 PNG 的压缩算法，保持图像质量。
3. 透明度：支持完整的 Alpha 通道透明度（逐像素透明）。
4. 向后兼容：在不支持 APNG 的浏览器或软件中，默认显示第一帧静态图像。
5. 色彩深度：最高支持 24 位真彩色加 8 位 Alpha 通道。

何时选择 APNG？

• 高质量动画需求：需要动画且对图像质量有极高要求（如清晰的线条、文字动画），无法接受有损压缩带来的瑕疵。
• 复杂透明度动画：动画中需要平滑的渐变透明度效果（如淡入淡出、阴影效果）。
• 兼容性平衡：希望在支持 APNG 的现代浏览器中展示动画，同时在旧浏览器（如旧版 Safari）中优雅降级为静态高质量图片。

2. WebP

WebP 由 Google 于 2010 年推出，基于 VP8 视频编码中的关键技术，旨在提供更优的压缩效率。 核心特性：

1. 静态与动态：支持静态图像和动画。
2. 高压缩率：
   • 有损压缩：比 JPEG 小约 25-35%，视觉质量相近。
   • 无损压缩：比 PNG 小约 26%。
3. 透明度：支持 Alpha 通道（无损或有损）。
4. 动图支持：支持动画，并可混合有损/无损帧。

何时选择 WebP？

• 网页性能优化首选：无论是静态图片还是动画，WebP 是当前 Web 开发中的首选现代格式，因为它能最大程度地减少加载时间和数据用量。
• 静态图片替代：可同时替代 JPEG（用于照片）和 PNG（用于图形、透明图片）。
• 动画替代 GIF：用 有损动画 WebP 替代 GIF，可在保持可接受画质的前提下大幅减小文件体积（通常减少 60% 以上）。
• 环境可控：可以确保目标用户环境支持 WebP（现代 CMS 和 CDN 通常提供自动格式转换）。

详细对比表

对于动画：

• 优先使用 动画 WebP（通常选择有损压缩以获得最小体积）。
• 如果动画质量要求极高且文件大小不是首要考虑，或需要更好的旧 Safari 降级体验，可选择 APNG

总体趋势：WebP 因其出色的压缩率、功能全面和日益普及的支持，已成为 Web 图像事实上的现代标准。APNG 则在特定的高质量无损动画领域占有一席之地。在部署时，始终利用 <picture> 元素或内容协商（通过 CDN）来确保对旧浏览器的兼容性。

特性维度	APNG	WebP	GIF	PNG	JPEG
主要用途	高质量动画，需要透明度的动画	网页图像，追求高压缩率	简单动画，表情包	无损静态图像，需要透明度	有损静态照片
压缩类型	无损压缩	有损/无损可选	无损压缩（索引色）	无损压缩	有损压缩
色彩支持	24 位真彩 + 8 位 Alpha（千万色+透明）	24 位真彩 + 8 位 Alpha	索引色（最多 256 色）	24 位真彩 + 8 位 Alpha	24 位真彩（无透明度）
透明度	✅ 支持完整 Alpha 通道透明度	✅ 支持完整 Alpha 通道（有损/无损）	✅ 仅支持 1 位布尔透明（边缘毛糙）	✅ 支持完整 Alpha 通道	❌ 不支持
动画支持	✅ 是	✅ 是	✅ 是	❌ 否	❌ 否
文件大小（动画）	通常小于 GIF，但大于有损 WebP	显著最小（尤其有损压缩时）	最大（效率最低）	不适用	不适用
文件大小（静态）	单帧同 PNG	有损： 比 JPEG 小 25-35% 无损： 比 PNG 小 26%	通常最大	较大（无损）	较小（有损）
浏览器支持	✅ 除 Safari 外的主流浏览器均支持	✅ 近乎全平台支持（Safari 14+ 已支持）	✅ 全支持	✅ 全支持	✅ 全支持
向后兼容性	✅ 极佳（在非支持环境显示静态第一帧 PNG）	❌ 较差（不支持则无法显示）	✅ 极佳	✅ 极佳	✅ 极佳
专利与开源	开放标准，无专利限制	开源，免费使用（Google 推广）	开放	开放	开放

• vs. GIF：
  • APNG 和 WebP 都全面优于 GIF。GIF 仅限于 256 色、透明度差、文件大。除非需要绝对最大的兼容性（如某些极度保守的邮件客户端），否则应避免使用 GIF 制作动画。
• vs. PNG：
  • APNG 是其动画扩展。如果不需要动画，静态 PNG 仍是无损透明图形的标准。
  • WebP 的无损模式是 PNG 的优秀替代品，文件更小。
• vs. JPEG：
  • WebP 有损模式是 JPEG 的直接升级，在相同画质下文件更小。
  • APNG 不直接与 JPEG 竞争，因为它是无损格式。

图像处理基础

图像处理是计算机视觉的基础，涉及对图像进行各种操作以改善其质量、提取信息或准备用于进一步分析。

• 灰度化: 将彩色图像转换为灰度图像，减少数据量。
• 二值化: 将图像像素值转换为只有两个值（通常是0和255），用于突出前景和背景。
• 滤波 (Filtering):
  • 高斯滤波 (Gaussian Blur): 使用高斯核进行卷积，用于图像平滑和去噪。
  • 中值滤波 (Median Filter): 使用中值代替像素值，对椒盐噪声（Salt-and-pepper noise）非常有效。
• 边缘检测 (Edge Detection): 识别图像中亮度变化剧烈的区域，这些区域通常对应物体的轮廓。
  • Sobel算子: 用于计算图像梯度的近似值。
  • Canny边缘检测: 一种多阶段的边缘检测算法，包括高斯滤波、非极大值抑制和双阈值检测。

图像相关工具

• https://unlinearity.github.io/Animated-Image-Creator/ APNG/webp 序列动图生成
• https://imgsli.com/ 两图对比
  图像压缩