图片处理看似只是“上传一张图”，背后却同时涉及像素、编码格式、压缩质量、对象存储、CDN 缓存和浏览器渲染。把这些层次拆开，才能在清晰度、加载速度、存储成本与安全之间取得平衡。

先区分三个概念：像素是图像内容，JPEG/PNG/WebP 是文件编码，对象存储保存的是编码后的文件。文件体积小，不代表图片解码后占用的内存也小。

一、图片在计算机中如何表示

位图与矢量图

位图由规则排列的像素组成，照片、截图通常属于这一类；矢量图以路径、形状和文字描述画面，适合图标、Logo 和示意图。位图放大后会逐渐模糊，矢量图则可以在不同尺寸下重新绘制。

像素、通道与位深

  • RGB：每个像素包含红、绿、蓝三个颜色通道。
  • RGBA：在 RGB 之外增加 Alpha 透明度通道。
  • 位深：决定每个通道可以表达多少级变化。常见网页图片多为每通道 8 位。

一张未压缩位图的理论数据量，可以用“宽度 × 高度 × 通道数 × 每通道字节数”估算：

1920 × 1080 × 3 × 1 = 6,220,800 字节 ≈ 5.93 MiB（RGB8）
1920 × 1080 × 4 × 1 = 8,294,400 字节 ≈ 7.91 MiB（RGBA8）
一张磁盘上只有 300 KB 的 JPEG，解码为 1920 × 1080 的 RGBA 像素后，仍可能占用约 7.9 MiB 内存。评估性能时要同时看网络体积、像素尺寸和解码后的内存。

二、无损压缩与有损压缩

无损压缩

无损压缩可以完整还原原始像素，适合文字截图、界面素材、需要透明通道的图片，以及还要继续编辑的中间文件。代价通常是照片类内容的文件更大。

有损压缩

有损压缩会舍弃人眼相对不敏感的信息，以更小体积换取可接受的视觉质量。它适合照片和内容分发，但反复解码、编辑、再压缩会逐步累积失真。

  • 先缩小尺寸，再调整编码质量；多余像素往往比质量参数更浪费空间。
  • 始终保留一份质量可靠的源文件，从源文件生成各尺寸版本。
  • 不同编码器的“质量 80”没有统一含义，不能直接横向比较。

三、常见格式如何选择

JPEG：照片的通用兜底

JPEG 使用有损压缩，兼容性好，适合色彩连续的照片；不支持透明通道，对文字、线条和大面积纯色容易产生块状或振铃伪影。

PNG：截图、线条与透明素材

PNG 主要使用无损压缩并支持 Alpha 透明度，适合截图、图标和需要保留锐利边缘的内容。用 PNG 保存大幅照片，体积通常不理想。

WebP：现代 Web 的实用默认项

WebP 同时支持有损、无损、透明度与动画。在现代浏览器中兼容性良好，常可作为网站位图的默认输出格式，并按受众需要保留 JPEG 或 PNG 兜底。

AVIF：更高压缩效率的现代格式

AVIF 支持有损、无损、透明度和高动态范围，通常具有较高压缩效率；编码成本、低质量下的细节表现以及目标客户端兼容性仍需实测。可以通过 picture 元素提供回退格式。

SVG：图标与图形

SVG 适合 Logo、图标和简单插画，清晰度不受尺寸影响。用户上传的 SVG 可能携带脚本、外链或复杂内容，不能未经清洗就直接以内联方式展示。

GIF 与 RAW

GIF 色彩数量有限，长动画往往体积很大，复杂动画优先考虑视频。RAW 是相机原始数据的统称，具体格式可能采用无损或有损压缩，更适合作为摄影后期源文件，而不是直接用于网页分发。

快速选型：照片优先 WebP/AVIF，JPEG 兜底；截图和透明素材优先 PNG 或无损 WebP；图标与简单图形优先 SVG；长动画优先视频。

四、压缩为什么有效

  • 空间冗余：相邻像素经常相似，可以用预测和差值减少重复信息。
  • 视觉冗余：人眼对亮度细节通常比色彩细节更敏感，可适度降低色度信息。
  • 统计冗余：常见数据使用较短编码，少见数据使用较长编码。

JPEG 的典型处理过程

  1. 把 RGB 转换为亮度与色度分量，并可对色度进行降采样。
  2. 将图像划分为 8 × 8 像素块。
  3. 通过离散余弦变换，把空间像素转换为频率系数。
  4. 量化高频系数；这是主要的有损步骤，也是质量与体积的关键开关。
  5. 对结果进行游程和熵编码，进一步减少文件体积。

质量设置过低时，常见现象包括方块、边缘振铃、渐变断层和细节涂抹。压缩参数应在真实素材和真实显示尺寸下评估。

五、推荐的上传与压缩流水线

  1. 接收上传：限制请求体、文件数量、频率与超时时间。
  2. 识别文件：检查文件签名和实际解码结果，不能只相信扩展名或客户端 MIME。
  3. 安全校验：限制宽高、总像素数和帧数，防止解压炸弹或超大动画耗尽内存。
  4. 标准化：按 EXIF 方向旋转，统一颜色空间，并按业务规则移除定位等敏感元数据。
  5. 调整尺寸：先生成业务真正需要的宽度，禁止无意义地保存超大展示图。
  6. 生成变体：输出多档尺寸和格式，例如 320、640、1280 像素宽的 AVIF、WebP 与兜底格式。
  7. 上传存储：使用不可猜测或基于内容摘要的对象键保存文件。
  8. 记录元数据：把对象键、尺寸、格式、字节数、摘要和各变体关系写入数据库。
validate(upload)
image = decode(upload)
image = autoOrient(image)
image = normalizeColor(image)

for width in [320, 640, 1280]:
  resized = resizeWithoutUpscaling(image, width)
  for format in ["avif", "webp", "fallback"]:
    object = encode(resized, format, qualityProfile)
    uploadObject(contentHash(object), object)

saveMetadataAndVariants()
不要把“压缩”放在上传流程的最后才考虑。像素限制、自动旋转、尺寸变体、编码格式和存储键应组成一条可测试、可重试的流水线。

六、对象存储、数据库与 CDN

二进制文件放对象存储

图片二进制通常适合放在 S3、OSS、COS、MinIO 等对象存储中；数据库保存业务关系与元数据，不直接承担大量图片内容。这样更容易扩容、缓存和控制生命周期。

  • 对象存储：原图和各尺寸变体。
  • 数据库：对象键、宽高、MIME、体积、摘要、所属用户、状态和变体清单。
  • CDN：就近分发公开图片，降低源站带宽和延迟。

命名与缓存

推荐使用内容摘要或带版本号的对象键，例如 images/ab/cd/<hash>-640.webp。内容改变就生成新地址，旧地址保持不可变，便于安全使用长期缓存。

Cache-Control: public, max-age=31536000, immutable

只有 URL 随内容变化时，才适合使用长期 immutable 缓存。头像等固定 URL 内容若会被覆盖，应采用短缓存、版本参数或更新对象键。

公开与私有访问

公开文章图片可以通过 CDN 读取；身份证件、合同等私密图片应放入私有存储，通过短时签名 URL 或经过鉴权的下载接口访问。数据库权限和对象存储权限要同时校验。

七、浏览器端的响应式加载

服务器生成多档尺寸后，浏览器还需要根据视口、布局和设备像素密度选择合适资源。picture 用于格式回退，srcset 与 sizes 用于尺寸选择。

<picture>
  <source type="image/avif" srcset="cover-640.avif 640w, cover-1280.avif 1280w">
  <source type="image/webp" srcset="cover-640.webp 640w, cover-1280.webp 1280w">
  <img
    src="cover-640.jpg"
    srcset="cover-640.jpg 640w, cover-1280.jpg 1280w"
    sizes="(max-width: 720px) 100vw, 720px"
    width="1280"
    height="720"
    loading="lazy"
    decoding="async"
    alt="文章封面"
  >
</picture>
  • 为 img 声明 width 和 height，帮助浏览器预留空间，减少布局偏移。
  • 首屏之外的图片可延迟加载；可能成为 LCP 的首屏主图不要使用 loading=lazy。
  • alt 描述图片表达的信息；纯装饰图片使用空 alt，而不是省略可访问性判断。
  • 不要只生成多份文件，还要正确填写 sizes，否则浏览器可能仍下载过大的资源。

八、质量、性能与成本如何验证

  • 选取照片、截图、插画、透明图等代表性样本，而不是只用一张测试图。
  • 在目标展示尺寸下肉眼检查文字、人物皮肤、天空渐变、树叶和锐利边缘。
  • 记录编码耗时、输出体积、解码表现和缓存命中率，避免只追求最小文件。
  • 对源文件只做一次派生；需要新规格时从源文件重新生成，避免反复有损转码。
  • 定期清理未被业务引用的对象，但删除前先处理回收站、引用关系和延迟任务。

九、安全检查清单

  • 限制单文件体积、宽高、总像素、动画帧数和用户上传频率。
  • 使用可靠解码器验证内容，并及时更新图片处理依赖。
  • 用户输入的文件名不直接作为对象键，也不直接拼接到本地路径。
  • 按需移除 EXIF 中的 GPS、设备信息和缩略图等隐私数据。
  • 不信任 SVG；进行严格清洗，或转为位图后再对外提供。
  • 私有对象使用短时签名 URL，并校验资源所有权和下载权限。

十、总结

一套可靠的图片方案不只是把 JPEG 的质量调低。它应从输入校验开始，完成旋转、颜色、尺寸和格式标准化，把文件存入对象存储，把关系写入数据库，再通过 CDN、响应式图片和合理缓存交付给浏览器。最终目标是在用户实际看到的尺寸上，以尽可能少的字节提供足够好的画质。