问题标签 [amp-img]

我有一个带有 AMP 页面的网站，允许编辑将图像添加到页面中。图像使用 amp-img 元素显示并在任何普通浏览器中呈现。

当用户查看阅读器或被 Embedly 等网站抓取时，不会显示 amp-img 元素。

我认为这是由 amp-img 元素不是有效的 HTML 元素引起的，因此被忽略。有没有办法解决这个问题？

我正在构建简单的静态网站并想要优化图像，最终为每个图像集生成不同大小的 jpgs/pngs 和 webps。在非 AMP 世界中，我会使用不同类型的<picture>标签和<source>内部标签，但据我所知，这里只有 amp-img。我的代码是这样的：

1. 大多数不支持 webp 的浏览器（Edge 17、IE 11、Safari 11、iOS 11 Safari）在加载时会显示回退，但是如果用户调整浏览器大小并且（看起来）触发 srcset 转换，浏览器会显示损坏的图像，调整大小后不再改变。例如，在 iPhone 上打开页面，旋转以更改方向。
2. 如果外部 amp-img 具有 srcset，Firefox 67 甚至不会显示回退。

这是 codepen 演示：https ://codepen.io/antejan/full/rKEPNm/

有没有办法在没有这些问题的情况下使用 srcset、webp 和后备？

我想知道如何在 amp 中正确使用 webp。有一个示例表格amp doc

但这浪费了非 webp 浏览器的带宽。非 webp 浏览器将下载这两个图像，首先是 webp，然后解码失败，然后下载 jpg。

我知道 AMP Cache 确实会为支持 webp 的浏览器自动进行 webp 转码，但这对我自己的来源或其他查看器没有帮助。

还有一个基于能力选择图像文件的添加机制的问题，但它两年内处于非活动状态。

有没有更好的解决方案？

不久前，在这个社区的帮助下，我能够使用 div 类和标签在我的博客文章中设置我的图像以显示/隐藏桌面和移动设备<picture>，并且还研究了如何设置特定的 amp-img桌面与移动，因为 div 类不适用于 amp 页面。

我并不总是使用这些，但是当我需要在不同的位置为桌面和移动设备显示图像时，或者如果我有两个版本的相同图像我想在同一个位置显示时，它很有用（例如，在段落之间），但我希望它们具有一定的纵横比，具体取决于某人使用的设备。

我曾经使用 CSS 媒体查询，但它变得非常混乱并且添加了太多工作。并且有人建议我不要对 amp 图像使用 CSS 媒体查询。

以下是我的图像现在如何输入到我的博客文章中的示例：

我使用它在桌面上的一个位置显示图像（此博客文章中的第二张图像：https ://www.smartfertilitychoices.com/inositol-pcos/ ）：

这是为了在移动设备上显示相同的图像，只是在博客文章中的不同位置：

当我希望两个不同的图像在桌面和移动设备上的同一个位置时，我会使用它（上面链接的博客文章中的第三个图像）：

自从 Wordpress 上周更新以来，我现在无法“更新”我的博客文章而不删除部分 html（<picture>标签和标签<amp-img>。这种情况发生在整个网站范围内，用于各种嵌入式内容，如注册表单和视频（javascript + html）和我已经通过对这些事情使用简码解决了这个问题。我已经测试过，如果我将图像 html 输入到简码创建器中，然后在博客文章中使用简码，简码将几乎完美地工作。但是这个额外的步骤只是创建不必要的工作，如果存在，我希望有一种更简单的方法来做到这一点。

以下是哪些部分消失以及消失时会发生什么的示例：

变成

和

变成

• 以上两个例子都意味着图像将在博文的 amp 版本中显示两次，但对于常规的非 amp 版本将继续正常工作。

最后，这个：

变成：

• 这意味着图像只有一个变体显示 /inositol-and-pcos-7.jpg（移动版）。我知道解决这个问题的一种方法是在这个地方只拥有图像的桌面版本，但如果可能的话，我宁愿不必在移动设备上这样做。我在其他博客文章中为桌面设置了其他宽幅图像，其中包含文本，一旦它们被压缩到移动尺寸，就很难阅读这些图像。

如果有人对将图像嵌入博客文章的其他方法有任何见解，可以显示/隐藏桌面与移动 + 尤其是放大器图像。谢谢！

我正在尝试将图标添加到 amp-user-notification 组件中。但是，在页面加载时，amp-img 不显示。如果我进一步向下滚动页面并刷新，图像就会加载。如果我向下滚动然后调整屏幕大小，也会发生这种情况。

我将 amp-user-notification 的布局类型更改为“响应式”，但验证失败（由于不是可接受的类型）。

前端渲染前的代码

我有一个带有 layout="responsive" 的 amp-img，如果您喜欢这样说，我需要在其中或在其顶部放置一些文本。amp-img 将填充屏幕的宽度，高度将由 amp-img 确定，以便整个图像可见并保持纵横比。

有没有办法做到这一点？

我可以将图像放在背景中，但我会失去 amp-img 提供的响应式大小。我已经尝试过使用背景大小的封面或包含，但我的图像总是被裁剪，无论是在右侧还是底部。

我也尝试将文本放置在位置：绝对，但无法将文本放在图像顶部。这是一次尝试，最终得到图像下方的文本：

有没有办法让图像大小正确并在上面放置文字？

PS。有人会为 amp-fit-text 创建一个标签吗？

我有一个 SVG 文件，其中包含许多导航到不同页面的 xlink。例如：

SVG 是一张美国地图，我很乐意提供它，但它太大了，无法在此处包含。

当我尝试在 AMP 页面中使用此 SVG 时，xlink 不起作用。我在AMP 规范中看到 SVG 中的 xlink 必须有一个以“#”开头的目标 URI，所以我认为这就是我的 xlink 不起作用的原因。无论我使用 amp-img 还是 img 标签，它的行为都是一样的。

如果我将它放在非 AMP 页面上的 img 标记中，它可以正常工作。

有没有办法让我的链接转到新页面，而不仅仅是同一页面上的#-link？

当我将 SVG 放在 AMP 页面上时，悬停时的颜色变化也会停止工作，但我一次只能解决一个问题。

我使用轮播来显示文章AMP摘要列表。

出于某种原因，只有在页面加载时可见的摘要才有图片。

（如果我更多地旋转屏幕但没有加载所有图片。）

我究竟做错了什么？

随时询问更多信息。

这是布局：

这是样式表：

您可以看到只出现了四张图片中的三张：

更新：

Bachcha Singh 说这是一个错误。添加后：

现在可以了。但是，我很乐意让它至少感觉像rtl......说将初始位置设置为轮播结束。

更新#2： 似乎已在 amp-carousel-0.2 中解决。

我目前正在使用 AMP 创建电子商务产品详细信息页面。作为工作的一部分，我希望能够为每个产品提供有效的结构化数据以协助 SEO。

我在尝试将结构化数据属性添加到itemprop="image"使用amp-img. 据我所知，没有办法将自定义属性应用于最终呈现的img标签。amp-img

我现有的标记：

渲染的内容：

我在找什么（itemprop="image"属性在img标签本身）：

有没有人知道这是否可能？如果不是，为什么实施这种行为会破坏 AMP 范式？

自采用 Google AMP (amp-img) 以来，Google PageSpeed 惩罚“延迟离屏图像”。似乎 PageSpeed 鼓励 AMP 加载所有图像！在 AMP 之前，我使用 JS 来延迟加载位于初始视口之外的图像。我愿意接受有关如何保留 AMP 但避免 PageSpeed 惩罚的建议。

示例：（此图像的代码位于初始视口下方，靠近页面底部）

::: 页面顶部区域 - 初始视口区域 ::: ...“折叠”页外、折叠下方、靠近底部页面的第二个视口页面

当在 PageSpeed 上评分时，尽管此图像不在页面上，但 AMP 运行时不会延迟加载并导致罚分！

（代码被删除，因为 StackOverflow 编辑器拒绝允许它！）

由于 AMP 禁止我的旧 JS LazyLoad 技术，我受制于这种声明的 AMP 行为：“运行时可能会根据视口位置、系统资源、连接带宽或其他因素选择延迟或优先加载资源。” （https://amp.dev/documentation/components/amp-img?format=websites）所以看来，通过采用 AMP，我已经放弃了对 Google AMP 运行时延迟加载的控制，这“可能”选择延迟。当 PageSpeed 对 AMP 页面进行评分时，您会认为 AMP 运行时想要给人留下深刻印象，对吧？您会认为 AMP 运行时会“选择延迟”(amp-img) 内容出现在页面外（不在初始视口区域内）。你错了。

PageSpeed 惩罚信息如下：

“推迟屏幕外图像。考虑在所有关键资源完成加载后延迟加载屏幕外和隐藏图像，以缩短交互时间”

我喜欢 AMP，但是 PageSpeed 的人有机会与 AMP 的人合作吗？我同意 PageSpeeds 对这种情况的描述，称其为“机会”。可悲的是，当我采用 AMP 时，我似乎已经将这个“机会”交给了 AMP 运行时......并因此而受到惩罚。

任何人都可以提供一个实用的解决方法，以便我可以保留 AMP，但在将 (amp-img) 用于位于初始视口之外的图像时不会在 PageSpeed 上受到惩罚？