Format Gambar Untuk Website, Mana Yang Paling Baik?

by - 1/22/2013

0
Bagi seorang Web Designer terkadang mengalami kebuntuan jika dihadapkan untuk memilih format gambar apa
yang akan digunakan. Disini saya akan coba menjawabnya dengan terlebih dahulu menjelaskan format-format
gambar yang umum digunakan untuk membangun sebuah website.
Format-format gambar yang cocok dan sudah umum diterapkan di website adalah GIF, PNG dan JPG/JPEG.
Berikut penjelasannya:

1. GIF
GIF (Graphics Interchange Format) adalah gambar 8 bit yang mendukung 256 warna dan hanya bisa digunakan pada mode grayscale, bitmap, dan index color. Gambar dengan format ini mendukung penggunaan multiple
bitmap dalam satu file sehingga bisa digunakan untuk membuat gambar animasi (animation). Selain itu format
GIF juga mendukung Transparency dan Interlacing.

Interlacing biasanya akan keliahatan ketika kita sedang me-load sebuah website. Biasanya gambar akan terlihat blur dan lama-kelamaan akan tampak jelas. Tapi aku sendiri kurang suka dengan interlace dan lebih memilih
none ketika menge-save.

Karena hanya menampung 256 warna (8 bit) maka gambar dengan format ini tidak cocok jika kita gunakan untuk

menampilkan gambar-gambar yang kaya akan warna semisal gambar fotografi.
Gambar format GIF biasanya digunakan untuk background, banner iklan, logo atau icon yang umumnya
menggunakan warna yang solid pada website.

2. PNG
Gambar dengan format PNG (Portable Network Graphics) pertama dikembangkan pada tahun 1995. Format ini
menggunakan metode Lossless Compression, yaitu suatu metode kompress gambar dengan tidak terlalu banyak

mengurangi kualitasnya. Pada awalnya format PNG memang dirancang untuk menjawab keterbatsan GIF.
GIF memiliki konsep Alpha Transparency yang menggunakan 8 bit kanal transparansi sehingga image-image
dapat saling ditumpuk dengan kesan transparan yang lebih baik dibanding pada GIF. Dengan konsep alpha
transparency, derajat transparansi pada PNG juga dapat dikontrol, yaitu dengan apa yang kita kenal sebagai
“opacity”.

PNG menerapkan kompresi data lossless dengan algoritma kompresi yang jauh lebih efisien dibanding GIF.
Algoritma kompresi pada PNG ini mampu menyimpan data format image lebih banyak dan dilengkapi fitur
error-checking untuk mengontrol ketajaman (brightness) gambar dan koreksi warna. Dan yang juga penting,
dengan kompresi lossless ini, proses saving, restoring dan re-saving suatu image dengan format PNG tidak akan menurunkan derajat kualitasnya.
3. JPG/JPEG
JPEG dikembangkan pada awal tahun 1980 oleh Joint Photographic Experts Group (JPEG). JPEG merupakan

format paling sering digunakan di internet. Seperti format GIF, format JPEG juga menggunakan sistem kompresi,

tapi algoritmanya berbeda; jauh lebih kompleks dan bersifat lossy.
Karena proses kompresi bersifat lossy maka sangat tidak dianjurkan jika kita mengeditnya berulang-ulang.
Kenapa? Karena pada setiap proses kompres-dekompres akan ada informasi image asli yang hilang (terbuang)

dan tidak dapat disimpan, khususnya apabila ada proses “crop” atau “shift” dari image.
Untuk mengatasi masalah ini para desainer biasanya mengedit dalam bentuk PNG, selanjutnya jika telah
benar-benar jadi baru di save dalam bentuk JPEG.
Salah satu kekurangan JPEG adalah tidak memiliki fitur transparan seperti pada GIF dan PNG.
Format Mana yang Paling Baik?
GIF :
Format ini umumnya digunakan untuk membuat image gambar grafis, logo, dan icon, dengan jumlah
kombinasi warna terbatas (di bawah 256) atau warna solid.
Format GIF juga cukup baik untuk membuat file-file image animasi sederhana seperti banner-banner web
dengan ukuran kecil.

Untuk membuat image/gambar sampai ukuran cukup kecil dengan ketajaman yang tetap baik.
JPEG/JPG :

Format ini umumnya digunakan untuk membuat image hasil fotografi, terutama untuk image dengan lebih
dari 256 kombinasi warna.

Cocok untuk desain image yang memiliki gradien, misalnya perubahan warna yang perlahan-lahan dari
merah ke biru dan seterusnya.

PNG :
Format ini akan baik digunakan untuk membuat image gambar baik grafis, logo, icon atau lainnya yang
memerlukan lebih dari 256 kombinasi warna, kepresisian warna dan ketajaman gambar yang tinggi, serta
fading yang rendah.

Format PNG sangat tepat untuk mendesain image-image yang memerlukan fitur transparansi.
Format PNG sangat tepat untuk image-image yang masih akan diedit ulang tanpa menurunkan kualitas.
Jadi, yang paling baik adalah yang paling cocok dengan kebutuhan temen-temen.. :)

Referensi:
http://stackoverflow.com/questions/392635/website-image-formats-choosing-the-right-format-for-the-right-task
http://www.web4profit.com/artikel/desain_website/format-gif-jpeg-png.html
http://id.wikipedia.org/wiki/JPEG
http://id.wikipedia.org/wiki/PNG
http://id.wikipedia.org/wiki/Graphics_Interchange_Format

Note :
Jika Artikel ini menarik silahkan Berkomentar di postingan ini... dan jika mau copy artikel ini dan jangan lupa kasih link sumbernya hargailah orang yang membuat artikel ini dengan susah payah... jadilah blogger yang jujur..

You May Also Like

11 comments

  1. Dhoooes22 Januari 2013 pukul 17.34

    PERTAMAX !

    Nice Info Tapi Info Lama Semua Orang Tau !

    FOLLOW & COMMENTBACK http://edho-xp.blogspot.com/2013/01/edho-xp-akan-berkunjung-ke-jambi.html

    BalasHapus
    Balasan
    1. Iffat Andriano22 Januari 2013 pukul 17.39

      iya bro..
      ini cuman ingetin aja mungkin masih ada yang tidak tau dengan ini atau lupa..
      thanks udah berkunjung bro..

      Hapus
  2. Novaldyinside22 Januari 2013 pukul 17.41

    HADIR Selalu Di Blog mu mas

    BalasHapus
  3. Devid Irham22 Januari 2013 pukul 17.56

    nice info gan

    BalasHapus
  4. Unknown22 Januari 2013 pukul 17.57

    Pelajaran berharga makasi bro :D

    http://blog-iyunk.blogspot.com/

    BalasHapus
    Balasan
    1. Iffat Andriano22 Januari 2013 pukul 17.59

      iya bro emang berharga banget nih..
      hehe thanks udah berkunjung..

      Hapus
  5. Unknown22 Januari 2013 pukul 17.59

    artikel mantap.....makasih brow... :)

    BalasHapus
  6. Unknown25 Januari 2013 pukul 08.53

    Tetep PNG sob kalo gue sih!!

    http://lutfiezard.blogspot.com

    BalasHapus

Untuk menyisipkan kode pendek, gunakan ... KODE ...
Untuk menyisipkan kode panjang, gunakan ... KODE ...
Untuk menyisipkan gambar, gunakan ... URL GAMBAR ...

Rules :
-DONT SPAM
-DONT FLOOD
-DONT PORNO
-DILARANG NGEMIS/MINTA TEMPLATE IFFAT BLOGGER
-DILARANG BERKOMENTAR DENGAN KATA AGAN.
-BILA ANDA INGIN MENDAPATAKAN INFO YANG TERUPDATE GAME PC DI BLOG INI SILAHKAN FOLLOW BLOG INI
-GUNAKANLAH BAHASA YANG SOPAN DAN BERETIKA
-FOLLOW BLOG INI MAKA SAYA AKAN FOLLBACK

@iffatandriano
Created By SoraTemplates | Distributed by MyBloggerThemes