amp-img

Davranış

Çalışma zamanı; görüntü alanı konumuna, sistem kaynaklarına, bağlantı bant genişliğine veya diğer faktörlere dayalı olarak kaynak yüklemesini geciktirmeyi veya öncelikli hale getirmeyi seçebilir. amp-img bileşenleri, çalışma zamanının resim kaynaklarını bu şekilde etkili bir şekilde yönetmesine olanak tanır.

Dışarıdan getirilen tüm AMP kaynakları gibi amp-img bileşenlerine de önceden açık bir boyut (witdh/height gibi) verilmelidir. Böylece, resim getirilmeden en boy oranı bilinebilir. Gerçek düzen davranışı, layout özniteliği tarafından belirlenir.

Örnek: Duyarlı bir resim gösterme

Aşağıdaki örnekte, layout=responsive öğesini ayarlayarak görüntü alanının boyutuna yanıt veren bir resim görüntülenmektedir. Resim, width ve height tarafından belirtilen en boy oranına göre uzar ve küçülür.

<amp-img alt="A view of the sea"
  src="/static/inline-examples/images/sea.jpg"
  width="900"
  height="675"
  layout="responsive">
</amp-img>

amp-img bileşeni tarafından istenen kaynak yüklenemezse bir fallback alt öğesi sağlanıncaya kadar alan boş kalır. Bir yedek yalnızca başlangıç düzeninde oluşturulur ve olaydan sonraki src değişikliklerinin (örneğin, yeniden boyutlandırma + srcset aracılığıyla) performans sonuçları için bir yedeği olmaz.

Örnek: Bir yedek resim belirtme

Aşağıdaki örnekte, tarayıcı WebP'yi desteklemiyorsa yedek JPG resmi görüntülenir:

<amp-img alt="Mountains"
  width="550"
  height="368"
  src="/static/inline-examples/images/mountains.webp">
  <amp-img alt="Mountains"
    fallback
    width="550"
    height="368"
    src="/static/inline-examples/images/mountains.jpg"></amp-img>
</amp-img>

Yer tutucu arka plan rengi veya diğer görseller, CSS seçim aracı ve öğenin kendisinde stil belirtilerek ayarlanabilir.

Altyazılar gibi ek resim özellikleri, standart HTML ile uygulanabilir (örneğin, figure ve figcaption).

Özellikler

src

Bu özellik, img etiketindeki src özelliğine benzer. Değer, genel olarak önbelleğe alınabilir bir resim dosyasına işaret eden bir URL olmalıdır. Önbellek sağlayıcıları, AMP dosyalarını aktarırken bu URL'leri resmin önbelleğe alınmış bir sürümüne işaret edecek şekilde yeniden yazabilir.

srcset

img etiketinde srcset özelliği ile aynıdır. srcset özelliğini desteklemeyen tarayıcılarda <amp-img>, varsayılan olarak src kullanacak şekilde ayarlanır. Yalnızca srcset sağlanır ve herhangi bir src sağlanmazsa srcset özelliğindeki ilk url seçilir.

sizes

img etiketinde sizes özelliği ile aynıdır.

alt

img etiketindeki alt özelliğine benzeyen, bir alternatif metin dizesi.

attribution

Resmin ilişkilendirilmesini belirten bir dizedir. Örneğin, attribution="CC courtesy of Cats on Flicker"

height ve width

AMP çalışma zamanı tarafından, resmi getirmeden en boy oranını belirlemek için kullanılan, resmin açık bir boyutudur.

common attributes

Bu öğe, AMP bileşenlerine genişletilmiş ortak özellikleri içerirç

Stil

amp-img, doğrudan CSS özellikleri aracılığıyla şekillendirilebilir. Örneğin, şu yolla gri renkli bir arka plan yer tutucu ayarlanabilir:

amp-img {
  background-color: grey;
  }

İpuçları ve Püf Noktaları

Bir resmi maksimum genişliğe kadar ölçeklendirme

Pencere yeniden boyutlandırıldıkça resminizin de bir genişlik üst sınırına kadar (böylece, resim genişliğinden daha fazla uzatılmaz) ölçeklenmesini isterseniz:

1. <amp-img> için layout=responsive değerini ayarlayın.
2. Resmin kapsayıcısında, max-width:<max width to display image> CSS özelliğini belirtin. Neden kapsayıcıda? layout=responsive değerine sahip bir amp-img öğesi blok düzeyindeyken, <img> satır içi bir öğedir. Alternatif olarak, amp-img öğesi için CSS'nizde display: inline-block değerini ayarlayabilirsiniz.

Duyarlı ve içsel düzen arasındaki fark

Hem responsive hem de intrinsic düzenler, otomatik olarak ölçeklenen resimler oluşturur. Temel fark, intrinsic düzenin ölçekleme öğesi olarak bir SVG resmi kullanmasıdır. Bu, resmin standart bir HTML resmiyle aynı şekilde davranmasını sağlarken tarayıcının, başlangıç düzenindeki resim boyutunu bilmesi avantajını korur. intrinsic düzenin içsel bir boyutu olur ve kayan bir div öğesini, doğal resim boyutuna veya max-width gibi bir CSS sabitine ulaşana kadar genişletir. responsive düzen, boyutunu, kayan hale getirildiğinde doğal boyutu olmayan üst öğeden aldığı için kayan bir div öğesinde 0x0 boyutuyla oluşturulur.

Sabit boyutlu resim ayarlama

Resminizin sabit bir boyutta görüntülenmesini isterseniz:

1. <amp-img> için layout=fixed değerini ayarlayın.
2. width ve height değerlerini belirtin.

En boy oranını ayarlama

Duyarlı resimlerde, width ve height değerlerinin amp-img etiketinin genişliği ve yüksekliği ile tam olarak eşleşmesi gerekmez. Bu değerlerin aynı en boy oranıyla sonuçlanması yeterlidir.

Örneğin, width="900" ve height="675" değerlerini belirtmek yerine sadece width="1.33" ve height="1" değerlerini belirtebilirsiniz.

<amp-img alt="A view of the sea"
  src="/static/inline-examples/images/sea.jpg"
  width="1.33"
  height="1"
  layout="responsive">
</amp-img>

Farklı ekran çözünürlükleri için birden fazla kaynak dosyası ayarlama

Aynı resmin tamamında aynı en boy oranına sahip farklı çözünürlüklerini sağlamak için srcset özelliği kullanılmalıdır. Tarayıcı, kullanıcının cihazının ekran çözünürlüğüne ve genişliğine göre en uygun dosyayı srcset özelliğinden otomatik olarak seçer.

Buna karşılık, media özelliği AMP bileşenlerini gösterir veya gizler ve duyarlı düzenler tasarlanırken kullanılmalıdır. Farklı en boy oranlarına sahip resimleri görüntülemenin uygun yolu, birden çok <amp-img> bileşeni kullanmak ve bu bileşenlerin her birinde, her bir örneğin gösterileceği ekran genişlikleriyle eşleşen bir media özelliği bulundurmaktır.

Daha ayrıntılı bilgi için duyarlı AMP sayfaları oluşturma ile ilgili kılavuza bakın.

Bilinmeyen boyutları olan resimler için en boy oranını koruma

AMP düzen sistemi, bir resmin en boy oranının resim getirilmeden önce bilinmesini gerektirir; ancak, bazı durumlarda resmin boyutlarını bilmiyor olabilirsiniz. Bilinmeyen boyutlara sahip resimleri görüntülemek ve en boy oranlarını korumak için object-fit CSS özelliği ile AMP'nin fill düzenini birleştirin. Daha fazla bilgi için Örneklerle AMP Bilinmeyen boyutlara sahip resimleri destekleme sayfasına bakın.

Doğrulama

AMP doğrulayıcı spesifikasyonundaki amp-img kurallarına bakın.