Bagi Anda yang sudah menggunakan template AMP pada blog, tentu selalu ingin agar semua halaman blognya valid AMP, termasuk ketika menambahkan gambar baru pada sebuah postingan.
Untuk memposting atau memasukkan gambar pada blog yang menggunakan template AMP, sebenarnya caranya masih sama seperti ketika Anda memasukkan gambar ke dalam postingan blog Non AMP.
Hanya saja Anda perlu memodifikasi kode HTML untuk image atau gambar agar valid AMP, jika tidak maka ketika di lakukan pengujian AMP hasilnya akan ada error seperti gambar di bawah ini:
Untuk membuat gambar valid AMP, Anda harus mengubah tag img menjadi amp-img untuk itu Anda harus berpindah tampilan pada Editor Postingan blog dari mode Compose ke mode HTML terlebih dahulu.
Misalnya saja kode HTML untuk gambarnya seperti berikut ini:
Perhatikan kode HTML di atas, yang di blok warna hijau saja yang akan digunakan, dengan penambahan tag amp-img sehingga hasil modifikasi akhirnya menjadi seperti berikut ini:
Dengan menggunakan tag amp-img ini maka gambar-gambar pada postingan blog akan menjadi valid AMP.
Untuk memposting atau memasukkan gambar pada blog yang menggunakan template AMP, sebenarnya caranya masih sama seperti ketika Anda memasukkan gambar ke dalam postingan blog Non AMP.
Hanya saja Anda perlu memodifikasi kode HTML untuk image atau gambar agar valid AMP, jika tidak maka ketika di lakukan pengujian AMP hasilnya akan ada error seperti gambar di bawah ini:
Untuk membuat gambar valid AMP, Anda harus mengubah tag img menjadi amp-img untuk itu Anda harus berpindah tampilan pada Editor Postingan blog dari mode Compose ke mode HTML terlebih dahulu.
Misalnya saja kode HTML untuk gambarnya seperti berikut ini:
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeiCGampk6uW4V8H3qJYfCuHEVGwexZLBLKmbl3WucL-YMr4dSLB35_NUambj5eQ9GMOKr3Qg5zfdhhxJ2f8noD5qIetsiBBb4LTCEDUpiWE7YutJO9Kf5eZ7uQSzNaC9CLy8Xc92GflZ9/s1600/image-valid-amp.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img
alt="Posting Gambar Valid AMP"
border="0"
data-original-height="163"
data-original-width="600"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeiCGampk6uW4V8H3qJYfCuHEVGwexZLBLKmbl3WucL-YMr4dSLB35_NUambj5eQ9GMOKr3Qg5zfdhhxJ2f8noD5qIetsiBBb4LTCEDUpiWE7YutJO9Kf5eZ7uQSzNaC9CLy8Xc92GflZ9/s1600/image-valid-amp.jpg"
title="Posting Gambar Valid AMP" />
</a></div>
Perhatikan kode HTML di atas, yang di blok warna hijau saja yang akan digunakan, dengan penambahan tag amp-img sehingga hasil modifikasi akhirnya menjadi seperti berikut ini:
<amp-img
alt="Posting Gambar Valid AMP"
layout="responsive"
height="163"
width="600"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeiCGampk6uW4V8H3qJYfCuHEVGwexZLBLKmbl3WucL-YMr4dSLB35_NUambj5eQ9GMOKr3Qg5zfdhhxJ2f8noD5qIetsiBBb4LTCEDUpiWE7YutJO9Kf5eZ7uQSzNaC9CLy8Xc92GflZ9/s1600/image-valid-amp.jpg"
title="Posting Gambar Valid AMP" >
</amp-img>
Dengan menggunakan tag amp-img ini maka gambar-gambar pada postingan blog akan menjadi valid AMP.