amp-img (Image) - Cara Menyisipkan Gambar AMP HTML

amp-img digunakan untuk menyisipkan gambar pada halaman AMP HTML. <amp-img> merupakan tag pengganti dari HTML <img> yang biasa digunakan pada halaman HTML biasa.


Quick Example
Contoh

SOURCE
<amp-img alt=""
  width="833"
  height="500"
  layout="responsive"
  src="/media/images/apple.jpg">
</amp-img>

layout="responsive" menunjukkan bahwa image (gambar) pada amp-img element tersebut akan mengikuti ukuran layar (browser), oleh karenanya dikenal dengan istilah "responsive"; ukuran gambar menyesuaikan layar ketika diperbesar atau diperkecil.

layout attribute memiliki value (nilai) lain: fill, fixed, fixed-height, flex-item, nodisplay, atau responsive. Mengenai hal ini akan dibahas secara khusus pada artikel terpisah.


Description
Penjelasan/Definisi

amp-img adalah sebuah komponen atau tag pada AMP HTML yang digunakan untuk menampilkan gambar. Pada AMP, tag <amp-img> memiliki tag penutup </amp-img> dan harus ditulis secara eksplisit.

<amp-img>...</amp-img> merupakan tag pengganti HTML <img />. Oleh karenanya, kita tidak bisa menggunakan HTML <img /> pada halaman AMP.

Perlu Diketahui

amp-img merupakan elemen level blok (block-level element) tidak seperti HTML img tag yang masuk kategori inline element.


Setup
Cara Penggunaan

Secara default amp-img dapat digunakan langsung pada halaman AMP yang valid tanpa tambahan script khusus seperti komponen AMP pada umumnya.


Attributes

src Attribute

src menunjukkan source atau "sumber" yang merujuk pada URL gambar disimpan (berada).

Pada contoh dibawah ini, src merujuk pada sumber gambar (URL) yang saya simpan pada sebuah direktori lain.

Contoh

SOURCE
<amp-img alt=""
  width="833"
  height="500"
  layout="responsive"
  src="/media/images/car.jpg">
</amp-img>
srcset Attribute

srcset digunakan untuk mereferensikan sumber gambar yang berbeda-beda berdasarkan ukuran layar dan pixel density. Attribute ini, sama dengan srcset pada attribute img tag di HTML biasa.

Perhatikan contoh dibawah ini dan coba utuk memperbesar dan memperkecil ukuran layar browser yang digunakan. Gambar akan berubah berdasarkan ukuran layar.

SOURCE
<amp-img src="/media/images/orange.jpg"
  srcset="
    /media/images/orange.jpg 1200w,
    /media/images/grape.jpg 992w,
    /media/images/apple.jpg 768w"
  width="750"
  height="500"
  layout="responsive"
  alt="nice fruits">
</amp-img>
sizes Attribute

sizes attribute sama dengan size atribut pada HTML <img> tag biasa, akan tetapi sizes pada AMP dapat digunakan pada semua element. sizes atribut dapat digunakan pada semua AMP elemen yang support (mendukung) layout="responsive".

Example

SOURCE
<amp-img src="/media/images/cat.jpg"
  width="320" height="200"
  layout="responsive"
  sizes="(min-width: 320px) 320px, 100vw">
</amp-img>
alt Attribute

alt adalah attribute yang menunjukkan alternate text, yaitu teks yang menunjukkan alternatif atau pengganti gambar yang tidak bisa ditampikan (sumber tidak tersedia atau dihapus).

SOURCE
<amp-img alt="Funny Mouse"
  width="833"
  height="500"
  layout="responsive"
  src="/media/images/mouse.jpg">
</amp-img>
attribution Attribute

Menunjukkan atribusi terhadap gambar yang kita publikasikan, karena mungkin gambar tersebut bersumber dari orang lain.

SOURCE
<amp-img
  alt=""
  layout="fixed"
  width="200"
  height="200"
  tabindex="0"
  attribution="originally from wikimedia.org - public domain license"
  src="/media/images/clock.gif">
</amp-img>
height dan width Attribute

height dan width digunakan untuk menentukkan tinggi dan lebar sebuah gambar. Jika menggunakan layout="fixed" maka gambar akan sesuai dengan height dan width yang kita tentukan, tetapi jika menggunkan layout="responsive" akan mempertahankan aspek rasio dari dari ukuran gambar tersebut.

SOURCE
<amp-img src="/media/images/banana.jpg"
  width="320"
  height="200"
  layout="fixed">
</amp-img>
Common attributes

Common Attributes adalah beberapa attribute umum yang biasa digunakan dan berlaku untuk beberapa element AMP adalah: fallback, heights, layout, media, noloading, on, placeholder, sizes, width, and height

Untuk lebih jelasnya, bisa dilihat pada halaman AMP HTML Common attributes


Example
Contoh amp-img

Beberapa contoh yang yang dapat dipelajari dan digunakan.

Example 1
Contoh amp-img Responsive Image

SOURCE
<amp-img alt=""
  width="833"
  height="500"
  layout="responsive"
  src="/media/images/camel.jpg">
</amp-img>

Example 2
Contoh amp-img dengan noscript tag

Pada contoh dibawah ini, noscript element digunakan untuk menampilkan alternatif gambar lain apabila script (javascript) dinon-aktifkan pada konfigurasi browser oleh user tertentu. Karena tidak menggunakan javascript, maka digunakan HTML <img /> biasa.

INPUT
<amp-img alt=""
  layout="responsive"
  width="833"
  height="500"
  src="/media/images/grape.jpg">
  <noscript>
    <img src="/media/images/grape.jpg" alt="" />
  </noscript>
</amp-img>

Example 3
Contoh amp-img dengan fallback Image

Attribute fallback digunakan pada kondisi apabila gambar tidak bisa ditampilkan, maka fallback konten akan tampil sebagai gantinya. Biasanya digunakan untuk menampilkan teks pengganti yang menunjukkan offline atau user tidak terkoneksi dengan internet.

INPUT
<amp-anim src="/media/images/clock.webp"
  width="580"
  height="580"
  layout="responsive" >
  <div fallback>
    Cannot play animated images - Gambar animasi GIF tidak bisa ditampilkan.
  </div>
</amp-anim>

Cara Memberi Style (CSS)

amp-img dapat diberi style (CSS) seperti tag HTML pada umumnya dengan menggunakan property amp-img. Berikut contoh memberi efek border dan border-radius pada gambar dalam halaman AMP.

SOURCE
amp-img {
  border: 2px solid #ccc;
  border-radius: 50%;
}

INFO

Jika halaman web Anda menggunakan HTML Biasa (Non-AMP), maka Anda harus menggunakan HTML <img> tag sebagai ganti <amp-img> tag

Additional Information and Resources

SHARE