- 谷歌AMP教程
- Google AMP - 主页
- Google AMP - 概述
- 谷歌 AMP - 简介
- Google AMP - 图片
- Google AMP - 表单
- Google AMP - Iframe
- Google AMP - 视频
- Google AMP - 按钮
- Google AMP - Timeago
- Google AMP - 数学
- Google AMP - 适合文本
- Google AMP - 日期倒计时
- Google AMP - 日期选择器
- Google AMP - 故事
- Google AMP - 选择器
- Google AMP - 链接
- Google AMP - 字体
- Google AMP - 列表
- Google AMP - 用户通知
- Google AMP - 下一页
- Google AMP - 属性
- 样式和自定义 CSS
- Google AMP - 动态 CSS 类
- Google AMP - 操作和事件
- Google AMP - 动画
- Google AMP - 数据绑定
- Google AMP - 布局
- 谷歌 AMP - ADS
- Google AMP - 分析
- Google AMP - 社交小部件
- Google AMP - 媒体
- Html 页面到 Amp 页面
- Google AMP - 基本语法
- Google AMP - 验证
- Google AMP - 缓存
- Google AMP - 自定义 Javascript
- Google AMP - Cors
- Google AMP 有用资源
- Google AMP - 快速指南
- Google AMP - 有用的资源
- Google AMP - 讨论
Google AMP - 图片
Google AMP 页面中使用的图像与标准 html 页面中使用的图像类似,但唯一的区别是标签名称与一些附加属性的使用方式。本章详细讨论这些内容。
观察下面所示的语法 -
标准HTML
<img src = ”example.jpg” width = ”300” height = ”250” alt = ”Example” ></img>
在 AMP 页面中
<amp-img src = "example.jpg" alt = "Example" height = "300" width = "250" ><//amp-img>
请注意, img中的标签已更改为amp-img。
为什么使用amp-img而不是img?
将 img 更改为 amp-img 的原因是为了更好地控制页面布局和加载图像的网络请求。Amp 向图像资源添加延迟加载,并根据页面上可用的其他资源确定加载的优先级。
例子
请观察以下代码以更好地理解 -
<!doctype html> <html amp lang = "en"> <head> <meta charset = "utf-8"> <script async src = "https://cdn.ampproject.org/v0.js"></script> <title>Google AMP - Image</title> <link rel = "canonical" href = "http://example.ampproject.org/articlemetadata.html"> <meta name = "viewport" content = "width = device-width, minimum-scale = 1,initialscale = 1"> <style amp-boilerplate> body{ -webkit-animation: -amp-start 8s steps(1,end) 0s1 normal both;-moz-animation: -amp-start 8s steps(1,end) 0s 1 normal both;-msanimation: - amp-start 8s steps(1,end) 0s 1 normal both;animation: -amp-start 8s steps(1,end) 0s 1 normal both } @-webkit-keyframes -ampstart{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -ampstart{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -ampstart{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -ampstart{from{visibility:hidden}to{visibility:visible}}@keyframes amp-start{from{visibility:hidden}to{visibility:visible}} </style> <noscript> <style amp-boilerplate> body{ -webkit-animation:none; -moz-animation:none; -msanimation:none; animation:none } </style> </noscript> </head> <body> <h1>Google AMP - Image Example</h1> <amp-img alt = "Beautiful Flower" src = "images/flower.jpg" width = "246" height = "205"> </amp-img> </body> </html>
输出
当您执行上面所示的代码时,您将发现结果如下所示 -
您还可以通过将属性layout =“responsive”添加到amp-img标签来使图像响应,如下所示
例子
请观察以下代码以更好地理解 -
<amp-img alt = "Beautiful Flower" src = "images/flower.jpg" width = "246" height = "205" layout = "responsive"> </amp-img>
输出
当您执行上面所示的代码时,您将发现结果如下所示 -