如何在不损失质量的情况下压缩网页图像

图像占普通网页总大小的50%到60%。在上传前压缩图像，是你能为提升网站速度所做的最具影响力的优化之一——进而也会直接影响你的SEO排名和用户体验。

为什么图像压缩对SEO很重要

谷歌的Core Web Vitals（核心网页指标）——特别是Largest Contentful Paint（LCP，最大内容绘制）——衡量的是页面主要内容加载的速度。未优化的图像是导致LCP得分不佳的最常见原因。页面速度已被确认为排名因素，谷歌的PageSpeed Insights也明确将未优化的图像标记为提升得分的"机会"。

你应该使用哪种质量设置？

质量设置控制着图像被压缩的激进程度：

• 90–100%：接近无损。文件仍然较大。仅适用于印刷质量的素材。
• 80–85%：适用于大多数网页图像的最佳平衡点。文件比原图小50%到70%，在屏幕上没有明显视觉差异。
• 70–75%：激进压缩。适合小型缩略图和背景图像。近距离观察时可能出现轻微的压缩痕迹。
• 低于60%：质量损失明显可见。仅适用于非常小的预览图或占位图。

对于大多数网站图像而言，80%质量是最佳起点。

选对格式比压缩程度的影响更大

选择正确的格式，比调整质量滑块的影响更大：

• 照片：使用WebP（在相同质量下比JPG小25–35%）或80%质量的JPG。
• 徽标和图标：如果可能，使用SVG。若为位图格式，则使用WebP或PNG。
• 纯色插图：使用PNG或无损WebP。
• 动图：使用WebP动画或视频格式（比GIF小得多）。

分步指南：为你的网站压缩图像

1. 先调整尺寸 — 如果你的网站只以800px的宽度显示图像，就不要上传4000px宽的照片。先使用我们的图像尺寸调整工具将其缩放到实际显示尺寸。
2. 选择正确的格式 — 将JPG转换为WebP，或将PNG转换为WebP，以获得最佳的网页效果。
3. 压缩 — 使用我们的图像压缩工具，质量设为75–80%。
4. 设置正确的尺寸属性 — 在<img>标签中使用width和height属性，以防止布局偏移。
5. 使用延迟加载 — 为首屏以下的图像添加loading="lazy"，使其仅在可见时才加载。

WordPress用户：自动压缩

如果你使用WordPress，可安装Smush或ShortPixel插件，在上传时自动压缩图像。两者都提供免费套餐，足以满足大多数小型网站的需求。它们还会自动为支持的浏览器提供WebP格式。

你能节省多少？

真实案例：一篇博客文章中有5张未优化的照片，每张2MB = 页面总重量10MB。将其调整为1200px宽并压缩为80%质量的WebP后：

• 每张图像：约80–120KB
• 总计：约500KB
• 节省：超过95%

这就是移动网络下8秒加载与不到1秒加载之间的差距。