Tutorial Cara Penulisan image pada AMP HTML Blogger
amp-img AMP HTML
Untuk image, tidak diperlukan JavaScript khusus, sudah cukup dengan JS AMPHTML secara umum. Ada perbedaan cara penulisan image dari biasanya. Kode untuk image:
<amp-img src="url-image-disini"
width="1080"
height="610"
layout="responsive"
alt="AMP HTML"></amp-img>
Layout yang support:
fill
, fixed
, fixed-height
, flex-item
, nodisplay
, responsive
Gunakan
srcset
untuk menentukan gambar sesuai ukuran layar. Kodenya seperti ini <amp-img src="https://ampbyexample.com/img/amp.jpg"
srcset="https://ampbyexample.com/img/amp.jpg 1080w, https://ampbyexample.com/img/amp-900.jpg 900w, https://ampbyexample.com/img/amp-800.jpg 800w,
https://ampbyexample.com/img/amp-700.jpg 700w, https://ampbyexample.com/img/amp-600.jpg 600w, https://ampbyexample.com/img/amp-500.jpg 500w, https://ampbyexample.com/img/amp-400.jpg 400w,
https://ampbyexample.com/img/amp-300.jpg 300w, https://ampbyexample.com/img/amp-200.jpg 200w, https://ampbyexample.com/img/amp-100.jpg 100w"
width="1080"
height="610"
layout="responsive"
alt="AMP HTML"></amp-img>
Untuk melihat efeknya, silahkan resize browser.
Comments
Post a Comment