您应该问自己的首要问题实际上是，为了达到您想要的效果，是否真的需要图片。如果您可以消除图片资源（相对于页面上的 HTML、CSS、JavaScript 和其他资源，图片资源通常需要大量字节），那么这始终是最佳优化策略。 也就是说，一张位置恰当的图片也可以传达超过千言万语的信息，因此这取决于您来找到平衡点。
接下来，您应该考虑是否有其他替代技术可以更有效地提供更好的结果
- CSS 效果（例如阴影或渐变）和 CSS 动画可用于生成与分辨率无关的素材，这些素材在每个分辨率和缩放级别下始终看起来清晰，而且通常只需要图像文件所需字节的一小部分。
- Web 字体可以在保留选择、搜索和调整文本大小的能力的同时，使用美观的字体，从而显著改善可用性。
如果您发现自己曾经将文本编码到图片素材中，请停止并重新考虑。出色的排版对于良好的设计、品牌和可读性至关重要，但是图片中的文本会带来糟糕的用户体验：文本不可选择、不可搜索、不可缩放、不可访问，并且对高 DPI 设备不友好。使用 web 字体需要其自身的一组优化，但是它可以解决所有这些问题，并且始终是显示文本的更好选择。
选择合适的图片格式
如果您确定图片是正确的选择，则应仔细选择适合该工作的图片类型。
每种格式都有其自身的优点和缺点。矢量格式非常适合由不太复杂的几何形状（例如徽标、文本或图标）组成的图像。它们在每个分辨率和缩放设置下都能提供清晰的效果，这使其成为高分辨率屏幕和需要在不同尺寸下显示的素材的理想格式。
但是，当场景复杂时（例如，照片），矢量格式就会显得不足：描述所有形状所需的 SVG 标记量可能非常高，并且输出可能仍然看起来不“逼真”。在这种情况下，您应该使用栅格图像格式，例如 PNG、JPEG、WebP 或 AVIF。
栅格图像不具有与分辨率或缩放无关的相同良好特性 — 当您放大栅格图像时，您会看到锯齿状和模糊的图形。因此，您可能需要保存栅格图像的多个版本，并使用不同的分辨率，以便为您的用户提供最佳体验。
高分辨率屏幕的影响
像素有两种不同的类型：CSS 像素和设备像素。单个 CSS 像素可以直接对应于单个设备像素，也可以由多个设备像素支持。重点是什么？嗯，设备像素越多，屏幕上显示的内容的细节就越精细。
高 DPI (HiDPI) 屏幕产生精美的效果，但是有一个明显的权衡：图像素材需要更多细节才能利用更高的设备像素数。好消息是，矢量图像非常适合此任务，因为它们可以在任何分辨率下以清晰的效果渲染 — 您可能需要花费更高的处理成本来渲染更精细的细节，但是底层素材是相同的并且与分辨率无关。
另一方面，栅格图像提出了更大的挑战，因为它们以每像素为基础编码图像数据。因此，像素数越大，栅格图像的文件大小就越大。考虑一下以 100x100 (CSS) 像素显示的图片素材之间的差异
| 屏幕分辨率 | 总像素数 | 未压缩的文件大小（每像素 4 字节） |
|---|---|---|
| 1x | 100 x 100 = 10,000 | 40,000 字节 |
| 2x | 100 x 100 x 4 = 40,000 | 160,000 字节 |
| 3x | 100 x 100 x 9 = 90,000 | 360,000 字节 |
当我们将物理屏幕的分辨率提高一倍时，总像素数会增加四倍：水平像素数增加一倍，垂直像素数也增加一倍。因此，“2x”屏幕不仅使所需像素数增加了一倍，而且增加了四倍！
那么，这在实践中意味着什么？高分辨率屏幕使您可以提供精美的图像，这可能是一项很棒的产品功能。但是，高分辨率屏幕也需要高分辨率图像，因此
- 尽可能首选矢量图像，因为它们与分辨率无关，并且始终提供清晰的效果。
- 如果需要栅格图像，请提供自适应图片。
不同栅格图像格式的功能
除了不同的有损和无损压缩算法之外，不同的图像格式还支持不同的功能，例如动画和透明度（Alpha）通道。因此，为特定图像选择“正确格式”是适当的视觉效果和功能要求的组合。
| 格式 | 透明度 | 动画 | 浏览器 |
|---|---|---|---|
| PNG | 是 | 是 (APNG) | 全部 |
| JPEG | 否 | 否 | 全部 |
| WebP | 是 | 是 | 所有现代浏览器。请参阅 Can I use? |
| AVIF | 是 | 是 | 所有现代浏览器。请参阅 Can I use? |
有两种通用支持的栅格图像格式：PNG 和 JPEG。除了这些格式之外，现代浏览器还支持较新的 WebP 和 AVIF 图像格式。这两种较新的格式都提供更好的整体压缩和更多功能。那么，您应该使用哪种格式呢？
WebP 和 AVIF 通常会提供比旧格式更好的压缩，应尽可能使用。您可以将 WebP 或 AVIF 图像与 JPEG 或 PNG 图像一起用作后备。请参阅使用 WebP 图像以了解更多详细信息。
就旧的图像格式而言，请考虑以下事项
- 您需要动画吗？使用
<video>元素。- GIF 呢？GIF 将调色板限制为最多 256 种颜色，并且创建的文件大小明显大于
<video>元素。APNG 提供比 GIF 更多的颜色，但文件大小也明显大于视觉质量相当的视频格式。请参阅用视频替换动画 GIF。
- GIF 呢？GIF 将调色板限制为最多 256 种颜色，并且创建的文件大小明显大于
- 您需要以最高分辨率保留精细细节吗？使用 PNG 或无损 WebP。
- 除了选择调色板的大小之外，PNG 不应用任何有损压缩算法。因此，它将产生最高质量的图像，但代价是文件大小明显大于其他格式。请谨慎使用。
- WebP 具有无损编码模式，该模式可能比 PNG 更有效。
- 如果图像素材包含由几何形状组成的图像，请考虑将其转换为矢量 (SVG) 格式！
- 如果图像素材包含文本，请停止并重新考虑。图片中的文本不可选择、不可搜索或“不可缩放”。如果您需要传达自定义外观（用于品牌或其他原因），请改用 web 字体。
- 您是否正在优化照片、屏幕截图或类似的图像素材？使用 JPEG、有损 WebP 或 AVIF。
- JPEG 使用有损和无损优化相结合来减小图像素材的文件大小。尝试多个 JPEG 质量级别，以找到您的素材的最佳质量与文件大小之间的权衡。
- 有损 WebP 或有损 AVIF 是网络质量图像的绝佳 JPEG 替代品，但请注意，有损模式会丢弃一些信息以实现更小的图像。这意味着选择的颜色可能与等效的 JPEG 不同。
最后，请注意，如果您使用 WebView 在特定于平台的应用程序中渲染内容，那么您可以完全控制客户端，并且可以专门使用 WebP！Facebook 和许多其他公司都使用 WebP 来传递其应用程序中的所有图像 — 节省的成本绝对是值得的。
对最大内容渲染时间 (LCP) 的影响
图像可能是 LCP 候选元素。这意味着图像的大小会影响其加载时间。当图像是 LCP 候选元素时，高效地编码该图像对于改善 LCP 至关重要。
您应该努力应用本指南中给出的建议，以便对于所有用户而言，页面的感知性能尽可能快。LCP 是感知性能的一部分，因为它衡量页面上最大（因此最容易感知）元素显示的速度。