文章
优化网站媒体以提升速度和 Core Web Vitals
图片和视频通常占一个网页总重量的 60% 到 80%。把它们处理好，是你为加载速度、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 处处可播，但采用 VP9 的 WebM 在相同质量下要小 20% 到 40%，这对处于受限连接下的移动端用户很重要。务实的做法是一次性转换为 WebM，把它作为 video 元素里的首选源，并保留 MP4 作为兜底。这里的视频转换器使用编译为 WebAssembly 的 FFmpeg：转换在你的浏览器内运行，什么都不上传，只要你的设备有足够内存，任意大小的文件都能处理。对于页面中的内嵌背景视频，还可以考虑用视频裁剪工具在编码前剪掉无效的几秒：时长是文件大小的最大推手。
内联资源：base64 与 SVG
将很小的图片、图标和网站图标以 base64 字符串直接嵌入 HTML 或 CSS，能为每个资源省去一次网络往返。这对那些出现在每个页面、大小约在 2 KB 以下的资源是有意义的，比如徽标雪碧图或加载指示器。更大的资源应保持为独立文件，因为 base64 的编码体积比二进制大 33%，而且浏览器会缓存文件引用，却不会单独缓存内联数据。SVG 优化器能在不改动视觉输出的前提下，清除导出的 SVG 中由编辑器留下的冗余。图片转 base64 转换器会在你的浏览器中生成可直接粘贴的 data URI。
本文涉及的工具
常见问题
图片压缩会影响我的搜索排名吗？
Google 把 Core Web Vitals 作为排名信号，而 Largest Contentful Paint 几乎总是一张图片或一帧视频封面。主视觉大图在一秒内加载完成的页面，得分会高于需要三秒才加载完的页面。压缩和正确的格式直接影响这项指标，所以是的，图片优化对 SEO 有可衡量的影响。这种影响在移动端最为显著，那里连接更慢，沉重图片带来的惩罚也更大。
为什么要在本地处理媒体，而不是使用网页服务？
大多数在线媒体工具都要求把你的文件上传到远程服务器，这会耗费时间、占用带宽，还意味着你的文件副本存放在你无法掌控的基础设施上。本站的工具完全在你的浏览器中运行：你的图片和视频在你的设备上处理，输出直接下载。无需账号，没有上传等待，关于你文件的任何内容都绝不会被发送到服务器。