Google AMP - Görseller

Google AMP sayfasında kullanılan resimler, standart bir html sayfasında nasıl kullanıldığına benzer, ancak tek fark, etiket adının bazı ek özelliklerle kullanılma şeklidir. Bu bölüm bunları ayrıntılı olarak tartışmaktadır.

Aşağıda gösterilen sözdizimlerine uyun -

Standart HTML

<img src = ”example.jpg” width = ”300” height = ”250” alt = ”Example” ></img>

AMP sayfasında

<amp-img src = "example.jpg" alt = "Example" height = "300" width = "250" ><//amp-img>

Etiketinin img olarak değiştirildi amp-img.

Neden img yerine amp-img kullanılmalı?

İmg'yi amp-img olarak değiştirmenin arkasındaki sebep, sayfa düzeni ve görüntüyü yüklemek için yapılan ağ isteği üzerinde daha fazla kontrole sahip olmaktır. Amp, görüntü kaynağına geç yükleme ekler ve sayfadaki diğer kaynaklara göre yüklemeye öncelik verir.

Misal

Daha iyi anlamak için aşağıdaki kodu inceleyin -

<!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>

Çıktı

Yukarıda gösterilen kodu çalıştırdığınızda, sonucu aşağıda gösterildiği gibi bulacaksınız -

Ayrıca, aşağıda gösterildiği gibi amp-img etiketine layout = ”responsive” özelliğini ekleyerek de görüntüyü duyarlı hale getirebilirsiniz

Misal

Daha iyi anlamak için aşağıdaki kodu inceleyin -

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

Çıktı

Yukarıda gösterilen kodu çalıştırdığınızda, sonucu aşağıda gösterildiği gibi bulacaksınız -