- Google AMP - Discussion
- Google AMP - Useful Resources
- Google AMP - Quick Guide
- Google AMP - Cors
- Google AMP - Custom Javascript
- Google AMP - Caching
- Google AMP - Validation
- Google AMP - Basic Syntax
- Html Page To Amp Page
- Google AMP - Media
- Google AMP - Social Widgets
- Google AMP - Analytics
- Google AMP - ADS
- Google AMP - Layout
- Google AMP - Data Binding
- Google AMP - Animations
- Google AMP - Actions And Events
- Google AMP - Dynamic CSS Classes
- Styles And Custom CSS
- Google AMP - Attributes
- Google AMP - Next Page
- Google AMP - User Notification
- Google AMP - List
- Google AMP - Font
- Google AMP - Link
- Google AMP - Selector
- Google AMP - Story
- Google AMP - Date Picker
- Google AMP - Date Countdown
- Google AMP - Fit Text
- Google AMP - Mathml
- Google AMP - Timeago
- Google AMP - Button
- Google AMP - Video
- Google AMP - Iframes
- Google AMP - Form
- Google AMP - Images
- Google AMP - Introduction
- Google AMP - Overview
- Google AMP - Home
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Google AMP - Images
Images used in Google AMP page is similar to how it is used in a standard html page, but only difference is the way the tag name is used with some additional properties. This chapter discusses these in detail.
Observe the syntaxes shown below −
Standard HTML
<img src = ”example.jpg” width = ”300” height = ”250” alt = ”Example” ></img>
In AMP page
<amp-img src = "example.jpg" alt = "Example" height = "300" width = "250" ><//amp-img>
Note that the tag from img is changed to amp-img.
Why to use amp-img instead of img?
The reason behind changing img to amp-img is to have more control on the page layout and the network request made to load the image. Amp adds lazy loading to the image resource and prioritizes the loading as per other resources available on the page.
Example
Observe the following code for a better understanding −
<!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> <pnk 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{visibipty:hidden}to{visibipty:visible}}@-moz-keyframes -ampstart{from{visibipty:hidden}to{visibipty:visible}}@-ms-keyframes -ampstart{from{visibipty:hidden}to{visibipty:visible}}@-o-keyframes -ampstart{from{visibipty:hidden}to{visibipty:visible}}@keyframes amp-start{from{visibipty:hidden}to{visibipty: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>
Output
When you executed the code shown above, you will find the result as shown below −
![AMP Img](/google_amp/images/amp_img.jpg)
You can also make the image responsive by adding property layout = ”responsive” to amp-img tag as shown below
Example
Observe the following code for a better understanding −
<amp-img alt = "Beautiful Flower" src = "images/flower.jpg" width = "246" height = "205" layout = "responsive"> </amp-img>
Output
When you executed the code shown above, you will find the result as shown below −
![AMP Img Executed](/google_amp/images/amp_img_executed.jpg)