文章
优化网站媒体以提升速度和 Core Web Vitals
图片通常占一个网页总重量的约 40%，比任何其他资源类型都多，而在媒体内容较多的页面上，视频还会额外增加不少。把它们处理好，是你为加载速度、Core Web Vitals 评分和搜索排名所能做的最具杠杆效应的一件事。好消息是：这一切都不需要专业软件或服务器，你的文件也从不需要离开你的设备。
在做任何事之前先选对格式
格式选择比任何质量滑块都更重要。对于网页上的照片，WebP 是正确的默认选择：在相同视觉质量下它比 JPEG 小 25% 到 35%，而且所有现代浏览器都支持它。AVIF 的压缩还能更进一步，比 JPEG 好上多达 50%，代价是编码更慢。对于只压缩一次的主视觉大图和产品照片，使用 AVIF；对于需要批量处理或要快速产出的内容，使用 WebP。PNG 只属于那些需要无损精度或透明背景的场合。SVG 则是徽标、图标和插画唯一明智的选择：它能缩放到任意尺寸，往往只有几千字节，而光栅化的等价文件却要数百千字节。
在没有可见画质损失的前提下压缩图片
先把尺寸缩放到实际的显示尺寸：一张以 1280 像素宽显示的主视觉大图，并不需要 4000 像素的数据量。先缩放，再压缩。对于照片，WebP 或 JPEG 的质量 80 是务实的下限，低于此值普通访客就开始能察觉，所以请瞄准 75 到 85，并在发布前以满倍缩放查看输出。对于带文字和纯色块的图形，PNG 无损或 SVG 能保留有损格式会抹平的锐度。本站的图片压缩器支持以上所有格式，完全在你的浏览器中运行，所用算法与专门的桌面工具相同。
无需上传即可为网页转换视频
背景循环视频和内嵌视频，往往是网页媒体优化最容易掉链子的地方。采用 H.264 的 MP4 处处可播，而 WebM 是每个现代浏览器都支持的免版税替代方案。本站的视频转换器用 VP8 编码 WebM，VP8 与 H.264 处于相同的压缩等级：单纯更换容器并不会让文件变小，真正的好处在于完全免版税的编解码链路和对 alpha 通道的原生支持。务实的做法是一次性转换为 WebM，把它作为 video 元素里的首选源，并为较旧的浏览器保留 MP4 作为兜底。转换通过编译为 WebAssembly 的 FFmpeg 在你的浏览器内运行：什么都不上传，最大 500 MB 的文件无需排队即可转换。对于页面中的内嵌背景视频，还可以考虑用视频裁剪工具在编码前剪掉无效的几秒：时长是文件大小的最大推手。
内联资源：base64 与 SVG
将很小的图片、图标和网站图标以 base64 字符串直接嵌入 HTML 或 CSS，能为每个资源省去一次网络往返。这对那些出现在每个页面、大小约在 2 KB 以下的资源是有意义的，比如徽标雪碧图或加载指示器。更大的资源应保持为独立文件，因为 base64 的编码体积比二进制大 33%，而且浏览器会缓存文件引用，却不会单独缓存内联数据。SVG 优化器能在不改动视觉输出的前提下，清除导出的 SVG 中由编辑器留下的冗余。图片转 base64 转换器会在你的浏览器中生成可直接粘贴的 data URI。
按需提供合适尺寸并优先加载
两个传输细节与文件本身同等重要。第一是响应式尺寸。通过带有宽度描述符的 srcset 列表（例如 image-400.webp 400w、image-800.webp 800w 等），浏览器会在发出请求之前，将 CSS 宽度乘以设备像素比（device pixel ratio），然后选择能覆盖屏幕的最小文件。一部 390px 布局宽度、屏幕缩放比为 3x 的手机大约需要 1170 像素，因此它会获取 1200w 版本，跳过桌面原图。第二是加载优先级。浏览器的预加载扫描器（preload scanner）会提前读取页面并在主解析器到达之前开始下载图片；为首屏（above-the-fold）最大图片添加 fetchpriority="high"，可以告知浏览器优先拉取该图片，而这通常决定了 Largest Contentful Paint 的时间。
本文涉及的工具
常见问题
图片压缩会影响我的搜索排名吗？
Google 把 Core Web Vitals 作为排名信号，而 Largest Contentful Paint 几乎总是一张图片或一帧视频封面。主视觉大图在一秒内加载完成的页面，得分会高于需要三秒才加载完的页面。压缩和正确的格式直接影响这项指标，所以是的，图片优化对 SEO 有可衡量的影响。这种影响在移动端最为显著，那里连接更慢，沉重图片带来的惩罚也更大。
为什么要在本地处理媒体，而不是使用网页服务？
大多数在线媒体工具都要求把你的文件上传到远程服务器，这会耗费时间、占用带宽，还意味着你的文件副本存放在你无法掌控的基础设施上。本站的工具完全在你的浏览器中运行：你的图片和视频在你的设备上处理，输出直接下载。无需账号，没有上传等待，关于你文件的任何内容都绝不会被发送到服务器。