如何使用 amp-img 将 webp 回退到 jpg?

洛夫托拉

我将 webp 与 jpg 回退一起使用,例如:

<picture>
  <source srcset="img/my.webp" type="image/webp">
  <img src="img/my.jpg">
</picture>

但是<picture>标签在 AMP 中是被禁止的。
我如何处理使用 webp 回退到 jpg?

塞巴斯蒂安·本茨

您可以通过在以下内容中定义后备图像来做到这一点amp-img

<amp-img alt="Mountains"
  width="550"
  height="368"
  src="images/mountains.webp">
  <amp-img alt="Mountains"
    fallback
    width="550"
    height="368"
    src="images/mountains.jpg"></amp-img>
</amp-img>

https://www.ampproject.org/docs/reference/components/amp-img#example:-specifying-a-fallback-image

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何使用jQuery将img更改为amp-img?

来自分类Dev

使用属性转换将 HTML5 img 转换为 AMP amp-img

来自分类Dev

Webpack-如何通过image-webpack-loader将jpg / png转换为webp

来自分类Dev

如何使用php将IMG(url.jpg)转换为html img?

来自分类Dev

如何回退到雷鸟的出厂版本?

来自分类Dev

在无服务器中如何将cmd参数回退到环境变量以默认值?

来自分类Dev

Vue如何使用render函数回退到默认渲染?

来自分类Dev

如何回退到“ WHERE”子句sql中的其他值?

来自分类Dev

MYSQL:如何在“ WHERE”子句中回退到“ IS NULL”

来自分类Dev

如何设置具有回退到DHCP的静态IP

来自分类Dev

autofs 回退到 nfs 版本 3 而不是使用 4

来自分类Dev

无法在amp-mustache中使用amp-img?

来自分类Dev

我如何做客户端 webp、webm 回退?

来自分类Dev

使用枕头将图像转换为webP

来自分类Dev

使用Java将.webp转换为.jpeg

来自分类Dev

使用枕头将图像转换为webP

来自分类Dev

使用Java将.webp转换为.jpeg

来自分类Dev

将WebP重命名为JPG或其他有不利之处吗?

来自分类Dev

为什么Google Chrome浏览器将JPG图片保存到WEBP?

来自分类Dev

在使用熊猫从CSV读取整数时,如何优雅地回退到“ NaN”值?

来自分类Dev

仅当服务不可用时,将Polly库配置为回退到缓存的值

来自分类Dev

将AngularCLI版本从1.0.0-beta.30全局回退到1.0.0-beta.26?

来自分类Dev

TYPO3 RTE将<img>转换为<amp-img>

来自分类Dev

如何禁用amp-img默认灯箱功能?

来自分类Dev

使用Node.js中的GraphicsMagick / ImageMagick包在AWS Lambda中将JPG转换为WebP

来自分类Dev

如何有条件地禁用ngTouch并回退到ng-click

来自分类Dev

如何在视频HTML5上回退到Gif,但不提前下载gif?

来自分类Dev

棒棒糖WiFi连接不良并回退到移动网络,如何检测?

来自分类Dev

使用fmt库通过回退到指针来格式化类型

Related 相关文章

  1. 1

    如何使用jQuery将img更改为amp-img?

  2. 2

    使用属性转换将 HTML5 img 转换为 AMP amp-img

  3. 3

    Webpack-如何通过image-webpack-loader将jpg / png转换为webp

  4. 4

    如何使用php将IMG(url.jpg)转换为html img?

  5. 5

    如何回退到雷鸟的出厂版本?

  6. 6

    在无服务器中如何将cmd参数回退到环境变量以默认值?

  7. 7

    Vue如何使用render函数回退到默认渲染?

  8. 8

    如何回退到“ WHERE”子句sql中的其他值?

  9. 9

    MYSQL:如何在“ WHERE”子句中回退到“ IS NULL”

  10. 10

    如何设置具有回退到DHCP的静态IP

  11. 11

    autofs 回退到 nfs 版本 3 而不是使用 4

  12. 12

    无法在amp-mustache中使用amp-img?

  13. 13

    我如何做客户端 webp、webm 回退?

  14. 14

    使用枕头将图像转换为webP

  15. 15

    使用Java将.webp转换为.jpeg

  16. 16

    使用枕头将图像转换为webP

  17. 17

    使用Java将.webp转换为.jpeg

  18. 18

    将WebP重命名为JPG或其他有不利之处吗?

  19. 19

    为什么Google Chrome浏览器将JPG图片保存到WEBP?

  20. 20

    在使用熊猫从CSV读取整数时,如何优雅地回退到“ NaN”值?

  21. 21

    仅当服务不可用时,将Polly库配置为回退到缓存的值

  22. 22

    将AngularCLI版本从1.0.0-beta.30全局回退到1.0.0-beta.26?

  23. 23

    TYPO3 RTE将<img>转换为<amp-img>

  24. 24

    如何禁用amp-img默认灯箱功能?

  25. 25

    使用Node.js中的GraphicsMagick / ImageMagick包在AWS Lambda中将JPG转换为WebP

  26. 26

    如何有条件地禁用ngTouch并回退到ng-click

  27. 27

    如何在视频HTML5上回退到Gif,但不提前下载gif?

  28. 28

    棒棒糖WiFi连接不良并回退到移动网络,如何检测?

  29. 29

    使用fmt库通过回退到指针来格式化类型

热门标签

归档