图像很难

将图像放在网站上非常简单，是吗？事实上，是的，确实如此。您使用 <img> 并将其链接到 src 属性中的有效源，然后就完成了。除了有（数手指）你可以（还有一些你真的应该）做的事情经常被忽视。让我们看看……确保在图像上使用句子格式的替代文本来描述图像所描绘的内容。将其包裹在 <figure> 中并使用 <figcaption> 如果您想要与之配套的可见文本。如果您想……使用带有各种 <source> 元素的 <picture> 元素…… 立即了解图像格式，以便您可以在适当的时候使用 SVG 等格式。充分了解您的受众，以便您可以默认使用最现代的格式。使用 srcset 和 size 属性来提供不同大小的图像，以在不同的网络设备上提高带宽效率。请注意，为了尽可能高效，创建这些图像变化取决于图像本身，而不是预先确定的尺寸。

优化图像及其所有变化。尝试许多图像优化软件，因为它们都会产生不同的结果。选择最好的。确保优化后的版本不会意外地比原始版本更大或质量更低，因为这可能会发生。延迟加载图像，因此用户不必下载他们看不到的图像。本来，我们有 loading="lazy" 但这非常重要，可能值得进行 polyfill。确保包含宽度和高度属性，以便图像在加载之前在布局中保留正确的空间量（即使图像具有可变宽度）。在快速、无 cookie 的全球 CDN 上托管您的图像。可能 <link rel="preconnect"> 和 <link rel="dns-prefetch"> 到 CDN 域。但是不要在开发中做任何 CDN 的事情，只做登台或生产。图像的规范来源应该是您自己的服务器，以便您可以根据需要移动 CDN。页面上最大的图像可以完全预加载，例如 <link rel="preload" as="image"> 以获得最佳 LCP。考虑更令人愉悦的图像加载前或失败状态，例如图像的小型模糊版本。进行性能监控，以确保流氓巨型图像不会漏掉并干扰您的性能预算，并且可以观察损坏的图像错误。

我确定我忘记了一些。让你出汗，不是吗？ Addy 在这篇 Smashing Magazine 文章中更详细地介绍了很多这方面的内容，并且有一本关于这个主题的整本书。如果你问我，那是不可能的。至少，在实际利用你的时间的同时，并不是所有的事情都在一起。幸运的是：电脑。我知道 Eleventy Image 和 gatsby-plugin-image 在自动化这些东西和提供尽可能多的这些最佳实践方面都广受好评。另一个现实有时只是做一些这样的事情，也许是最大的胜利，同时随着时间的推移变得务实。在 Jake 的“通过优化高密度显示器使图像尺寸减半”中，他写道：这是我用于此博客上大多数图像的技术：我采用 CSS 像素中可以显示的最大图像尺寸，然后将其乘以 2 ，我以较低的质量对其进行编码，因为它总是以 2 倍或更高的密度显示。是的。而已。