amp-img

Perilaku

Runtime dapat memilih untuk menunda atau memprioritaskan pemuatan resource berdasarkan posisi viewport, resource sistem, bandwidth koneksi, atau faktor lainnya. Komponen amp-img memungkinkan runtime untuk mengelola resource gambar secara efektif melalui cara ini.

Komponen amp-img, seperti semua resource AMP yang diambil secara eksternal, harus diberi ukuran eksplisit (seperti dalam width / height) terlebih dahulu, sehingga rasio tinggi lebar dapat diketahui tanpa mengambil gambar. Perilaku tata letak yang sebenarnya ditentukan oleh atribut layout.

Contoh: Menampilkan gambar yang responsif

Pada contoh berikut, kami menampilkan gambar yang merespons ukuran viewport dengan menetapkan layout=responsive. Gambar membentang dan menyusut sesuai dengan rasio tinggi lebar yang ditentukan oleh width dan height.

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

Jika resource yang diminta oleh komponen amp-img gagal dimuat, ruang akan kosong kecuali jika turunan fallback disediakan. Fallback hanya dijalankan pada tata letak awal dan perubahan src berikutnya setelah fakta (misalnya, melalui pengubahan ukuran + srcset) tidak akan memiliki fallback untuk implikasi performa.

Contoh: Menentukan gambar fallback

Pada contoh berikut, jika browser tidak mendukung WebP, gambar JPG fallback akan ditampilkan:

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

Warna latar belakang placeholder atau visual lainnya dapat ditetapkan menggunakan pemilih CSS dan gaya pada elemen itu sendiri.

Fitur gambar tambahan seperti teks dapat diimplementasikan dengan HTML standar (misalnya figure dan figcaption).

Atribut

src

Atribut ini mirip dengan atribut src pada tag img. Nilainya harus berupa URL yang mengarah ke file gambar yang dapat disimpan di cache secara publik. Penyedia cache dapat menulis ulang URL ini saat menyerap file AMP agar mengarah ke versi gambar yang disimpan di cache.

srcset

Sama seperti atribut srcset pada tag img. Untuk browser yang tidak mendukung srcset, <amp-img> akan didefaultkan ke penggunaan src. Jika hanya srcset dan tidak ada src yang disediakan, URL pertama dalam srcset akan dipilih.

sizes

Sama seperti atribut sizes pada tag img.

alt

String teks alternatif, mirip dengan atribut alt pada img.

attribution

String yang menunjukkan atribusi gambar. Misalnya, attribution="CC courtesy of Cats on Flicker"

height dan width

Ukuran eksplisit gambar, yang digunakan oleh AMP runtime untuk menentukan rasio tinggi lebar tanpa mengambil gambar.

atribut umum

Elemen ini mencakup atribut umum yang diperluas ke komponen AMP.

Penataan gaya

amp-img dapat diberi gaya langsung melalui properti CSS. Sebagai contoh, penetapan placeholder latar belakang abu-abu dapat dicapai melalui:

amp-img {
  background-color: grey;
  }

Tips & Trik

Menskalakan gambar hingga lebar maksimum

Jika Anda ingin gambar diskalakan saat ukuran jendela berubah, tetapi hingga lebar maksimum (sehingga gambar tidak terentang melampaui lebarnya):

1. Tetapkan layout=responsive untuk <amp-img>.
2. Pada container gambar, tentukan atribut CSS max-width:<max width to display image>. Mengapa di container? Elemen amp-img dengan layout=responsive merupakan elemen level blok, sedangkan <img> merupakan inline. Cara lainnya, Anda dapat menetapkan display: inline-block dalam CSS untuk elemen amp-img.

Perbedaan antara tata letak responsive dan intrinsic

Baik tata letak responsive maupun intrinsic menghasilkan gambar yang akan diskalakan secara otomatis. Perbedaan utamanya adalah tata letak intrinsic menggunakan gambar SVG sebagai elemen penskalaannya. Hal ini menjadikannya berperilaku sama seperti gambar HTML standar sembari mempertahankan manfaat browser yang mengetahui ukuran gambar pada tata letak awal. Tata letak intrinsic akan memiliki ukuran intrinsik dan akan memperbesar div mengambang sampai mencapai ukuran gambar yang natural atau mencapai batasan CSS seperti max-width. Tata letak responsive akan merender 0x0 dalam div mengambang karena ukurannya berasal dari induk, yang tidak memiliki ukuran natural saat mengambang.

Menetapkan gambar berukuran tetap

Jika Anda ingin gambar ditampilkan dalam ukuran tetap:

1. Tetapkan layout=fixed untuk <amp-img>.
2. Tentukan width dan height.

Menetapkan rasio tinggi lebar

Untuk gambar responsif, width dan height tidak harus sama persis dengan lebar dan tinggi amp-img; yang penting nilai tersebut menghasilkan rasio tinggi lebar yang sama.

Misalnya, bukannya menetapkan width="900" dan height="675", Anda cukup menetapkan width="1.33" dan height="1".

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

Menetapkan beberapa file sumber untuk resolusi layar yang berbeda

Atribut srcset digunakan untuk memberikan resolusi berbeda dari gambar yang sama, yang semuanya memiliki rasio tinggi lebar yang sama. Browser akan otomatis memilih file yang paling sesuai dari srcset berdasarkan resolusi layar dan lebar perangkat pengguna.

Sebaliknya, atribut media menampilkan atau menyembunyikan komponen AMP, dan digunakan saat mendesain tata letak responsif. Cara yang tepat untuk menampilkan gambar dengan rasio tinggi lebar yang berbeda-beda adalah dengan menggunakan beberapa komponen <amp-img>, yang masing-masing memiliki atribut media yang cocok dengan lebar layar tempat setiap instance akan ditampilkan.

Lihat panduan cara membuat halaman AMP yang responsif untuk penjelasan selengkapnya.

Mempertahankan rasio tinggi lebar untuk gambar dengan dimensi yang tidak diketahui

Sistem tata letak AMP memerlukan rasio tinggi lebar gambar sebelum mengambil gambar; namun, dalam beberapa kasus, dimensi gambar mungkin tidak diketahui. Untuk menampilkan gambar dengan dimensi yang tidak diketahui dan mempertahankan rasio tinggi lebar, kombinasikan tata letak fill AMP dengan properti CSS object-fit. Untuk informasi selengkapnya, lihat Cara mendukung gambar dengan dimensi yang tidak diketahui di AMP By Example.

Validasi

Lihat aturan amp-img dalam spesifikasi validator AMP.