面向 Web 开发者的图片与视频压缩

构建可复用的 PNG、JPEG、WebP、AVIF、MP4 和 WebM 资源管线，在不破坏响应式交付或视觉质量的前提下降低页面体积。

市场部将一个 4 MB 的 PNG 主图放入仓库。Lighthouse 标记了 LCP 指标。或者自动播放的 MP4 背景使移动端加载时间增加了两秒。或者你运行了在线优化工具，却不清楚文件实际被保存到了哪里。

前端性能始于在资源到达 public/ 目录或 CDN 之前，选择合适的尺寸、格式和加载行为。压缩无法弥补传输错误像素或过早加载视口下方媒体带来的问题。

未优化媒体如何影响页面加载和 Core Web Vitals

大型主图和未优化的视频海报直接影响 Largest Contentful Paint 和总字节数。少数未压缩的资源即可抵消精心设计的代码分割效果。

在编码前调整过大的源文件尺寸，并针对代表性资源集对比不同格式。结果取决于透明度、纹理、文本、浏览器支持和响应式交付；不存在一个适用于所有 PNG、JPEG 或视频的通用百分比目标。

现代 Web 交付的图片与视频格式

现代网站混合使用静态和动态资源：

图片： PNG、JPEG、WebP、AVIF、SVG、HEIC 和 GIF，用于 UI、营销素材和 OG 图片。
视频： MP4、WebM 和 MOV，用于背景、产品演示和文档。
PDF： 带有嵌入式截图的可下载指南和规范表。

当设计交付仅包含一种格式时，使用单一工具从 PNG 主图生成 WebP 或 AVIF 变体。主图 JPEG 集、自动播放 MP4 循环和 OG 图片 PNG 文件通常出现在同一个迭代周期中；在合并前批量处理它们，使 Lighthouse 评分反映真实的生产体积，而非占位符导出文件。

生产资源的有损与无损选择

具有纯色和小文本的 UI 截图需要接近无损或无损的输出。营销照片和 B-roll 素材可使用有损压缩以大幅节省字节。参见有损与无损压缩，在替换 public/ 中的文件前，按资源类型进行实用划分。

对于图片密集型的页面，在 Mac 上优化 Web 图片涵盖了先调整尺寸的流程，以及直接映射到组件库和静态站点仓库的 WebP、AVIF 和 PNG 路径。WordPress 和其他 CMS 构建获得相同的本地预处理：参见在 Mac 上优化 WordPress 图片，在资源进入媒体库之前。在设计仓库中保留无损主图；将有损或现代格式变体推送至生产环境。

压缩资源而不破坏视觉质量

有损压缩适用于照片；UI 截图有时需要无损或接近无损的设置。在替换生产文件前，以 1:1 缩放比例预览输出。

按资源类型保存预设：照片图库使用激进预设，具有纯色和文本的 UI 截图使用保守预设。对于视网膜主图，以 2x 缩放比例预览，以确保压缩伪影不会在高分辨率笔记本电脑上显示。

视频编解码器与 Web 交付的权衡

自动播放背景 MP4 文件和产品演示循环主导了营销页面上的视频字节数。MP4 中的 H.264 仍然是广泛浏览器支持的最安全默认值。当分析数据显示大部分流量来自支持 H.265 和带有 VP9 或 AV1 的 WebM 的浏览器时，这些格式可进一步缩小文件体积。在为所有主视频选择单一导出预设前，阅读 H.264 与 H.265 编解码器。

对于静音循环背景，参见在 Mac 上优化 Web 视频，获取保持运动流畅且不增加移动端页面体积的比特率和尺寸目标。在预览中修剪循环处理段，以免在五秒的背景片段中传输十秒的重复帧。

在发布流程中加入媒体检查

按组件定义体积预算，当资源明显超出预算时审查失败。将生成的资源与设计主图分开存储，并记录用于创建它们的命令或预设。这使得重型主图回归在拉取请求中可见，而非在部署后才发现。

发布检查应涵盖固有尺寸、响应式候选项、加载优先级、替代文本、视频海报、编解码器支持和实际传输大小。压缩仅是该检查清单中的一行。

将文件夹监控指向团队已使用的设计拖放目录。新的 PNG 和 MP4 导出在任何人提交之前进行压缩，使 PR 审查捕获布局问题，而非惊喜的 4 MB 图标。

测试部署后的体验，而非仅测试资源

优化后的文件仍可能被错误地交付。验证生产路径：

使用准确的宽度或密度描述符以及有用的 sizes 属性提供响应式图片候选项。
设置固有宽度和高度或宽高比，使媒体不产生布局偏移。
在初始 HTML 中使可能的 LCP 图片可被发现；不要对视口上方的候选项进行懒加载。
对视口下方的媒体进行懒加载，并避免在用户可见之前就开始下载自动播放视频。
为视频使用海报，移除真正静音装饰循环中的音频，并测试减少运动行为。
在节流移动配置文件中检查传输字节、选定的响应式候选项、缓存头、CDN 转换、LCP 和 CLS。

自动化评分是诊断工具，而非视觉 QA 的替代品。在真实设备上比较文本、渐变、透明边缘和运动。将源资产保留在生成输出目录之外，以便未来的格式或断点更改从干净的主图开始，而非从已压缩的衍生文件开始。

GetCompress 如何融入 Web 资源管线

构建工具、响应式标记和 CDN 负责向浏览器提供正确的资源。当设计团队反复交付混合的 PNG、JPEG、WebP、AVIF、MP4 和 WebM 源文件时，GetCompress 很适合放在这套流程之前。批量预设和文件夹监控可以准备本地版本，无需暴露尚未发布的界面。srcset、缓存、加载策略和性能测量仍然必不可少。GetCompress 可统一这些系统接收的输入资源。