谷歌 AMP amp-img

AMP(Accelerated Mobile Pages)是Google推出的一种专用于移动端的加速技术，通过使用AMP，可以让我们的页面在移动端呈现得更快、更流畅。amp-img是其中的一个重要标签，它用于加载图片。

使用

使用amp-img标签来替代传统的标签。在amp-img中，我们必须提供一个宽度和高度，方便浏览器预先分配好空间。 amp-img支持以下属性：

• src： 图片的URL路径。
• alt： 图片的替代文本。
• layout： 处理图片加载位置的设置属性，包括以下几种设置：fixed, responsive, fill, flex-item, intrinsic, nodisplay, container。具体可参考官方文档。
• width和height： 图片的宽度和高度。
• class： 图片的样式类设置。
• noloading： 图片加载时不展示loading状态。

下面是一个最基本的amp-img的使用示例：

<amp-img 
  src="/example.jpg"
  alt="Example"
  width="500"
  height="500">
</amp-img>

注意事项

• 不要在amp-img标签中使用srcset属性，因为Google认为它可能导致加载缓慢的问题，从而影响页面的速度。

• 如果您想要多次使用amp-img标签加载图片，请提供两个全局属性：amp-img和amp-anim。amp-img 用于<img> 标记， <amp-anim> 用于动画（例如 GIF）。

• 如果您的图片不是静态的，而是需要借助JavaScript在页面加载后动态改变的，请使用amp-dynamic-img。

总结

amp-img可以帮助我们优化图片的加载效果，让用户能够在移动设备上更快地看到页面内容。注意遵循Google的使用规范，避免使用一些可能会影响性能的属性如srcset。更多amp-img相关信息，请参考官方文档。