html - 在 slider 中显示不同的图像作为移动和桌面的 img 以提高性能

Question

我对网站上的 slider 有疑问。

目前它是一个带有 <img> 的 slider 元素。我现在遇到的问题是，在移动设备上也会加载大图像。现在我想为移动设备加载特定(较小)的图像，以便我的网站在这些设备上更快。

我的一个解决方案是将媒体查询与 CSS 背景图片结合使用。这非常适合使用，因为我可以使用 CSS 加载图像，因此可以使用媒体查询根据屏幕尺寸选择图像。

但问题是我想将图像添加到 SEO，它们对我的网站来说是必不可少的，我到处都读到如果你有这样的图像，你需要使用 <img>元素。这样 SEO 就可以工作并将这些图像包含在内容中。我也无法将 ALT 标签添加到背景图像。

另一种解决方案是呈现两个 slider ，一个用于移动设备，一个用于桌面设备，然后隐藏您不想看到的 slider 。这个解决方案的问题是两个 slider 都需要渲染，从而降低了性能。

这里有我缺少的解决方案吗？据我了解，您无法更改 <img> 中的图像带有 CSS 媒体查询的元素。

Answer 1

您可以使用 picture 元素。作为Mozilla Developer Network说，“[这个元素] 充当零个或多个元素的容器，一个元素为不同的显示设备场景提供图像版本”。我认为它可以解决问题。在这里你又是一个好人article这解释了如何使用此元素来实现响应式图像所需的结果。