- Perilaku
- Contoh: Menampilkan gambar yang responsif
- Contoh: Menentukan gambar fallback
- Atribut
- Penataan gaya
- Tips & Trik
- Menskalakan gambar hingga lebar maksimum
- Perbedaan antara tata letak responsive dan intrinsic
- Menetapkan gambar berukuran tetap
- Menetapkan rasio tinggi lebar
- Menetapkan beberapa file sumber untuk resolusi layar yang berbeda
- Mempertahankan rasio tinggi lebar untuk gambar dengan dimensi yang tidak diketahui
- Validasi
amp-img
Deskripsi | Penggantian yang dikelola runtime untuk tag img HTML. |
Tata Letak yang Didukung | fill, fixed, fixed-height, flex-item, intrinsic, nodisplay, responsive |
Contoh | Lihat contoh amp-img di AMP By Example. |
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
.
Pelajari lebih lanjut tata letak dalam spesifikasi Sistem Tata Letak HTML AMP dan Tata Letak yang Didukung.
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>
Pelajari tentang halaman AMP responsif dalam panduan Membuat Halaman AMP yang Responsif.
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
).
Pelajari lebih lanjut penggunaan amp-img
dari resource berikut:
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
.
Lihat Gambar responsif dengan srcset, size & height untuk penggunaan sizes
dan srcset
.
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):
- Tetapkan
layout=responsive
untuk<amp-img>
. - Pada container gambar, tentukan atribut CSS
max-width:<max width to display image>
. Mengapa di container? Elemenamp-img
denganlayout=responsive
merupakan elemen level blok, sedangkan<img>
merupakan inline. Cara lainnya, Anda dapat menetapkandisplay: 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:
- Tetapkan
layout=fixed
untuk<amp-img>
. - Tentukan
width
danheight
.
Pelajari tentang inferred layout jika Anda tidak menentukan atribut layout
.
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.
You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.
Go to Stack Overflow Found a bug or missing a feature?The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.
Go to GitHub