Menerapkan AMP IMG di Blogger

AMP IMG - Blogger

Daftar isi:

Tag <img>
Script & CSS AMP

Penerapan AMP di postingan :

Contoh tag AMP
Mengatur image postingan
Praktik
Ukuran image post Blogger
Ukuran Gambar ideal
Perbandingan ukuran image post

Tag image `<amp img>`

Untuk memasang AMP IMG dipostingan caranya adalah mengganti tag image Non AMP nya :

Ganti tag <img>

<img alt='' src='/img/b/xxx/image.jpg' />

dengan tag AMP img seperti ini :

<amp-img alt='' src='/img/b/xxx/image.jpg'></amp-img>

Pasang script AMP

Tag AMP img hanya akan berfungsi dihalaman non AMP dengan menambahkan script berikut ini di dalam template HTML diantara tag <head> dan </head> :

Script AMP

CSS amp-boilerplate

Setelah scriptnya terpasang, copy kode dibawah ini kemudian letakkan diatas kode </head> dan simpan.
Apabila tidak bisa, masuk ke Tata Letak dan paste dalam widget HTML/Javascript.

<style amp-boilerplate>
-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;
-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;
-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;
animation:-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}
</style>
</noscript>

Menerapkan AMP IMG di kerangka postingan

Contoh tag <amp-img>

<amp-img
alt="apple"
src="/static/inline-examples/images/apple.jpg"
height="596"
width="900"
srcset="/static/inline-examples/images/apple-900.jpg 900w,
/static/inline-examples/images/apple-500.jpg 500w,
/static/inline-examples/images/apple-400.jpg 400w"
sizes="(max-width: 400px) 100vw,
(max-width: 900px) 75vw, 600px"></amp-img>

Ribet ???...
Iya, karna harus menyediakan beberapa ukuran image dengan ukuran yang berbeda untuk 1 elemen gambar hanya untuk menyesuaikan tampilannya di beberapa media.
Tapi cara inilah salah satu metode pengaturan gambar yang direkomendasikan sendiri oleh ^Google melalui Pagespeed insight nya.
Namun jika diteliti kembali terkait kecepatan muat halaman, apabila dalam 1 halaman:

Hanya menggunakan 1 file gambar saja,

tapi dengan ukuran ^{(width & height)} dan besar file ^(kilobyte) yang sama,

dan hanya untuk tampil di beberapa ukuran media yang berbeda...

hal tersebut akan mempunyai kendala sendiri.
Seperti misalnya pada saat kita mencoba memperbesar ^(Zoom) suatu gambar yang kecil ^(pixel) dilayar yang lebar, hasilnya akan terlihat kabur. Dan begitupun sebaliknya, jika gambar besar ditampilkan pada layar kecil maka hanya bagian yang seukuran layar saja yang akan terlihat.
Kan bisa dijadikan responsive dengan css img{width:100%} misalnya ?
Jawabanya benar, secara visual memang bisa. Tapi sekali lagi, Pagespeed Insight memiliki aturannya sendiri dalam memberikan score kecepatan ^(Loading) halaman. Yaitu ukuran besar file ^(kiloByte) tetap akan dinilai tidak seimbang pada ukuran layar ^(Resolusi) tertentu meskipun visualnya sudah fit dengan berbagai ukuran layar ^{(Media query)}.
Untuk itu berikut ini tips dan cara memasang AMP IMG di ^Blogger dalam kerangka postingan Blogspot.

Mengatur Ukuran image Post

Untuk mengatur ukuran image di Blogger, kita bisa memanfaatkan opsi Tata Letak yang akan muncul disetiap kita mengupload gambar seperti disamping ini.
Dari jumlah opsi ukurannya terdapat kecil, sedang, besar, sangat besar dan ukuran asli (5 opsi ukuran).
Maka secara otomatis kita bisa memanfaatkan dengan mudah opsi tersebut untuk menyediakan beberapa image size nya.

Praktik

Copy URL gambar

Sisipkan gambar
Opsi sisipkan Gambar

Upload gambar dengan ukuran yang ideal dipostingan. Lihat ukuran gambar ideal
Utamakan untuk mengupload gambar baru atau gunakan gambar yang sebelumnya sudah ada di Blogger.
Pilih ukuran asli biasanya pada URLnya terdapat kode s1600, seperti yang ditandai dengan huruf tebal dalam kode contoh dibawah ini.
Sisipan element gambar sudah muncul akan terlihat seperti ini :

Perhatikan dahulu URL gambar diatas dengan teks warna merah. Jika sudah paham, ambil baris baru tepat dibawah tag </div> yang ada tepat diakhir elemen gambar tersebut.
Lalu copy tag amp-img ini dan paste pada baris baru tepat dibawah elemen gambar yang disisipkan tadi :

<amp-img alt='Judul Gambar'
width='Panjang'
height='Tinggi'
src='URL-gambar asli'
srcset='URL-gambar/s200 200w,
URL-gambar/s320 320w,
URL-gambar/s400 400w,'
sizes='(max-width: 400px)100vw,(max-width:900px)90vw,640px'>
< !-- elemen img dalam tag noscript ini untuk dirender sebagai Thumbnail ataupun Featured image.-->
<noscript>
<img alt='' width='' height='' src=''/>
</noscript>
</amp-img>

Jika sudah, copy URL gambar yang sebelumnya disipkan, paste diarea yang sudah dijelaskan pada kode tag amp-img diatas.
Jumlah paste URL gambar sebanyak 4x, dalam kode src='' 1x dan srcset='' sebanyak 3x.
Pastikan posisi koma dibelakang URL untuk kode srcset='' tidak terhapus.
Apabila sudah selesai mengisi setiap kodenya, hapus elemen gambar yang disisipkan tadi dan Simpan atau Terbitkan postingan
TIPS agar tag amp-img otomatis muncul setiap kerangka postingan baru:
Copy tag amp-img diatas lalu simpan di Template Entry pada Setelan Blogger. Agar setiap kali membuat postingan baru, template image AMP tersebut sudah tersedia dan tinggal disesuaikan saja.

Ukuran image Post Blogger

Nilai size tiap opsi yang disediakan bisa dilihat di url gambar yang sudah diupload seperti ini :

src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/CCTynvIZMA-hnQOZaPoQ4Zmb-004gPIAXjfHkcZ_-DqgznsgmuOPUlZkq6GC1cSQ/s320/post-img.webp"

Berikut ini ukuran standartnya s200, s = SIZES:

/s200/ : 200px
/s320/ : 320px
/s400/ : 400px
/s640/ : 640px
/s1600/ : max-width

Tips :

Ukuran gambar ideal

Ukuran image ideal untuk blog yang ringan dan cukup kompatibel dengan tampilan berbagi ^Share dibeberapa media sosial misal ^Facebook atau ^Twitter adalah :
width: 640px; height: 320px
Jadi cukup sediakan 1 gambar utama untuk diupload dengan ukuran tersebut.
Yang nantinya nilai s di-URL-nya bisa kita custom sendiri tanpa harus mengupload gambar berulang untuk masing-masing ukuran.

Postingan terkait : Dimensi gambar ideal untuk postingan blog

Perbandingan Ukuran image Post Blogger

s200 s320 s400 s640