创建更快的图像

[rakibhasanbd4723]

在谈论响应式设计时，图像是个棘手的问题，因为大屏幕显然需要更大的图像。您不会想将 1600px 的图像发送到移动浏览器，因为那会浪费带宽。

不幸的是，目前还没有很好的解决方案。但这里有一些技巧可以帮助加快速度：

使用媒体查询来获取背景

这仅适用于背景图像，因为我们将使 立陶宛电报筛选 用 CSS 媒体查询来提供正确的图像。但如果您的网站上有任何背景图像，这可能会有助于大幅减少加载时间。

首先，获取主全尺寸背景图像，然后为其创建一个较小版本（如果您愿意，也可以创建一个中等版本）。现在，只需为包含背景图像的元素添加以下 CSS：

这将确保在较小的屏幕上下载较小的图像，因为媒体查询将覆盖原始 CSS 属性。

本文提供了有关 优化响应式网站图像的真正详尽指南，因此请查看更多详细信息。

对图像使用媒体查询

对于普通图像，没有好的选择使用相同的技术。但是，一种解决方案是使用背景图像而不是 HTML img 标签。这样做的缺点是你错过了包含 alt 标签的机会，这对 SEO 不利。

但是，如果您的网站包含大量图片，则使用此技术可以大大减少移动访问者的加载时间。您必须决定哪个选项最重要。