Cara Merubah Ukuran Atau Resolusi Gambar Dan Yang Berkaitan Dengan Gambar

Ukuran gambar yang terlalu besar atau tidak sesuai pada postingan kita bukan hanya akan membuat blog kita gak bagus di lihat tapi juga akan membuat loading blog lambat.

Kali ini kita akan belajar cara untuk merubah resolusi gambar dengan dengan menggunakan kode html, caranya sederhana dan gak ribet dan cuma butuh sedikit pengetahuan saja karena cara ini memang simple banget.

Di blogger sendiri sudah ada fitur untuk merubah ukuran gambar, namun jika anda ingin merubah sendiri maka ini akan lebih akurat karena kita merubahnya menggunakan px.

Baiklah, kita mulai dengan dasar dulu.

Kode html untuk menyisipkan gambar seperti ni
<img src="http://url_gambar" />

Hasil gambar :


Jika ingin merubah ukuran gambar, maka kita tinggal edit saja kode HTMLnya.

Kode untuk menyisipkan sekaligus merubah resolusi gambar

<img src="http://url_gambar" width="200" height="200"/>

Hasilnya :



Atau menggunakan "alt" agar mudah di temukan di search engine

<img src="http://url_gambar" alt="pokemon" width="200" height="200"/>

Hasilnya :



keterangan :
width  = lebar gambar
height = tinggi gambar
200     = resolusi gambar, rubahlah angka 200 sesuai dengan yang anda inginkan.
Nb : jangan merubah ukuran gambar terlalu besar dari ukuran aslinya, karena akan membuat gambar menjadi pacah.

Tambahan

Cara menggunakan border, bingkai atau garis tepi

Cara menggunakan bingkai pada gambar untuk memperindah tampilan gambar yang kita sisipkan, kita bisa memakai bingkai atau garis tepi pada gambar, kita masih menggunakan kode yang sama, kita masih memodifikasi kode dasar.

Untuk membuat bingkai atau garis tepi, anda tinggal menambahkan kode ini style="border:3px solid green;" setelah <img

Nanti jadinya seperti ini
<img style="border:3px solid #00ff00;" src="http://url_gambar" alt="pokemon" width="200" height="200"/>

Hasilnya :


Keterangan :
3px         = tebal border, anda bisa mengubah angkanya untuk menyesuaikan ketebalan border
solid       = jenis border, untuk jenis border yang lain anda bisa cari dulu di google
#00ff00  = warna border, anda bisa merubah warnanya sesuai dengan keinginan anda,

Untuk mengetahui kode warna anda bisa baca di sini Berbagai Cara Mengetahui Kode Warna Html Atau Hackdecimal

Cara membuat link dengan gambar

<a href="http://url_tujuan"><img src="http://url_gambar" alt="pokemon" width="200" height="200"/></a>

Hasilnya :

Gambar yang menggunakan border

<a href="http://url_tujuan"><img style="border:3px solid #00ff00;" src="http://url_gambar" alt="pokemon" width="200" height="200"/></a>

Hasilnya :



Untuk yang lainnya modif sendiri aja ya, biar kreative, haha,,,


Baiklah, sekian di sini dulu artikel saya yang bertemakan gambar, semoga bisa di pahami dengan mudah bagi yang baru belajar dan saya harapkan bisa bermanfaat artikel saya kali ini.

Thanks for reading & sharing Despul Media