Cara Menyisipkan Gambar pada Blog AMP

amp-img AMP HTML

Sebetulnya tutorial Cara Penulisan Gambar / Image pada AMP HTML atau Cara memunculkan Gambar di Blog AMP sudah banyak, akan tetapi sebagai dokumentasi pribadi, karena saya kadang lupa cara penulisannya, maka saya tulis disini.

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiioRDQVuNQja4aQXTY1WIHBmwUbQVXf9vrWh3R8x8lbdl3HGgYS_obtS4397PmGzv3iVPOUjOtko7kaKU_fBep66x1jNk8J2y9WwELQNdx7U_M4fwiwFKQhRUpV3N45Cu0H372j1wT3Dzk/s1600/amp.jpg"
      srcset="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiioRDQVuNQja4aQXTY1WIHBmwUbQVXf9vrWh3R8x8lbdl3HGgYS_obtS4397PmGzv3iVPOUjOtko7kaKU_fBep66x1jNk8J2y9WwELQNdx7U_M4fwiwFKQhRUpV3N45Cu0H372j1wT3Dzk/s1080/amp.jpg 1080w, https://ampbyexample.com/img/amp-900.jpg 900w, https://ampbyexample.com/img/amp-800.jpg 800w,
//https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiioRDQVuNQja4aQXTY1WIHBmwUbQVXf9vrWh3R8x8lbdl3HGgYS_obtS4397PmGzv3iVPOUjOtko7kaKU_fBep66x1jNk8J2y9WwELQNdx7U_M4fwiwFKQhRUpV3N45Cu0H372j1wT3Dzk/s700/amp.jpg 700w, https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiioRDQVuNQja4aQXTY1WIHBmwUbQVXf9vrWh3R8x8lbdl3HGgYS_obtS4397PmGzv3iVPOUjOtko7kaKU_fBep66x1jNk8J2y9WwELQNdx7U_M4fwiwFKQhRUpV3N45Cu0H372j1wT3Dzk/s600/amp.jpg 600w, https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiioRDQVuNQja4aQXTY1WIHBmwUbQVXf9vrWh3R8x8lbdl3HGgYS_obtS4397PmGzv3iVPOUjOtko7kaKU_fBep66x1jNk8J2y9WwELQNdx7U_M4fwiwFKQhRUpV3N45Cu0H372j1wT3Dzk/s500/amp.jpg 500w, https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiioRDQVuNQja4aQXTY1WIHBmwUbQVXf9vrWh3R8x8lbdl3HGgYS_obtS4397PmGzv3iVPOUjOtko7kaKU_fBep66x1jNk8J2y9WwELQNdx7U_M4fwiwFKQhRUpV3N45Cu0H372j1wT3Dzk/s400/amp.jpg 400w,
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiioRDQVuNQja4aQXTY1WIHBmwUbQVXf9vrWh3R8x8lbdl3HGgYS_obtS4397PmGzv3iVPOUjOtko7kaKU_fBep66x1jNk8J2y9WwELQNdx7U_M4fwiwFKQhRUpV3N45Cu0H372j1wT3Dzk/s300/amp.jpg 300w, https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiioRDQVuNQja4aQXTY1WIHBmwUbQVXf9vrWh3R8x8lbdl3HGgYS_obtS4397PmGzv3iVPOUjOtko7kaKU_fBep66x1jNk8J2y9WwELQNdx7U_M4fwiwFKQhRUpV3N45Cu0H372j1wT3Dzk/s200/amp.jpg 200w, https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiioRDQVuNQja4aQXTY1WIHBmwUbQVXf9vrWh3R8x8lbdl3HGgYS_obtS4397PmGzv3iVPOUjOtko7kaKU_fBep66x1jNk8J2y9WwELQNdx7U_M4fwiwFKQhRUpV3N45Cu0H372j1wT3Dzk/s100/amp.jpg 100w"
      width="1080"
      height="610"
      layout="responsive"
      alt="AMP HTML"></amp-img>

Untuk melihat efeknya, silahkan resize browser.