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 ialah hanya dari sekian trik untuk mengecilkan loading dan size blog.
Kemudian muncul pertanyaan, "Apakah image dimensions itu?" Secara sederhana image dimensions ialah ukuran gambar yang kita simpan di blog yang diwakili dengan atribut "width" dan "height" (lebar dan tinggi gambar).
Gambar-gambar ini sanggup 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) menunjukkan poin tersendiri dalam memilih 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" lalu 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="pakah Anda peduli terhadap loading dan size blog Seberapa Pentingkah Image Dimensions?" src="URL IMAGE" title="Seberapa Pentingkah Image Dimensions?"/>Nah kini kalau image dimensions ditambahkan pada gambar, maka akan tampak ibarat di bawah ini:
<img height="200" alt="pakah Anda peduli terhadap loading dan size blog Seberapa Pentingkah Image Dimensions?" src="URL IMAGE" title="Seberapa Pentingkah Image Dimensions?" width="200"/>Mungkin untuk dipostingan, ini tidak akan sulit alasannya ialah blogger sudah menunjukkan fasilitas untuk menunjukkan 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 ialah 400px X 400px. Dan untuk "X-large' image dimensionsnya ialah 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 teladan dari javascript untuk menampilkan thumbnail di homepage yang biasa digunakan Maskolis pada template-templatenya.
Biasanya Maskolis memakai 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/AVvXsEgImMF0MYP_XmQ6iQO1Bggy6824VMTpXhnJJKzM07494xKKGpOBeF0JAlxIQ5J-4lAj03rTNnPfVrCJYNmB_aEZNmZcQuV5dM161lnQR4K0mnu6uZzIPurNzDsbAW0GE3fKxVPUNWKiIrM/s72-c/default.png";if(a==true&&e==""){e=b}image_tag='<img src="'+e.replace("/s72-c/","/s"+c+"-c/")+'" class="postthumb" alt="pakah Anda peduli terhadap loading dan size blog Seberapa Pentingkah Image Dimensions?"/>';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("<data:post.thumbnailUrl/>","<data:post.title/>"));
</script></a>
</div> Nah kini tinggal tambahkan atribut "
width" dan "height" pada javascript ibarat di atas. Untuk memilih "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/AVvXsEgImMF0MYP_XmQ6iQO1Bggy6824VMTpXhnJJKzM07494xKKGpOBeF0JAlxIQ5J-4lAj03rTNnPfVrCJYNmB_aEZNmZcQuV5dM161lnQR4K0mnu6uZzIPurNzDsbAW0GE3fKxVPUNWKiIrM/s72-c/default.png";if(a==true&&e==""){e=b}image_tag='<img src="'+e.replace("/s72-c/","/s"+c+"-c/")+'" class="postthumb" alt="pakah Anda peduli terhadap loading dan size blog Seberapa Pentingkah Image Dimensions?" 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("<data:post.thumbnailUrl/>","<data:post.title/>"));
</script></a>
</div> Perhatikan arahan yang berwarna merah di atas, itu ialah atribut "width" dan "height" yang ditambahkan pada javascriptnya.
Nah demikian saja pengalaman saya untuk memperbaiki problem pada "specify image dimensions" saat mengecek loading dan size blog di http://gtmetrix.com/. Semoga sanggup dimengerti dan bermanfaat.
Sekali lagi hanya sekedar mengingatkan, kalau Anda berniat menunjukkan 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.
0 Response to "Seberapa Pentingkah Image Dimensions?"
Posting Komentar