为何source标签父元素需为amp-video？amp-img为何不被支持？

这个问题其实涉及到AMP对不同组件的角色定义和规则限制，咱们一步步理清楚：

1. AMP里的「媒体标签」有特定范围 #

AMP验证规则里提到的需要作为<source>父元素的「媒体标签」，特指处理动态流媒体的组件，比如amp-audio、amp-video这类——它们的核心功能是播放音频/视频内容，需要支持多源切换（比如不同分辨率的视频文件、不同编码的音频文件），所以设计时允许嵌套<source>来提供不同的媒体源选项。

2. amp-img的定位是静态图片优化组件 #

amp-img本质是AMP专门为静态图片打造的优化组件，它有自己一套成熟的响应式适配方案，完全不需要依赖<source>标签。AMP不把它归类到支持<source>的媒体标签里，是因为它的使用场景和设计逻辑和音频/视频组件完全不同：

• 你可以用srcset+sizes属性实现不同屏幕尺寸下的图片自适应
• 也可以配合media属性，为不同设备条件指定对应的图片

3. 你的代码报错的原因 #

当你把原<picture>里的<source>直接放到amp-img下时，AMP验证器会严格检查<source>的父元素是否在它允许的组件列表里——而amp-img不在这个列表中，所以才会抛出“要求父元素为amp-video”这类错误。

4. 替代方案：实现类似<picture>的响应式效果 #

如果要实现原<picture>的响应式图片功能，AMP推荐用以下两种方式：

方式一：使用srcset和sizes #

<amp-img
  src="image-small.jpg"
  srcset="image-small.jpg 480w, image-medium.jpg 768w, image-large.jpg 1200w"
  sizes="(max-width: 480px) 100vw, (max-width: 768px) 768px, 1200px"
  width="1200"
  height="800"
  layout="responsive"
  alt="描述图片内容">
</amp-img>

方式二：多个amp-img配合media属性 #

<amp-img
  media="(max-width: 480px)"
  src="image-small.jpg"
  width="480"
  height="320"
  layout="responsive"
  alt="适配小屏的图片">
</amp-img>
<amp-img
  media="(min-width: 481px)"
  src="image-large.jpg"
  width="1200"
  height="800"
  layout="responsive"
  alt="适配大屏的图片">
</amp-img>

内容的提问来源于stack exchange，提问作者user2472368