Image HTML

Image atau gambar bisa ditampilkan menggunakan tag <img>.

Syntax

<img src="URL" alt="Text">

Atribut src (source) berisi alamat image yang ditampilkan.

Atribut alt (alternative) berisi text yang akan ditampilkan jika browser tidak bisa menampilkan image.

Ada beberapa alasan image tidak ditampilkan oleh browser yaitu: permasalahan koneksi, browser tidak mengijinkan untuk menampilkan image atau nama file salah.

Atribut alt juga berguna bagi search engine untuk mengetahui informasi mengenai image yang ditampilkan.

Berikut ini adalah contoh penggunaan tag <img> menggunakan local URL:

Contoh 1:

<img src="payung.jpg" alt="payung">

Hasil contoh 1:

payung

Berikut ini adalah contoh jika image tidak ditampilkan karena permasalahan koneksi:

Contoh 2:

<img src="nama_gambar_salah.jpg" alt="gambar payung">

Hasil contoh 2:

gambar payung

Catatan:

  • Tag <img> adalah salah satu tag yang tidak memerlukan tag penutup.
  • Pada HTML5, code <img> diperlakukan sama dengan <img /> atau <img><img />.
  • Pada beberapa kondisi, ada browser yang mengubah code <img> menjadi <img /> atau <img><img />.
  • Pada XHTML, code tag image harus ditulis menggunakan slash: <img />.

Atribut width dan height

Atribut width (lebar) dan height (tinggi) berguna untuk mengatur ukuran image yang ditampilkan.

Image umumnya menggunakan ukuran pixel (px), namun bisa juga menggunakan ukuran lainnya. Berikut ini adalah contoh penggunaan atribut width dan height:

Contoh 3:

<img src="bunga_matahari.jpg" alt="bunga matahari" width="100px" height="50px">

Hasil contoh 3:

bunga matahari

Jika perbedaan ukuran antara image asli dan modifikasi terlalu besar maka ada kemungkinan tampilan image menjadi kacau waktu dilihat di browser.

Selain dalam pixel, ukuran image juga bisa diatur dalam ukuran persen %. Nilai persen ini relatif tergantung pada ukuran parent element atau elemen tempat image berada.

Contoh, Jika image berada di dalam sebuah table berukuran 1024×768 maka image yang berukuran width=100% dan height=100% akan ditampilkan secara penuh dalam table tersebut.

Contoh 4:

<table width="400" height="200">
<tbody>
<tr>
<td><img src="tomat.jpg" alt="tomat" width="100%" height="100%"></td>
</tr>
</tbody>
</table>

Hasil contoh 4:

tomat

Pada hasil render image di atas kita melihat bahwa image dipaksa untuk memenuhi 100% table yang berukuran 400×200. Sebenarnya ukuran image di atas lebih kecil (150×112) namun dipaksa untuk ditampilkan lebih besar sehingga kita melihat gambar yang low quality atau gambar berkualitas rendah.

Satu hal yang harus diperhatikan saat menampilkan image adalah menjaga rasio width dan height dengan ukuran sebenarnya.

Jika image tidak ditentukan attribute width dan height nya di dalam tag <img>, maka browser akan menampilkan image tersebut sesuai dengan ukuran aslinya.

Hal ini bisa menjadi masalah bila ukuran image sangat besar sehingga ketika di-render dan ditampilkan di browser yang akan terjadi adalah web page menjadi berantakan karena tampilan image yang terlalu besar.

Satu hal lagi yang perlu diingat adalah web browser me-render elemen HTML secara berurutan. Dan untuk image, web browser membutuhkan angka width dan height. Jika angka ini disebutkan di dalam tag <img> maka web loading akan menjadi lebih cepat.

Selain menggunakan atribut width dan height, ukuran image juga bisa diatur menggunakan CSS width dan height. Berikut ini adalah contoh penggunaan CSS width dan height:

Contoh 5:

<img src="dandellion.jpg" alt="dandellion" style="width:128px;height:90px;">

Hasil contoh 5:

dandellion

Atribut align

Atribut align di dalam tag <img> berguna untuk mengatur posisi image yang ditampilkan

Beberapa pilihan yang bisa digunakan yaitu rapat kiri (left), tengah (center) atau kanan (right).

Update: Atribut align telah deprecated pada HTML5, gunakan CSS float. Berikut ini adalah contoh penggunaan CSS float:

Contoh 6:

<img src="bunga_kuning.jpg" alt="bunga kuning" style="float:right;">

Hasil contoh 6:

bunga kuning

Berikut ini adalah contoh image yang ditampilkan rapat kanan dan digabung dengan text:

Contoh 7:

<p>Ini adalah paragraph 1...</p>
<p>
<img src="bunga_mawar.jpg" alt="bunga mawar" style="float:right;">
Ini adalah paragraph 2...
</p>
<p>Ini adalah paragraph 3...</p>

Hasil contoh 7:

Ini adalah paragraph 1. Tempat dimulainya postingan.

bunga mawarIni adalah paragraph 2. Di paragraph ini ada tulisan yang digabung dengan gambar. Sebuah postingan yang bagus biasanya selalu ada gambarnya. Tapi tidak semua postingan harus dipasang gambar. Dengan gambar berukuran sedang dan ada tulisan disekelilingnya maka postingan tersebut akan terlihat bagus.

Ini adalah paragraph 3. Paragraph ini berisi penutup dan kesimpulan.

Link

Biasanya image yang ditampilkan adalah sebuah link yang menuju file image tersebut.

Berikut ini adalah contoh image yang dijadikan link:

Contoh 8:

<a href="bunga_bakung.jpg" target="_blank">
<img src="bunga_bakung.jpg" alt="bunga bakung">
</a>

Hasil contoh 8:


bunga bakung

Atribut border

Berdasarkan pengaturan default (standar), image ditampilkan tanpa border (garis tepi). Namun IE9 browser dan versi sebelumnya memberikan border secara otomatis untuk image yang berupa link.

Border bisa diatur menggunakan atribut border.

Syntax

<img border="pixels">

Update: Atribut border telah deprecated pada HTML5, gunakan CSS border. Berikut ini adalah contoh penggunaan CSS border:

Contoh 9:

<a href="bunga_ungu.jpg" target="_blank">
<img src="bunga_ungu.jpg" alt="bunga ungu" style="border:5px solid black">
</a>

Hasil contoh 9:


bunga ungu

Atribut background

Atribut background berguna untuk menambahkan image sebagai background.

Update: Atribut background telah deprecated pada HTML5, gunakan CSS background-image. Berikut ini adalah contoh penggunaan CSS background-image:

Contoh 10:

<div style="background-image: url("country.png");">
    <p>Paragraph Satu background image</p>
    <p>Paragraph Dua background image</p>
    <p>Paragraph Tiga background image</p>
</div>

Hasil contoh 10:

Paragraph Satu background image

Paragraph Dua background image

Paragraph Tiga background image

Thumbnail

Thumbnail adalah image yang ditampilkan dalam ukuran kecil dan berbentuk link yang menuju file image tersebut.

Tujuan menampilkan image dalam bentuk thumbnail adalah memberikan tampilan sederhana sebuah image tanpa harus menampilkan image dalam ukuran aslinya yang berukuran lebih besar.

Menampilkan image dalam ukuran thumbnail akan sangat terasa manfaatnya jika ada banyak image yang ingin ditampilkan dalam satu halaman web.

Contoh 11:

<a href="bunga_putih.jpg" target="_blank">
<img src="bunga_putih.jpg" alt="bunga putih" width="140px" height="80px" />
</a>

Hasil contoh 11:


bunga putih

Jenis image

Image berjenis gif cocoknya digunakan untuk banner, clipart dan tombol karena file jenis ini backgroundnya bisa dibuat transparant. Kekurangan dari image jenis ini adalah warna yang bisa digunakannya terbatas hanya 256 warna. Selain itu ukuran file cenderung lebih besar daripada file jenis lainnya.

Image berjenis jpeg atau jpg memiliki beberapa keistimewaan yaitu warna yang tidak terbatas dan bisa dikompresi dengan sangat baik sehingga bisa menghemat space hardisk serta menghemat bandwith. Namun kekurangannya adalah adalah tidak bisa memiliki background transparant.

Image berjenis png merupakan kombinasi dari kedua jenis image di atas. Ukuran image berada diantara gif dan jpg. Bisa memiliki background transparant. Serta bisa dikompresi dengan baik.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>