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 -
