Gambar responsif dengan srcset, ukuran, & tinggi

srcset

Gunakan atribut srcset untuk mengontrol aset elemen berdasarkan berbagai ekspresi media. Secara khusus, gunakan ini untuk semua tag amp-img guna menentukan aset gambar mana yang akan digunakan berdasarkan berbagai ukuran layar. AMP akan membuat atribut sizes secara otomatis, yang memenuhi definisi sizes HTML5, untuk semua tag <img> yang mendasari <amp-img> jika <amp-img> memiliki atribut srcset, tetapi tidak memiliki sizes.

Dalam contoh sederhana ini, srcset menentukan gambar yang akan digunakan berdasarkan lebar layar. Deskriptor w memberi tahu browser tentang lebar setiap gambar di dalam daftar:

<amp-img
  alt="Hummingbird"
  src="/static/inline-examples/images/hummingbird-wide.jpg"
  width="640"
  height="457"
  layout="responsive"
  srcset="/static/inline-examples/images/hummingbird-wide.jpg 640w,
            /static/inline-examples/images/hummingbird-narrow.jpg 320w"
>
</amp-img>

Pelajari lebih lanjut tentang cara membuat gambar responsif dengan menggunakan srcset dalam Menggunakan Gambar Responsif (Sekarang).

sizes

Anda juga dapat menggunakan atribut sizes (ukuran) AMP opsional bersama srcset. Atribut sizes AMP menjelaskan cara menghitung ukuran elemen berdasarkan ekspresi media apa pun. Menentukan sizes pada Elemen AMP apa pun akan menyebabkan AMP menetapkan gaya inline untuk lebar pada elemen tersebut sesuai dengan kueri media yang cocok. Berdasarkan ukuran elemen yang dihitung, agen pengguna memilih sumber paling relatif yang diberikan oleh atribut srcset.

Pertimbangkan contoh berikut ini:

<amp-img
  alt="Hummingbird"
  src="/static/inline-examples/images/hummingbird-wide.jpg"
  width="640"
  height="457"
  srcset="/static/inline-examples/images/hummingbird-wide.jpg 640w,
            /static/inline-examples/images/hummingbird-narrow.jpg 320w"
  sizes="(min-width: 650px) 50vw, 100vw"
>
</amp-img>

Atribut sizes menentukan lebar elemen menjadi 50% dari ukuran viewport jika viewport berukuran 650px atau lebih. Contoh, jika viewport berukuran 800px, lebar elemen diatur pada 400px. Kemudian, browser akan memilih sumber daya srcset yang relatif dengan 400px, dengan asumsi bahwa rasio piksel perangkat adalah 1, yang dalam kasus ini adalah hummingbird-narrow.jpg (320px).

Baca lebih lanjut tentang atribut sizes AMP di sini.

heights

Semua elemen kustom AMP yang memungkinkan tata letak responsive, juga mendukung atribut heights (tinggi). Nilai atribut ini adalah ekspresi ukuran berdasarkan ekspresi media yang serupa dengan atribut ukuran img, tetapi dengan dua perbedaan utama:

1. Berlaku pada tinggi, bukan pada lebar elemen.
2. Nilai dalam bentuk persen diizinkan, misalnya: 86%. Jika nilai dalam bentuk persen digunakan, nilai akan menunjukkan persentase lebar elemen.

Jika atribut heights ditentukan beserta width dan height, layout distandarkan pada responsive.

Contoh:

<amp-img
  alt="AMP"
  src="/static/inline-examples/images/amp.jpg"
  width="320"
  height="256"
  heights="(min-width:500px) 200px, 80%"
>
</amp-img>

Dalam contoh ini, standar tinggi elemen adalah 80% dari lebar, namun untuk viewport yang lebih lebar dari 500px, akan dibatasi pada 200px.

• Written by @pbakaus
  with contributions from @bpaduch