Cara memasukkan gambar di HTML 5

Gambar dalam konteks web/blog sangatlah penting, karena visualisasi seperti ini yang membuat para pengunjung web betah berlama-lama dan lain kali mengunjunginya kembali.

Anda bisa bayangkan kalau sebuah web yang dikunjungi tidak ada visual gambar sama sekali, walaupun informasinya menarik tapi mungkin cukup sekali baca dan hanya berkesan singkat sehingg lain waktu sudah melupakannya. Tapi bukan berarti banyak gambar akan baik untuk sebuah situs, bisa-bisa jika kebanyakan gambar akan mempengaruhi waktu tampilnya informasi yang akan dibaca, jadi ya secukupnya dengan tujuan informasi jelas dan menarik.

Langsung ke inti bahasan tentang memasukkan gambar.

Untuk diketahui sebelumnya, jenis gambar yang umum digunakan untuk ditampilkan di internet ada 3 jenis. Jenis Pertama JPG/JPEG yang memiliki kualitas gambar full color dan memiliki tingkat kompresi/kepadatan sehingg ukuran file gambar akan lebih kecil. Jenis Kedua yaitu GIF, gambar ini memiliki struktur warna maksimal 256 dan mendukung animasi sehing bisa membuat gambar bergerak dan mendukung gambar transparan, kualitas gambar tentunya sangat minim sehingga terlihat pecah2. Dan yang terakhir adalah PNG, memiliki struktur warna full color, tanpa kompresi dan mendukung transparan.

Biasanya jenis file diatas dihasilkan dari kamera digital/scanner atau dari proses pengolahan gambar BITMAP dengan perangkat lunak bantuan seperti photoshop, gimp dll.

PENTING :
Sebelum disisipkan dalam halaman web sebaiknya terlebih dahulu :

1. Dimensi gambar diubah sesuai dengan keperluan, bisa menggunakan perangkat lunak bantu seperti photoshop, gimp dll. Jangan langsung dimasukkan seperti aslinya yang mungkin ukuran lebarnya bisa mencapai lebih dari 4000 pixel, dan ukuran filenya bisa lebih dari 1MB. Ini akan sangat fatal karena proses menampilkanya akan memerlukan waktu yang lama, bahkan bagi pengunjung yang koneksinya lambat bisa tidak tampil sama sekali. Jadi akan percuma. Apalagi hasil asli dari kamera digital dengan teknologi 5 mega pixel keatas yang rata2 ukuran filenya bisa mencapai 4MB lebih. Bisa dikalkulasi jika saja ada beberapa gambar dalam 1 halaman dengan ukuran besar???? berapa lama waktu untuk menampilkan semuanya??? belum tampil informasinya pengunjung web anda sudah kabur.
2. Ubahlah nama file gambar menjadi lebih singkat, mudah diingat, unik, menggambarkan isinya, tanpa tanda spasi atau simbol selain - (minus) dan _ (garis bawah) dan juga ditulis dengan huruf kecil semua. Penulisan dengan huruf kecil bertujuan menghindari salah alamat yang bisa terjadi pada keadaan sistem operasi tempat data disimpan berbeda. Misal anda punya gambar Photo-zainal.jpg, kemudian anda panggil dengan nama photo-zainal.jpg (lihat penulisan huruf P dan p). Di komputer anda mungkin saja gambar akan tampil dan tidak ada masalah, tapi jika disimpan pada sistem operasi linux yang menganut sistem CASE SENSITIF(peka penulisan) maka gambar tidak akan tampil. Sedangkan kriteria yang lain seperti singkat, unik dll bertujuan agar familiar terhadap lingkungan internet.
3. Dan yang terakhir letakkanlah file gambar pada folder yang sama dengan halaman webnya, atau lebih baik membuat sub folder baru berada dibawah folder utama. Sehingga penulisan alamat pada saat memanggil tidak sulit dan familiar. misal : semua gambar disimpan dalam folder gambar atau images yang berada pada folder utama.

 Jika semua kriteria diatas sudah dilakukan tinggal cara menyisipkanya. Kode html-nya bisa dilihat berikut :

Perintah dasar minimal :

<img src="nama-file-gambar.jpg" />

dengan perintah diatas gambar akan ditampilkan sesuai ukuran aslinya. Kode yang dianjurkan :

<img src="nama-file-gambar.jpg" width="lebar" height="tinggi" border="garisluar" alt="text alternatif" title="Text pesan" />

src : diisi dengan nama file lengkap dengan jenis gambar, jika berada di sub folder : namafolder/namafile.jpg
tambahan opsional (boleh diguanakan jika diperlukan)
width : diisi dengan angka lebar ukuran gambar ditampilkan sesuai ruang yang tersedia
height : diisi dengan angka tinggi ukuran gambar ditampilkan sesuai ruang yang tersedia
border : diisi dengan angka ketebalan garis luar dari nilai minimal 0 yang berarti tanpa garis
alt : text alternatif jika gambar belum selesai/gagal ditampilkan
title : text yang akan muncul jika mouse diarahkan diatas gambar.

Itulah perintah sebenarnya yang berada dibalik tampilnya gambar2 visual yang kita lihat diinternet.

- See more at: http://www.zainalhakim.web.id/posting/cara-memasukkan-gambar-dalam-halaman-web.html#sthash.ZM0n8SOR.dpuf