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