Seperti halnya pada halaman HTML normal, AMP memungkinkan Anda menyematkan konten gambar, video dan audio Isi. Pelajari perbedaan mengenai fitur yang setara dengan AMP dan pelajari cara menyertakannya di halaman Anda.

Mengapa bukan <img>, <video> dan <audio>?

AMP tidak mendukung pasangan HTML default untuk menampilkan media, seperti <img>. Kami memberikan komponen dengan nilai yang sama karena alasan berikut:

Gambar

Sertakan gambar pada halaman Anda menggunakan elemen amp-img, seperti berikut:

Show full code

Pada sebagian besar contoh dasar ini, gambar akan ditampilkan dengan lebar dan tinggi tetap yang telah ditentukan. Setidaknya, lebar dan tinggi minimum secara eksplisit perlu ditetapkan.

Menampilkan gambar saat JavaScript dinonaktifkan

Karena <amp-img> bergantung pada JavaScript, jika pengguna memilih menonaktifkan skrip, gambar tidak akan ditampilkan. Dalam hal ini, Anda harus memberikan penggantian pada gambar menggunakan <img> dan <noscript>, seperti berikut:

Show full code

Tata letak lanjutan

Dibandingkan CSS/HTML standar, AMP memudahkan pembuatan gambar yang benar-benar responsif. Pada sebagian besar bentuk dasarnya, Anda hanya perlu menambahkan layout="responsive":

Show full code

Perilaku dan placeholder

Waktu proses HTML AMP dapat mengelola konten gambar secara efektif, dengan memilih antara pemuatan konten yang diprioritaskan atau yang mengalami penundaan berdasarkan pada posisi viewport, sumber daya sistem, bandwidth koneksi, atau faktor lainnya.

Gambar animasi

Elemen amp-anim sangat mirip dengan elemen amp-img, kedua elemen ini memberikan fungsi tambahan untuk mengelola pemuatan dan pemutaran gambar animasi seperti GIF.

Show full code

Video

Sertakan video di halaman Anda menggunakan elemen amp-video .

Hanya gunakan elemen ini untuk file video HTML5 langsung yang disematkan. Elemen akan memuat konten video yang ditetapkan oleh atribut src secara perlahan, pada waktu yang telah ditentukan oleh AMP.

Sertakan placeholder sebelum video dimulai, dan penggantian, jika browser tidak mendukung video HTML5, misalnya:

Show full code

Audio

Sertakan konten audio pada halaman Anda, menggunakan elemen amp-audio .

Hanya gunakan elemen ini untuk file audio HTML5 langsung yang disematkan. Seperti halnya semua konten eksternal yang disematkan pada halaman AMP, elemen tersebut akan memuat konten audio yang telah ditetapkan oleh atribut src secara perlahan, pada waktu yang telah ditentukan oleh AMP.

Sertakan placeholder sebelum audio dimulai, dan penggantian, jika browser tidak mendukung audio HTML5, misalnya:

Show full code