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 **

Komentar

Halaman Lainya

  • Membuat menu pada bidang gambar
    Mungkin sudah jarang sekali kita temui menu sebuah web yang hanya dibuat dengan gambar sehingga banyak pilihan menu/link halamannya diletakkan pada gambar itu juga. Umumnya sekarang gambar hanya digunakan pada bagian tertentu saja dan ukurannya pun tidak terlalu besar.
  • 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.
  • Karakter dan simbol khusus dalam html
    Umumnya html digunakan hanya untuk menampilkan informasi yang dapat dibaca yang ditampilkan dalam bentuk gambar, tulisan, atau tabel. Sehingga simbol ataupun karakter yang sering digunakan untuk keperluan menuliskan rumus biasanya akan ditampilkan dalam bentuk gambar, padahal sebenarnya html sudah menyediakan karakter/simbol tersebut dengan pengkodean khusus. Simbol dan karakter apa saja yang bisa kita gunakan dalam html? Simak artikel berikut.
  • 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.
  • Membuat tulisan berjalan dengan HTML
    Panduan lengkap dan mudah cara membuat animasi tulisan berjalan dengan HTML

Kiriman terbaru