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।

क्यों img के बजाय amp-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>

उत्पादन

जब आप ऊपर दिखाए गए कोड को निष्पादित करते हैं, तो आपको नीचे दिखाए अनुसार परिणाम मिलेगा -

आप नीचे दिखाए गए अनुसार amp लेआउट के लिए गुण लेआउट = "उत्तरदायी" जोड़कर छवि को उत्तरदायी बना सकते हैं

उदाहरण

एक बेहतर समझ के लिए निम्नलिखित कोड देखें -

<amp-img alt = "Beautiful Flower" src = "images/flower.jpg"
   width = "246"
   height = "205"
   layout = "responsive">
</amp-img>

उत्पादन