Pentingkah Image Dimensions?

Apakah Anda peduli terhadap loading dan size blog? Jika iya maka mari kita berbicara mengenai image dimensions, yang tentunya jika Anda memasang image/gambar di blog Anda. Ini adalah hanya dari sekian trik untuk mengecilkan loading dan size blog. 

Kemudian muncul pertanyaan, "Apakah image dimensions itu?" Secara sederhana image dimensions adalah ukuran gambar yang kita simpan di blog yang diwakili dengan atribut "width" dan "height" (lebar dan tinggi gambar).

Gambar-gambar ini bisa berupa gambar di postingan, thumbnails di homepage, gambar iklan di gadget html, atau icon-icon social media seperti facebook, twitter, atau G+ yang kita pasang secara manual. Pada beberapa tool online yang mengecek waktu loading dan size blog, hal ini (image dimensions) memberikan poin tersendiri dalam menentukan nilai loading dan size blog.

Seperti pengalaman saya, hal ini saya dapatkan ketika mengecek loading dan size blog pada http://gtmetrix.com/. Di situ jelas terlihat berapa nilai yang diberikan untuk "specify image dimensions". Coba Anda klik pada tulisan "specify image dimensions" maka akan tertera image yang missing dimensions alias gambar yang tidak menyertakan atribut lebar dan tingginya.

Lalu bagaimana cara memperbaikinya? Jawabannya ya tinggal ditambahkan atribut "width" dan "height" pada gambar tersebut. Setelah Anda klik tulisan "specify image dimensions" kemudian silahkan klik pada url imagenya untuk melihat gambarnya. Lalu cari gambar tersebut di blog dan tambahkan atribut "width" dan "height" (lebar dan tinggi gambar).

Secara umumnya gambar yang ditampikan di blog akan berupa url seperti di bawah ini:

<img src="URL IMAGE" />

Jika ditambahkan tag alt dan title akan seperti ini:

<img alt="tag alt image" src="URL IMAGE" title="tag title image"/>

Nah sekarang jika image dimensions ditambahkan pada gambar, maka akan tampak seperti di bawah ini:

<img height="200" alt="tag alt image" src="URL IMAGE" title="tag title image" width="200"/>

Mungkin untuk dipostingan, ini tidak akan sulit karena blogger sudah memberikan kemudahan untuk memberikan image dimensions pada gambar yang diupload di postingan. Ketika Anda selesai mengupload gambar di postingan, coba klik pada gambar maka akan tertera pilihat "small", "medium", "large" dan "X-large". Untuk "small" image dimensions yang diberikan 200px X 200px. Untuk "large" image dimensionsnya 320px X 320px, dan untuk "large" image dimensionsnya adalah 400px X 400px. Dan untuk "X-large' image dimensionsnya adalah 640px X 640px.

Nah untuk image atau gambar seperti gambar iklan yang biasanya dipasang di sidebar atau gambar lainnya yang dipasang lewat edit HTML, silahkan tambahkan atribut "width" dan "height" seperti di atas.

Dan untuk thumbnail postingan di homepage yang biasanya ditampilkan dengan javascript, harus ditambahkan atribut "width" dan "height" langsung pada kode javascriptnya. Di sini saya akan mengambil contoh dari javascript untuk menampilkan thumbnail di homepage yang biasa dipakai Maskolis pada template-templatenya.

Biasanya Maskolis menggunakan id="cutter" untuk menampilkan thumbnail postingan di homepage
, dan javascriptnya akan seperti di bawah ini:

<div class='cutter'>
<script type='text/javascript'>
//<![CDATA[
function bp_thumbnail_resize(e,d){var c=190;var a=true;var b="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ4texEv2i_Pbfti5_9SGpIbPw2sinU6FB7FB9PTQAKuTDqA79ZvFFF6mcmFOgus_v6-yUvpOqitT1Nj7ZVVRYbVxRhlCwFZe3KRbjFa-CNkZyiKUTFqsN-p1sWOQRSwoEQZEVtU0xIPQ/s72-c/default.png";if(a==true&&e==""){e=b}image_tag='<img src="'+e.replace("/s72-c/","/s"+c+"-c/")+'" class="postthumb" alt="'+d+'"/>';if(e!=""){return image_tag}else{return""}};
//]]>
</script>
<a expr:href='data:post.url' expr:title='data:post.title'><script type='text/javascript'>
document.write(bp_thumbnail_resize(&quot;<data:post.thumbnailUrl/>&quot;,&quot;<data:post.title/>&quot;));
</script></a>
</div>

Nah sekarang tinggal tambahkan atribut "width" dan "height" pada javascript seperti di atas. Untuk menentukan "width" dan "height" silahkan sesuaikan dengan "width" dan "height" pada css "cutter" yang mengatur tampilan thumbnail postingan di homepage. Biasanya pengaturan css .cutter ini disimpan di bawah skin. untuk menambahkan atribut "width" dan "height" pada javascript silahkan lakukan seperti di bawah ini.

<div class='cutter'>
<script type='text/javascript'>
//<![CDATA[
function bp_thumbnail_resize(e,d){var c=190;var a=true;var b="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ4texEv2i_Pbfti5_9SGpIbPw2sinU6FB7FB9PTQAKuTDqA79ZvFFF6mcmFOgus_v6-yUvpOqitT1Nj7ZVVRYbVxRhlCwFZe3KRbjFa-CNkZyiKUTFqsN-p1sWOQRSwoEQZEVtU0xIPQ/s72-c/default.png";if(a==true&&e==""){e=b}image_tag='<img src="'+e.replace("/s72-c/","/s"+c+"-c/")+'" class="postthumb" alt="'+d+'" width="190" height="190"/>';if(e!=""){return image_tag}else{return""}};
//]]>
</script>
<a expr:href='data:post.url' expr:title='data:post.title'><script type='text/javascript'>
document.write(bp_thumbnail_resize(&quot;<data:post.thumbnailUrl/>&quot;,&quot;<data:post.title/>&quot;));
</script></a>
</div>

Perhatikan kode yang berwarna merah di atas, itu adalah atribut "width" dan "height" yang ditambahkan pada javascriptnya.

Nah demikian saja pengalaman saya untuk memperbaiki masalah pada "specify image dimensions" ketika mengecek loading dan size blog di http://gtmetrix.com/. Semoga bisa dimengerti dan bermanfaat.

Sekali lagi hanya sekedar mengingatkan, jika Anda berniat memberikan komentar Out Of Topic di halaman postingan, maka mungkin saya tidak akan menjawab komentar Anda. Karena sudah saya sediakan halaman OOT dengan klik tombol "Out Of Topic" pada kotak pesan komentar. Silahkan gunakan dengan bijaksana.