Cara memasukkan gambar dalam halaman web

Cara memasukkan gambar dalam halaman webGambar 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.

Semoga bermanfaat

Zainal Hakim

Baca juga :

** Bebas disunting dengan menyebutkan sumber **

Artikel Lainnya

  • Game Online dengan HTML5
    Teknologi HTML5 memang menjadi bahan perbincangan bagi para pengembang web, karena teknologi yang dihadirkan pada versi HTML5 ini memang luar biasa. Bahkan sekarang sudah banyak game/permainan online dibuat dengan HTML5 sehingga bisa dimainkan dengan cukup ringan dan tanpa perlu aplikasi bantu lainya selain browser.
  • Contoh penggunaan HTML5
    Pada tulisan sebelumnya, saya sudah mengenalkan sedikit tentang HTML5 yang meluputi fitur-fitur terbaru serta unggulan yang sudah disediakan dan bisa digunakan asalkan browsernya sudah mendukung. Berikut ini saya akan membuatkan beberapa contoh tag cara penulisan dan penggunaan HTML5.
  • Cara membuat form dengan HTML
    Sebuah web yang ideal bukan hanya bisa memberikan informasi tapi juga harus memiliki fasilitas untuk menerima masukan dari pengunjungnya seperti buku tamu, komentar atau fasilitas lainya. Untuk bisa menerima masukan berarti halaman web harus menyedikan fo
  • Perbedaan id dan name dalam html
    Dua atribut HTML ini (id dan name) mungkin sedikit bikin bingung karena kurang mengetahui fungsinya. Masing-masing sering digunakan, kadang id dan name digunakan terpisah dan sering pula digunakan bersamaan. Apa Perbedaan id dan name dalam html dan kapan menggunakan id dan kapan menggunakan name?
  • Cara memasukkan file flash ke halaman website
    Berikut ini tutorial tentang memasukkan file animasi flash ke dalam halaman website atau blog dengan perintah html. Flash adalah salah satu jenis hasil karya multimedia yang dapat digunakan untuk menampilkan animasi berbentuk gambar, tulisan, video, dan suara dengan kualitas yang cukup baik.

Kiriman terbaru