图像优化 101：文件更小，页面更清晰
在几乎所有网站上打开浏览器的网络选项卡，您都会看到同样的情况：图像占页面重量的大部分。它们也是网络性能方面最容易获胜的。您不需要重构您的代码库 - 您只需要停止提供比需要的更大的图像。
页面速度不是虚荣心。这是通过Core Web Vitals确认的 Google 排名因素，屏幕上最大的图像通常决定您的最大内容绘制 (LCP) 分数。以下是如何按顺序正确修复图像。
第 1 步：上传前调整大小
最常见的错误是将手机摄像头中的 4000 像素照片直接提供到 800 像素插槽中。浏览器会下载所有这些浪费的像素，然后缩小它们。将图像大小调整为实际首先显示的最大尺寸 - 使用我们的免费图像调整器。这一步骤通常可以将文件大小减少 80% 或更多。
第 2 步：压缩且无明显损失
调整大小后，压缩。大多数照片的尺寸会缩小 40-70%，但质量不会明显下降，因为 JPEG 和 WebP 会丢弃肉眼几乎看不到的细节。我们的图像压缩器可让您在质量与大小之间进行权衡，并在下载前预览结果。
第 3 步：使用现代格式
WebP 提供与 JPEG 和 PNG 相同的视觉质量，但尺寸仅为其一小部分，并且所有现代浏览器都支持它。 Google 自己的 WebP 文档报告比同类 JPEG 节省了 25–35%。使用JPG 到 WebP 或PNG 到 WebP 将文件转换。如果您需要返回，WebP to JPG 也可以处理。
第 4 步：为作业选择正确的格式
- 照片：WebP 或 JPEG — 对复杂图像进行出色的压缩。
- 徽标、图标、线条艺术：SVG 或 PNG — 锐利的边缘、透明度、较小的简单图形。
- 任何带有文本的内容：避免使用 JPEG，因为它会模糊锐利的边缘；使用 PNG 或 WebP。
第5步：帮助浏览器智能加载
添加宽度和高度属性，以便浏览器保留空间并避免布局移动（CLS 指标）。在非首屏图像上使用loading="lazy"，以便它们仅在需要时加载，并让最重要的首屏图像立即加载。 Google 的图片最佳做法也强调描述性alt文字 - 有利于无障碍访问和在 Google 图片中的排名。
第 6 步：提供响应式尺寸
手机和 27 英寸显示器不应下载相同的图像。 srcset 属性允许浏览器为每个屏幕选择最合适的大小，这样移动用户就不会因为桌面大小的文件而受到惩罚。即使是简单的两个或三个大小的 srcset 也可以极大地减少设备上最重要的数据。如果您的 CMS 或框架提供响应式图像，请打开该功能 - 这是影响最大的可用选项之一。
第 7 步：衡量胜利
不要猜测——验证。在之前和之后通过页面速度检查器运行您的页面，以查看加载时间和核心网络生命力的实际改进。特别注意最大内容绘制 (LCP)：如果您的英雄图像是瓶颈，您会发现它立即下降。
快速的前后工作流程
- 将图像大小调整为实际显示尺寸。
- 对其进行压缩并观察其质量。
- 转换为 WebP。
- 添加宽度、高度、alt 和延迟加载。
- 重新测试页面并确认 LCP 的改进。
在三到四个最重的图像上运行该循环，您将捕获绝大多数可用的速度增益。
不要忘记图像搜索引擎优化
优化的图像不仅加载速度更快，而且还可以带来自己的流量。描述性文件名（“blue-running-shoes.webp”优于“IMG_4821.webp”）和有意义的替代文本可帮助您在 Google 图片中排名，并使屏幕阅读器用户可以访问您的网站。选择正确的格式在这里也很重要；我们的JPG vs PNG vs WebP vs SVG指南详细说明了何时使用它们。
底线
调整大小、压缩、转换为 WebP、设置尺寸、延迟加载和提供响应式大小。做到这些事情，大多数网站都会以最少的努力获得最大的性能提升 - 更快的页面、更快乐的访问者、更好的可访问性以及可衡量的排名提升。
