amp-img
Tutorial on adding images to pass AMP validation.
The most noticeable difference between AMP and non-AMP versions is the writing of images that use <amp-img> tags. To pass AMP validation, make sure all images in the post use <amp-img>, example the correct <amp-img> writing:
<div> <amp-img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png' width='000' layout='intrinsic' height='000'/> </div>
The width and height attributes are mandatory so that the aspect ratio is known without resizing the original image.
Some supported layout options include: fill, fixed, fixed-height, flex-item, intrinsic, nodisplay, and responsive. The most commonly used layouts are responsive and intrinsic, besides being easier to implement, the image also adapts to the screen size. See the different layouts at external links.
Always use noscript tags
The AMP platform requires Javascript to run, so if users disable Javascript on their browsers, non-AMP pages will be displayed, but the problem is that images with <amp-img> will not be displayed, visitors will only see a blank block on the image.
Because of the above case, a <noscript> tag is needed as a backup if Javascript is disabled, this is the recommendation for writing the correct <amp-img>:
<div> <amp-img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png' width='000' layout='intrinsic' height='000'/> <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript> </div>
Perbedaan yang paling mencolok antara versi AMP dan non-AMP adalah penulisan gambar yang menggunakan tag <amp-img>. Untuk lolos validasi AMP, pastikan semua gambar dalam postingan menggunakan <amp-img>, contoh penulisan <amp-img> yang benar:
<div> <amp-img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png' width='000' layout='intrinsic' height='000'/> </div>
Atribut width dan height wajib diisi agar rasio aspek diketahui tanpa mengubah ukuran gambar asli.
Beberapa opsi tata letak yang didukung termasuk: fill, fixed, fixed-height, flex-item, intrinsic, nodisplay, dan responsive. Tata letak yang paling umum digunakan adalah responsive dan intrinsic, selain lebih mudah diterapkan, gambar juga menyesuaikan dengan ukuran layar. Lihat tata letak yang berbeda di pranala luar.
Selalu gunakan tag noscript
Platform AMP membutuhkan Javascript untuk berjalan, jadi jika pengguna menonaktifkan Javascript pada browser mereka, halaman non-AMP akan ditampilkan, tetapi masalahnya adalah gambar dengan <amp-img> tidak akan ditampilkan, pengunjung hanya akan melihat blok kosong pada gambar.
Karena kasus di atas, diperlukan tag <noscript> sebagai cadangan jika Javascript dinonaktifkan, berikut rekomendasi penulisan <amp-img> yang benar:
<div> <amp-img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png' width='000' layout='intrinsic' height='000'/> <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript> </div>