图像
Image
在计算机视觉中，图像是现实世界场景的二维（或多维）表示，由离散的像素 (Pixel) 组成。每个像素都包含颜色或强度信息，共同构成了我们所看到的视觉内容。图像是计算机视觉系统最基础的输入数据。
图像的表示
图像在计算机中通常被表示为一个多维数组或矩阵，其维度取决于图像的类型。
- 像素 (Pixel):
- 图像的最小组成单元。每个像素代表图像中的一个点，并存储该点的颜色或强度信息。
- 像素值通常是整数，范围取决于颜色深度（如0-255）。
- 分辨率 (Resolution):
- 图像的宽度和高度，通常以像素为单位表示（如1920x1080）。
- 分辨率越高，图像包含的细节越多，文件越大。
- 颜色深度 (Color Depth):
- 每个像素用于表示颜色的位数。位数越多，能表示的颜色种类越多，颜色过渡越平滑。
- 例如，8位灰度图每个像素有256个灰度级；24位RGB彩色图每个像素有1677万种颜色。
- 通道 (Channels):
- 图像的颜色信息通常通过多个通道来表示。
- 灰度图 (Grayscale Image): 只有一个通道，每个像素值代表亮度信息（通常0代表黑色，255代表白色）。
- RGB图 (Red, Green, Blue Image): 有三个通道，分别代表红、绿、蓝三种颜色分量。通过这三种颜色的不同组合，可以表示出几乎所有的可见光颜色。
- RGBA图: 在RGB基础上增加一个Alpha通道，用于表示透明度。
图像的格式
JPEGJoint Photographic Experts GroupPNGPortable Network GraphicsGIFGraphics Interchange FormatAPNGAnimated Portable Network Graphics
1. APNG
APNG 是 Animated Portable Network Graphics 的缩写，由 Mozilla 于 2004 年提出，旨在为 PNG 格式添加动画支持，同时保持对非动画 PNG 的向后兼容。
核心特性：
- 动画支持：支持多帧动画，包括帧速率、循环次数等控制。
- 无损压缩：基于 PNG 的压缩算法，保持图像质量。
- 透明度：支持完整的 Alpha 通道透明度（逐像素透明）。
- 向后兼容：在不支持 APNG 的浏览器或软件中，默认显示第一帧静态图像。
- 色彩深度：最高支持 24 位真彩色加 8 位 Alpha 通道。
何时选择 APNG？
- 高质量动画需求：需要动画且对图像质量有极高要求（如清晰的线条、文字动画），无法接受有损压缩带来的瑕疵。
- 复杂透明度动画：动画中需要平滑的渐变透明度效果（如淡入淡出、阴影效果）。
- 兼容性平衡：希望在支持 APNG 的现代浏览器中展示动画，同时在旧浏览器（如旧版 Safari）中优雅降级为静态高质量图片。
2. WebP
WebP 由 Google 于 2010 年推出，基于 VP8 视频编码中的关键技术，旨在提供更优的压缩效率。
核心特性：
- 静态与动态：支持静态图像和动画。
- 高压缩率：
- 有损压缩：比 JPEG 小约 25-35%，视觉质量相近。
- 无损压缩：比 PNG 小约 26%。
- 透明度：支持 Alpha 通道（无损或有损）。
- 动图支持：支持动画，并可混合有损/无损帧。
何时选择 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/ 两图对比
图像压缩