Cara Mudah Merubah Ukuran Gambar Pada Blog Secara Otomatis - Resize Image

Menggunakan gambar pada postingan pasti akan membuat postingan menjadi lebih menarik, dan menambah kemungkinan juga untuk meningkatkan pengunjung yang datang. Menggunakan gambar yang sesuai,  dengan dimensi yang pas adalah salah satu hal penting dalam SEO. Misalnya gambar yang menggambarkan deskripsi postingan agar mudah dipahami, pasti akan memuaskan para pengunjung blog.

Namun pertanyaannya adalah pada dimensi / ukuran gambar yang kita gunakan di dalam postingan. Mungkin saja kita menggunakan ukuran gambar secara acak di dalam beberapa postingan, tanpa ada standar ukuran yang kita tentukan. Munculah pertanyaan, "Dapatkah Kita Merubah Ukuran Setiap Gambar Yang Sudah Kita Gunakan Pada Postingan Secara Otomatis?".  Jawabannya, "Tentu saja.". Yang kita butuhkan hanya sedikit 'bermain' dengan code CSS.

"Kenapa kita harus me-resize gambar-gambar yang ada pada blog kita?"

1. Untuk beberapa kasus, saat kita menggunakan gambar dengan dimensi yang besar, maka gambar tersebut akan tampil terlalu besar dan keluar dari garis batas badan postingan. Yang pastinya hal ini akan memperburuk penampilan sebuah postingan, dan membuat para pengunjung tidak nyaman.

2. Masalah dimensi / ukuran gambar yang tidak sesuai, sering terjadi juga saat kita merubah template blog yang kita punya. Jadi jika kamu sudah yakin dengan template baru yang kamu temukan, kemungkinan kamu juga harus me-resize setiap gambar pada setiap postingan yang sudah ada di dalam blog.

3. Dengan menggunakan dimensi gambar yang sesuai dengan ukuran body post, maka hal ini akan mempermudah dan mempercepat google robot untuk meng-index setiap postingan yang kamu punya.

4. Lebar dan tinggi gambar yang sesuai, akan berdampak pada kecepatan page load. Jadi, jika kita menerapkan teknik ini, maka waktu yang dibutuhkan untuk menampilkan seluruh konten blog (page load) pun akan menjadi lebih cepat dan stabil.

"Bagaimana cara merubah ukuran gambar pada postingan?"

ada 2 cara yang dapat kita gunakan:

1. Secara Manual

Kamu bisa saja merubah ukuran / dimensi gambar secara manual, satu-per-satu. Cara ini bisa dengan mudah dilakukan saat kita sedang meng-edit postingan. Namun cara ini tidak efektif dilakukan jika kita ingin merubah ukuran gambar pada setiap postingan yang kita punya, yang jumlahnya sudah sangat banyak.

2. Secara Otomatis

Cara inilah yang paling efektif. Cara sangat mudah. Kamu hanya butuh merubah / menambahkan sedikit code CSS pada 'template' blog masing-masing. Dengan cara ini kamu tidak perlu merubah satu-per-satu gambar pada setiap postingan. Karena setiap ukuran gambar secara otomatis akan mengikuti ukuran yang kita tentukan melalui code CSS.

Cara Merubah Ukuran (resize) Seluruh Gambar Pada Blog Secara Otomatis

1. Masuk ke Dashboard blog kamu masing-masing.
2. Masuk ke Template, Edit HTML
3. Cari code    ]]></b:skin>    , gunakan ctrl+f untuk mempermudah pencarian.

4. Sekarang paste-kan code ini di atasnya:

.post-body img {
width:500px!important;
height:auto!important;}

5. Save Template tersebut. Done!

Kamu Dapat Merubah Beberapa Bagian

> Kamu dapat menyesuaikan ukuran lebar gambar dengan merubah bagian 500px
> Kamu juga dapat merubah ukuran tinggi pada gambar dengan merubah bagian auto disebelah height: kamu dapat memasukan ukuran yang sesuai. Misalnya 500px, atau kamu menyesuaikan sendiri dengan ukuran lebar gambar.
> Jika kamu ingin menambahkan garis tepi (border) pada setiap gambar, paste-kan code ini di bawahnya:

border: 1px solid #d2d2d2  , ketebalan garis dan warna garis bisa kamu ubah sendiri.

> Kamu juga dapat merubah code CSS yang kita bahas di atas menjadi:

.post-body img {
max-width: 700px;
}

code ini hanya akan menentukan lebar maksimal pada setiap gambar yang kamu gunakan. Maka setiap gambar yang ukuran lebarnya melebihi 700px, maka gambar tersebut akan secara otomatis hanya akan memiliki ukuran 700px. Jika ingin menambahkan pengaturan tinggi maksimal, kamu dapat menambahkan   max-height:700px;    Gambar yang lebih kecil dari itu, tetap akan memiliki ukura kecil tanpa resize apapun. Pastinya ukuran 700px di atas bisa kamu ubah dan kamu sesuaikan sendiri.

author: Akira Asayami
references: probloggertricks.com