Cara Posting Gambar Responsive Blog AMP
Gambar yang dipublikasikan pada situs web atau blog selalu memiliki ukuran yang berbeda-beda, antara tinggi (height) dan lebar (width). Agar mampu menyesuaikan degan layar peramban maka perlu dilakukan resizing (pengukuran ulang) juga pada bobot file format yang support berbagai peramban seperti chrome, firefox, opera, safari, dan sebagianya.
Memilih Format Gambar
Ada tiga jenis format gambar (img) yang direkomendasikan oleh google agar mampu dimuat secara ringan juga support berbagai perangkat peramban (browser) serta memiliki kekurangan dan kelebihannya masing-masing.
1. JPEG
Jpeg memiliki kualitas ketajaman yang sangat baik dibandingkan format lainnya, sehingga banyak yang menggunakan ekstensi ini pada berbagai perangkat media, namun bobot filenya yang lebih besar dinilai terlalu berat untuk dimuat pada situs.
2. PNG
Format png paling sering digunakan untuk meringankan kinerja kecepatan situs agar mampu dimuat dengan segera dibandingkan jpeg, selain itu untuk membuat gambar dengan efek layout transparent. Gambar yang dihasilkan cukup jernih dan memangkas bobot file sedikit lebih kecil 20% bila dikonversi dari jpeg.
3. GIF
Gif biasa kita gunakan sebagai animasi gambar bergerak dengan durasi yang pendek. Biasa digunakan untuk alternatif banyak gambar dalam satu tampilan visual seperti video tanpa suara. Bobot kompresi file agak besar kisaran 25% dari png dan cukup merepotkan dalam hal pembuatannya, namun efektif untuk meringkas berbagai gambar dalam satu frame.
4. WEBP
Format webp ini cukup populer digunakan oleh situs besar untuk mempublis gambar secara legal untuk meminimalisir pencurian dari situs. kompresinya sangat banyak memangkas bobot file dari jpeg sekitar 34%, dari png kisaran 45%, dan 19% dari gif. Mulai sekarang google merekomendasikan format ini untuk mepublikasikan gambar dengan support berbagai perangkat untuk dimuat serta lebih ringan.
Mengatur Resolusi Foto
Resolusi pada gambar atau foto direkomendasikan oleh google menurut pedoman adalah 720 piksel untuk tinggi dan lebar bisa menyesuaikan, boleh tinggi 720p x lebar bebas, atau lebar 720 x tinggi bebas, dengan bobot file maksimal adalah 10KB - 5Mb.
Rekomendasi tersebut biasa untuk situs komersil bisnis yang mengharuskan agar gambar menyesuaikan resolusi pada tampilan mesin penelusuran google. Untuk non-komersil bisa menggunkana resolusi dengan batasan piksel kurang dari 3000 piksel.
Memilih Hosting Gambar
File yang diupload secara langsung untuk CMS Blogger secara otomatis akan tersimpan pada https://get.google.com/albumarchive/, namun alangkah lebih baik diupload melalui https://picasa.google.com/ dengan kualitas tinggi secara gratis tanpa batas penyimpanan dan juga terkompresi menjadi ukuran yang lebih ringan. Untuk cara kompresi gambar atau foto kemudian upload ke google baca postingan ini.
Menggunakan CSS Responsive
Style CSS untuk gambar yang akan ditampilkan pada situs perlu diatur agar menyesuaikan dengan resolusi perangkat mobile. Maka pasang kode css Non-AMP berikut pada situs melalui html editor
/* POST IMAGE NON AMP*/
.img-tengah{text-align:center;margin:0 auto;}
.img-kiri{clear:left;float:left;margin-bottom:1em;margin-right:1em;text-align:center;}
.img-kanan{clear:right;float:right;margin-bottom:1em;margin-left:1em;text-align:center;}
.img-width-300,.img-width-400,.img-width-500,.img-width-600{width:100%;text-align:center;clear:both}
.img-width-300{max-width:300px;}
.img-width-400{max-width:400px;}
.img-width-500{max-width:500px;}
.img-width-600{max-width:600px;}
@media screen and (max-width:768px){
.post-body img{max-width:100%}
.img-width-500.img-left,.img-width-500.img-right,.img-width-600.img-left,.img-width-600.img-right{clear:both;float:none;margin:1em auto;text-align:center;}
}
@media screen and (max-width:640px){
.post-body img{max-width:100%}
.img-width-500.img-left,.img-width-500.img-right,.img-width-600.img-left,.img-width-600.img-right{clear:both;float:none;margin:1em auto;text-align:center;}
}
@media screen and (max-width:414px){
.post-body img{max-width:100%}
.img-width-300.img-left,.img-width-300.img-right,.img-width-400.img-left,.img-width-400.img-right{clear:both;float:none;margin:1em auto;text-align:center;}
}
@media screen and (max-width:360px){
.post-body img{max-width:100%}
.img-width-300.img-left,.img-width-300.img-right,.img-width-400.img-left,.img-width-400.img-right{clear:both;float:none;margin:1em auto;text-align:center;}
}
@media screen and (max-width:320px){
.post-body img{max-width:100%}
.img-width-300.img-left,.img-width-300.img-right,.img-width-400.img-left,.img-width-400.img-right{clear:both;float:none;margin:1em auto;text-align:center;}
}
Sedangkan untuk css versi AMP sebagai berikut
/* POST IMAGE AMP */
.img-tengah{text-align:center;margin:0 auto;}
.img-kiri{clear:left;float:left;margin-bottom:1em;margin-right:1em;text-align:center;}
.img-kanan{clear:right;float:right;margin-bottom:1em;margin-left:1em;text-align:center;}
.img-width-300,.img-width-400,.img-width-500,.img-width-600{width:100%;text-align:center;clear:both}
.img-width-300{max-width:300px;}
.img-width-400{max-width:400px;}
.img-width-500{max-width:500px;}
.img-width-600{max-width:600px;}
@media screen and (max-width:768px){
.post-body amp-img{max-width:100%}
.img-width-500.img-left,.img-width-500.img-right,.img-width-600.img-left,.img-width-600.img-right{clear:both;float:none;margin:1em auto;text-align:center;}
}
@media screen and (max-width:640px){
.post-body amp-img{max-width:100%}
.img-width-500.img-left,.img-width-500.img-right,.img-width-600.img-left,.img-width-600.img-right{clear:both;float:none;margin:1em auto;text-align:center;}
}
@media screen and (max-width:414px){
.post-body amp-img{max-width:100%}
.img-width-300.img-left,.img-width-300.img-right,.img-width-400.img-left,.img-width-400.img-right{clear:both;float:none;margin:1em auto;text-align:center;}
}
@media screen and (max-width:360px){
.post-body amp-img{max-width:100%}
.img-width-300.img-left,.img-width-300.img-right,.img-width-400.img-left,.img-width-400.img-right{clear:both;float:none;margin:1em auto;text-align:center;}
}
@media screen and (max-width:320px){
.post-body amp-img{max-width:100%}
.img-width-300.img-left,.img-width-300.img-right,.img-width-400.img-left,.img-width-400.img-right{clear:both;float:none;margin:1em auto;text-align:center;}
}
Cara Posting
Cara posting pada mode html non-AMP gunakan kode berikut
<div class="img-width-400 img-tengah">
<img title="#" alt="#" src="URL" layout="responsive" width="400" height="200" /></img>
<div>
Cara posting pada mode html khusus AMP gunakan kode berikut
<div class="img-width-400 img-tengah">
<amp-img title="#" alt="#" src="URL" layout="responsive" width="400" height="200" /></amp-img>
<div>
Patokan utama untuk menyesuaikan ukuran gambar responsive terhadap layout adalah lebar (width), perhatikan URL gambar yang diupload dari google archieve kemudian sesuaikan dengan css yang digunakan untuk asumsi mendekati ukuran 300, 400, 500, atau 600. Misal, mengambil gambar WEBP dari album archieve dengan ukuran original akan menghasilkan URL berikut
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO5KzUp1l-y1PIzoZW4G7sRYiQ0In40VvBciNn0Wm69pBirNb5wdp5F1C7ziU4-yX7ZRySiIWVVCrDCqbkzQ1Mb-j-1Q7O6owVbTVHnMg91z_cF9fVOBam1KKH5hOffdQULrWVGz30Gps/s1600/contoh-gambar.webp" imageanchor="1">
<img border="0" data-original-height="400" data-original-width="700" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO5KzUp1l-y1PIzoZW4G7sRYiQ0In40VvBciNn0Wm69pBirNb5wdp5F1C7ziU4-yX7ZRySiIWVVCrDCqbkzQ1Mb-j-1Q7O6owVbTVHnMg91z_cF9fVOBam1KKH5hOffdQULrWVGz30Gps/s1600/contoh-gambar.webp" /></a>
Anda cukup menyalin URL tersebut dan mengganti s1600 menyesuaikan lebar asli seperti contoh lengkap berikut
<div class="img-width-600 img-tengah">
<img
title="contoh-gambar"
alt="contoh-gambar"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO5KzUp1l-y1PIzoZW4G7sRYiQ0In40VvBciNn0Wm69pBirNb5wdp5F1C7ziU4-yX7ZRySiIWVVCrDCqbkzQ1Mb-j-1Q7O6owVbTVHnMg91z_cF9fVOBam1KKH5hOffdQULrWVGz30Gps/s700/contoh-gambar.webp"
layout="responsive"
width="700"
height="400" />
</img>
<div>Meskipun lebar 700 melebihi css yang diatur maksimum 600 namun akan tetap menampilkan gambar sesuai dengan layout. Demikian juga posisi gambar dapat diatur pada posisi tengah, kiri, dan kanan sesuka Anda. Semoga membantu & selamat mencoba