Untuk memasang atau memasukan gambar dalam Blog non AMP umumnya kita pribadi bisa memakai & bisa langsung mengatur lebar & tingginya sesuai impian pada ketika pertama kali diunggah.
Namun, ini akan sangat tidak sinkron jika pada blog AMP. Buat blog AMP sendiri kita tidak bisa langsung menggunakan gambar yang diunggah tersebut. Dikarenakan gambar yang diunggah tadi mengandung CSS yg tidak boleh pada campur adukan didalam HTML.
Jadi pada dasarnya yaitu dalam waktu kita mengunggah gambar, kita hanya memerlukan URL gambar tadi.
Artikel sebelumnya saya juga membahas Cara Upload Gambar di Blogger Agar Postingan Super Ringan. Tentu akan sangat bermanfaat bagi anda yang ingin mempercepat blog anda.
Maka dari itu, jangan sampai anda salah dalam memasang kode image pada saat memposting sebuah artikel, karena jika salah dalam menggunakan kode image nantinya akan menyebabkan eror dan poatingan tidak akan Valid AMP.
Sebagai contoh untuk kode dasar image yang diunggah pertama kali di blogger pada umumnya adalah seperti ini:
<a href="url-image-jpg" imageanchor="1" ><img border="0" src="gambar-jpg" width="320" height="320" data-original-width="480" data-original-height="480" /></a>
Nah, kode gambar seperti diatas tidak Valid AMP HTML dan jikalau tidak valid AMP, maka otomatis artikel yang anda posting juga akan valid AMP. dan pastinya postingan yang terindex di google juga tidak akan ada Logo AMP saat dipencarian google.
Dan kode dasar image Yang valid AMP adalah seperti dibawah ini yang nantinya menggantikan kode dasar yang asli dari blogger saat pertama diunggah.
<img alt='Title-Image' src='url-image-jpg'/>
Perlu diketahui, postingan gambar pada blogger dibagi menjadi 2 jenis, yaitu gambar Thumbnail Firstimage (Gambar utama) dan Gambar tambahan (Gambar pelangkap artikel) Kedua jenis gambar diatas mempunyai kode yang berbeda dalam template berbasiskan AMP.
Oleh karena itu anda harus memperhatikan hal tersebut. untuk lebih jelasnya kode gambar Valid AMP anda bisa simak dibawah ini.
Gambar Thumbnail (First image)
Gambar thumbnail adalah gambar yang menjadi gambar utama pada sebuah postingan. gambar ini akan berada paling depan atau diatas artikel serta gambar ini akan menjadi gambar utama yang akan muncul dihalaman utama atau homepage pada sebuah blog.
Untuk dapat memunculkan thumbnail postingan pada template berbasis AMP, maka gunakan kode berikut ini dimode HTML postingan bukan Compose
<noscript><img src="https-gambar-jpg" width="650" height="350" alt="Title-gambar"/></noscript>
Keterangan :
Ganti https-gambar-jpg dengan URL gambar yang ingin anda jadikan sebagai gambar utama. Title-gambar ganti dengan title sesuai pnahasan artikel yang anda buat. width 650 lebar gambar dan height tinggi gambar.
Gambar Pelengkap Post
Gambar ini merupakan sebuah gambar pelengkap artikel. yang mana gambar ini hanya untuk pelengkap artikel agar pengunjung atau si pembaca lebih mudah memahami isi dari konten anda, gambar ini tidak muncul di halaman utama atau Homepage. berikut kode Image pelengkap artikel Valid AMP.
Image Responsif
<amp-img alt="Tutorial Komputer" height="250" layout="responsive" src="https-url-jpg" tabindex="0" width="450"></amp-img>
Image Fixed
<center> <amp-img alt="Tutorial Android" height="780" layout="fixed" src="https-url-jpg" tabindex="0" width="340"></amp-img> </center>
Keterangan :
Silahkan anda sesuaikan ukuran tinggi dan lebar sesuai ukuran gambar yang anda unggah agar gambar lebih rapi dan sesuai. khususnya untuk image fixed dikarenakn image fixed sifatnya mengikuti ukuran yang anda tentukan. untuk image responsif lebar tidak dapat diubah hanya tinggi saja yang dapat diubah.
Nah itulah Cara Pasang atau Menampilkan Thumbnail Gambar Valid AMP HTML. semoga bermanfaat dan selamat bervalidasi ria.
