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
<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.
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
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
<amp-img alt=""
width="833"
height="500"
layout="responsive"
src="/media/images/car.jpg">
</amp-img>
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.
<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 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
<amp-img src="/media/images/cat.jpg"
width="320" height="200"
layout="responsive"
sizes="(min-width: 320px) 320px, 100vw">
</amp-img>
alt
adalah attribute yang menunjukkan alternate text, yaitu teks yang menunjukkan alternatif atau pengganti gambar yang tidak bisa ditampikan (sumber tidak tersedia atau dihapus).
<amp-img alt="Funny Mouse"
width="833"
height="500"
layout="responsive"
src="/media/images/mouse.jpg">
</amp-img>
Menunjukkan atribusi terhadap gambar yang kita publikasikan, karena mungkin gambar tersebut bersumber dari orang lain.
<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
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.
<amp-img src="/media/images/banana.jpg"
width="320"
height="200"
layout="fixed">
</amp-img>
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
<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.
<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.
<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.
amp-img {
border: 2px solid #ccc;
border-radius: 50%;
}
Jika halaman web Anda menggunakan HTML Biasa (Non-AMP), maka Anda harus menggunakan HTML <img> tag sebagai ganti <amp-img> tag
SHARE