关于我网站上的滑块，我遇到了麻烦。
目前它是一个带有<img>元素的滑块。我现在遇到的问题是在移动设备上也会加载大图像。现在我想为移动设备加载特定（较小）的图像，以便我的网站在这些设备上更快。
我的解决方案是将媒体查询与CSS背景图像结合使用。这是完美的使用，因为我可以使用CSS加载图像，因此可以使用媒体查询根据屏幕大小选择图像。
但问题是我想将图像添加到SEO中，它们对我的网站至关重要，我随处可读，如果你有这样的图像，你需要使用<img>元素。因此SEO可以工作并将这些图像包含在内容中。此外，我无法将ALT标签添加到背景图像。
另一个解决方案是渲染两个滑块，一个用于移动设备，一个用于桌面设备，并隐藏您不想看到的滑块。我对此解决方案的问题是两个滑块都需要渲染，从而降低了性能。
我在这里找不到解决方案吗？据我了解，您无法使用CSS媒体查询更改<img>元素中的图像。
答案 0 :(得分：0)
您可以使用picture元素。正如Mozilla Developer Network所说，“[此元素] 用作零个或多个元素的容器，一个元素用于为不同的显示设备方案提供图像版本”。我认为这样做。在这里，您是另一个很好的article，它解释了如何使用此元素来实现响应式图像所需的结果。
答案 1 :(得分：0)
picture元素是一个非常好的现代解决方案。但是如果你想要更多的跨浏览器，可以考虑采用JavaScript的方法。我对某些网站的解决方案是使用带有常规后缀的图像集，例如image.jmg，image-medium.jpg，image-small.jpg以及检查屏幕分辨率的脚本。在HTML中只包含小图像，但如果脚本发现屏幕足够大，它会用相应的后缀更新src。