amp-img

Tutorial on how to add correct images on AMP pages to pass validation

Perbedaan paling mendasar dari versi AMP dan non-AMP adalah penulisan kode gambar yang menggunakan tag khusus <amp-img>.

Untuk lolos validasi, pastikan semua tag gambar <img> dalam postingan Anda sudah diganti dengan <amp-img>. Contoh penulisan gambar yang benar pada AMP:

<div>
  <amp-img alt='image_title_here' src='image_url_here' width='xxx' layout='intrinsic' height='xxx'/>
</div>

Penulisan atribut width dan height bersifat wajib agar aspek rasio diketahui tanpa mengubah ukuran asli gambar.

Beberapa pilihan layout yang didukung antara lain: fill, fixed, fixed-height, flex-item, intrinsic, nodisplay, dan responsive. Layout yang paling umum digunakan adalah responsive dan intrinsic, selain lebih mudah, gambar yang ditampilkan juga menyesuaikan dengan ukuran layar.

Baca referensi lengkap tentang amp-img.

Pentingnya Menggunakan Tag <noscript>

Kegunaan dasar dari tag ini adalah untuk menampilkan konten apabila javascript dinonaktifkan pada browser pengguna.

Pada kasus Blogger, tag ini diperlukan untuk menampilkan gambar thumbnail artikel pada halaman beranda atau pada widget lainnya seperti PopularPosts atau FeaturedPost, contoh:

<div>
  <amp-img alt='image_title_here' src='image_url_here' width='xxx' layout='intrinsic' height='xxx'/>
  <noscript><img alt='image_title_here' src='image_url_here'/></noscript>
</div>

The most basic difference between AMP and non-AMP versions is the writing of image code that uses <amp-img> tag.

To pass validation, make sure all <img> image tags in your posts have been replaced with <amp-img>. Example of correct image writing in AMP:

<div>
  <amp-img alt='image_title_here' src='image_url_here' width='xxx' layout='intrinsic' height='xxx'/>
</div>

The width and height attributes is mandatory so that the aspect ratio is known without changing the original image size.

Several layout options are supported, including: fill, fixed, fixed-height, flex-item, intrinsic, nodisplay, and responsive. The most commonly used layouts are responsive and intrinsic, besides being easier, the images displayed also adjust to the screen size.

Read the complete reference of amp-img.

The Importance of Using <noscript> Tags

The basic usage of this tag is to display content when javascript is disabled in the user's browser.

In the Blogger case, this tag is required to display thumbnail of articles on home page or in other widgets such as PopularPosts or FeaturedPost, for example:

<div>
  <amp-img alt='image_title_here' src='image_url_here' width='xxx' layout='intrinsic' height='xxx'/>
  <noscript><img alt='image_title_here' src='image_url_here'/></noscript>
</div>