在不知道尺寸的情况下使用<amp-img>包含图像

Question

如何在不知道图像尺寸的情况下在AMP HTML文章中发布图像？

Answer 1

当浏览器遇到没有大小的图像标记时，它会下载图像并查看前几个字节以确定大小。这非常低效，因为它必须在用户的高延迟连接上发生。我的其余部分为如何解决问题提供了两种选择：

如何在服务器端找到图像尺寸（在发布期间）： 相反，您可以在发布期间以最小的开销在服务器端执行相同的操作。每种CMS和服务器端语言都有可以查找图像大小的模块。您可以使用像ImageMagick（它具有所有编程语言的绑定）之类的东西，但您可能会找到更专业的工具来进行尺寸确定。

可以找到图像大小的流行编程语言的示例模块：

• node.js
• ruby
• python
• php

CMSes

• WordPress

如果您真的无法了解图片尺寸该怎么办： 独立于此，您可以在不知道大小的情况下将图像加载到AMP中，方法是使用layout=fill，其中浏览器中图像的大小与图像的实际大小无关。另一种方法是使用layout=fixed或layout=responsive和img object-fit: contain。如果您始终希望所有图像具有相同的尺寸，则此功能非常有用。