图像很难。

将图像放到网站上非常简单，对吧？ 实际上，是的，确实如此。 您使用 <img> 并将其链接到 src 属性中的有效源，然后就完成了。 除了（数手指）您可以做 927 件事（其中一些您确实应该做），而这些事经常被忽视。 我们来看看……

• 确保您在图像上使用句子格式的 alt 文本，以描述图像所描绘的内容。
• 如果要使用与图像相关的可见文本，请将其包装在 <figure> 中，并使用 <figcaption>。
• 使用包含多种 <source> 元素的 <picture> 元素，如果您想要……
  • 对不同的屏幕尺寸和其他条件使用不同的源图像。
  • 提供不同的格式图像，以利用下一代图像格式。
• 从一开始就了解图像格式，以便在适当的时候使用 SVG 等格式。
• 了解您的受众，以便您可以默认使用最现代的格式。
• 使用 srcset 和 sizes 属性，为不同设备提供不同大小的图像，以提高带宽效率。 请注意，为了尽可能提高效率，创建这些图像变体取决于图像本身，而不是预先确定的尺寸。
• 优化图像及其所有变体。 尝试使用大量图像优化软件，因为它们会产生不同的结果。 选择最佳的。 确保优化后的版本在大小或质量上不会意外地大于或低于原始版本，因为这可能会发生。
• 延迟加载图像，这样用户就不必下载他们不会看到的图像。 本地，我们有 loading="lazy"，但这非常重要，因此可能值得进行填充。
• 确保包含 width 和 height 属性，以便图像在加载之前在布局中保留正确的大小（即使图像的宽度是流动的）。
• 将您的图像托管在快速、无 cookie 的全球 CDN 上。 可能使用 <link rel="preconnect"> 和 <link rel="dns-prefetch"> 连接到 CDN 域（如果有多个）。 但不要在开发环境中执行任何 CDN 相关操作，只在暂存或生产环境中执行。 您图像的规范源应该是您自己的服务器，这样您就可以根据需要移动 CDN。
• 页面上最大的图像可以完全预加载，例如 <link rel="preload" as="image">，以获得最佳的 LCP。
• 尝试弄清楚何时应该使用 decoding="async"（我不知道）。
• 在图像无法加载时，准备就绪的备用样式。
• 考虑为图像提供更令人愉悦的预加载或失败状态，例如图像的小型模糊版本。
• 准备就绪的性能监控机制，以确保流氓巨型图像不会溜进系统并破坏您的性能预算，并且可以监控损坏的图像错误。

我肯定遗漏了一些。 会让你心慌，不是吗？

Addy 在 这篇 Smashing Magazine 文章 中更详细地介绍了这些内容，并且还出版了 一本关于该主题的完整书籍。

如果你问我的话，这是不可能的。 至少，在时间上实用性兼顾的情况下，不可能做到所有这些。 幸运的是：计算机。 我知道 Eleventy Image 和 gatsby-plugin-image 在自动化这些操作以及实现尽可能多的最佳实践方面都广受好评。

另一个现实是，有时只需做一些事情，也许是最大的胜利，同时在时间上保持实用性。 在 Jake 的 “通过优化高密度显示屏将图像大小缩减一半” 一文中，他写道

以下是我对本博客上大多数图像使用的技巧：我取图像在 CSS 像素中可以显示的最大尺寸，然后将其乘以 2，并将其编码为较低的质量，因为它始终以 2x 或更高的密度显示。 是的。 就这么简单。

让人想起 Dave 在 2013 年的 1.5✕ hack。