Seberapa Pentingkah Image Dimensions?

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

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

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

Seperti pengalaman saya, hal ini saya dapatkan saat mengecek loading dan size blog pada http://gtmetrix.com/. Di situ terperinci terlihat berapa nilai yang diberikan untuk "specify image dimensions". Coba Anda klik pada goresan pena "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 goresan pena "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 ibarat di bawah ini:

<img src="URL IMAGE" />

Jika ditambahkan tag alt dan title akan ibarat ini:

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

Nah sekarang kalau image dimensions ditambahkan pada gambar, maka akan tampak ibarat 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 alasannya blogger sudah memperlihatkan fasilitas untuk memperlihatkan image dimensions pada gambar yang diupload di postingan. Ketika Anda simpulan 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 yaitu 400px X 400px. Dan untuk "X-large' image dimensionsnya yaitu 640px X 640px.

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

Dan untuk thumbnail postingan di homepage yang biasanya ditampilkan dengan javascript, harus ditambahkan atribut "width" dan "height" pribadi pada arahan javascriptnya. Di sini saya akan mengambil pola 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 ibarat 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/AVvXsEiroTJffoamAACx7sV9OJiVJVDRx0spQX5ZjnBahjA-290OZ8gPKpsU3qj_JOpHDmuln5xASciydlf4eeeFrO9svsCHQ-2IFJ0DOq7UcmmHXab3JDs-W-0gVEeLkEoOif1kRYPrnSSY0gc/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 ibarat 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 ibarat 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/AVvXsEiroTJffoamAACx7sV9OJiVJVDRx0spQX5ZjnBahjA-290OZ8gPKpsU3qj_JOpHDmuln5xASciydlf4eeeFrO9svsCHQ-2IFJ0DOq7UcmmHXab3JDs-W-0gVEeLkEoOif1kRYPrnSSY0gc/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 arahan yang berwarna merah di atas, itu yaitu atribut "width" dan "height" yang ditambahkan pada javascriptnya.

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

Sekali lagi hanya sekedar mengingatkan, kalau Anda berniat memperlihatkan 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.