提供自适应图像

[sakib60]

现在我们将提供一些不太基本的提示。称它们为高级的可能有点自命不凡，因为它们不需要任何特殊的知识，只需要一点点关心和更多的工作。

我们通常所说的“响应式”图像对于改善我们网站的用户体验非常重要。 Google 在对结果进行排名时会考虑用户体验，因此该因素不仅与图像相关，而且与整体网站优化相关。

响应式图像是通过 <img> 标签的 srcset 属性获得的，除了 src 属性（默认文件）之外，还提供文件替代方案。

您还可以选择使用<picture>标签，这仍然可以稍微提高代码的清晰度。在这种情况下，永远不要忘 波兰电报号码数据 记将默认图像放在 <picture> 内，以确保不理解该标签的浏览器知道要呈现什么图像。

<图片>
<source srcset="catan-alta-calidad.jpg" media="(最小宽度：800px)">
<img src="catan-normal-quality.jpg" alt="卡坦岛棋盘游戏">
</图片>
包含结构化数据
这一点对于 Google 充分利用您的图像至关重要，因为它知道它们在每种情况下发挥什么作用。

Google 图片支持结构化数据，包括指定产品图片内容的能力，这对于在线商店特别有用。

创建图片站点地图
正如您可以为您的电子商务产品创建站点地图一样，最好也包含一个图像站点地图，因为它可以帮助 Google 大致了解您的在线商店中包含哪些图形文件。当您的图像并非总是显示在网站上或需要动态行为来显示（例如，在用户滚动或激活用户界面时加载内容）时，这尤其理想。

大多数 CMS 都有用于生成图像站点地图的插件，因此您通常只需要包含相关插件并进行适当的配置。