Menampilkan obyek transparan di Web atau Blog Anda

Sebuah web akan menjadi menarik dengan adanya gambar-gambar atau dalam bahasa Inggris disebut image. Tanpa gambar, maka sebuah website akan terlihat membosankan apalagi hanya terdapat tulisan-tulisan saja. Yap, gambar telah menjadi elemen penting dalam pembuatan web. Bahkan ke depannya mungkin tidak terbatas pada gambar saja, tetapi juga akan mulai masuk ke multimedia seperti suara atau video streaming yang menggunakan konsep seperti YouTube.

Bila diperhatikan dengan seksama, saat ini gambar atau image di web tidak hanya berupa foto ataupun ilustrasi sebagai gambar background. Image menjadi sebuah elemen penting dalam struktur sebuah web, ditunjukkan dengan adanya:

* Favicon, logo kecil yang menjadi identitas web, umumnya terdapat di samping address bar, location bar ataupun bookmark.
* Circled border, atau ujung yang membulat. Bisa ditemukan dalam ujung-ujung tabel atau elemen lain yang berwujud visual berupa kotak supaya tidak terlihat kaku. Akan tetapi cara ini lambat laun akan ditinggalkan dengan adanya CSS 3 yang sudah dapat mempermudah pembuatan ujung yang membulat.
* Logo, umumnya terletak di bagian utama web (di ujung atas) sebagai identitas sebuah web.
* Word art, digunakan bila tulisan biasa tidak cukup untuk ditampilkan. Terkadang penggunaan gambar sebagai tulisan bertujuan untuk mengurangi kemungkinan ketidakcocokan jenis font dengan font yang terdapat di komputer setiap orang karena umumnya dalam web terdapat 8 jenis font yang diterima secara luas: Arial, Verdana, Trebuchet MS, Georgia, Times New Roman, Courier New, Serif dan Sans Serif. Itupun yang secara standar harus diisi sebagai “syarat mutlak” adalah Serif dan Sans Serif karena jenis huruf lain di atas merupakan huruf buatan Microsoft yang tidak bisa digunakan di sembarang sistem operasi.
* Gradasi, umumnya dipakai sebagai background untuk memberi efek transisi dari satu warna ke warna lain secara halus.
* Dan masih banyak lagi contoh aplikasi dari image pada web.

Banyaknya bentuk aplikasi gambar pada dunia web tentunya juga dibarengi dengan banyaknya format gambar yang beredar. Akan tetapi sampai saat ini terdapat 3 format yang standar digunakan di web dan masih bertahan walau sudah lebih dari sepuluh tahun digunakan. Format gambar tersebut yaitu JPG (atau JPEG), GIF dan PNG.

Sampai saat ini sebagian besar gambar statis menggunakan format JPG (atau JPEG: Joint Photographic Experts Group). Secara umum, JPG memiliki performa yang baik untuk foto dan gambar secara umum. JPG menggunakan kompresi yang disebut sebagai lossy compression di mana kualitas gambar akan menurun bila gambar tersebut ingin diturunkan juga ukurannya (size) dalam ukuran kilobytes atau bytes. Hal ini bisa menjadi sisi baik dan sisi buruk dari format JPG. Ketika kompresi diterapkan terlalu tinggi, maka ukuran file menjadi kecil dan hemat ruangan dalam memori atau harddisk, akan tetapi akan timbul artefak atau keanehan dalam gambar berupa kotak-kotak dan gambar menjadi terlihat buram. Selain itu, sebuah gambar JPG yang disimpan berulang kali akan mengalami penurunan kualitas yang berulang kali pula. Seandainya bila sebuah gambar disimpan dengan kualitas 80%, kemudian diedit dan disimpan lagi dengan kualitas yang sama, maka gambar terakhir akan memiliki kualitas kurang lebih 64% dibanding gambar asli.

Hampir setiap image editor memiliki kemampuan menyimpan gambar sebagai JPG dan memiliki pengaturan untuk memilih seberapa besar kualitas yang harus dipertahankan dan mode apa yang akan digunakan untuk menyimpan gambar. Mode yang ada yaitu progresif dan normal. Progresif akan menyimpan gambar secara berlapis-lapis atau bertahap (multiple pass), sedangkan normal akan menyimpan gambar hanya dalam 1 lapis (pass). Umumnya JPG yang progresif akan memiliki size yang lebih kecil daripada JPG dan memiliki keunggulan dimana ketika diload oleh web browser, maka gambar akan tampil secara bertahap dari gambar yang penuh kotak-kotak dan blur menjadi gambar yang lebih tajam.

Format JPG sendiri sangat disarankan bila ingin menampilkan foto atau gambar yang tidak terlalu memiliki kontras warna yang tinggi karena akan mengurangi jumlah artefak berupa halo (penampakan buram di ujung-ujung gambar) dan juga mengurangi size gambar. Bila menggunakan gambar yang memiliki kontras yang tinggi antara foreground dan background, contohnya adalah screenshot dari apliakasi Ms. Word, Ms. Excel atau lainnya yang memiliki banyak tulisan, artefak berupa halo akan jelas terlihat di sekitar huruf-huruf dan ujung-ujung gambar yang memiliki perbedaan warna yang kuat dan sedikit gradasi. Dan dengan begitu prinsip JPG yang harus menghitung warna di sekitar sebuah pixel untuk digabungkan dengan pixel itu sendiri akan menjadi rumit sehingga size gambar pun akan menjadi besar dibanding gambar dalam dimensi ukuran yang sama dengan jumah gradasi yang banyak. Warna yang dapat disimpan dalam file JPG adalah warna 24-bit, atau sekitar 16 juta warna dan memiliki kemampuan menyimpan metadata seperti color management, nilai gamma, tanggal gambar, nama editor dan sebagainya.



JPEG File (Perhatikan bagian pojok dari image, JPEG tidak bisa menampilkan efek transparan)

GIF (Graphics Interchange Format) merupakan format yang cukup tua dan sebenarnya sudah cukup uzur untuk digunakan jaman sekarang. Mengapa? Karena GIF hanya bisa menerima warna paling banyak 8-bit atau 256 warna berbeda yang disimpan dalam sebuah kamus warna yang disebut pallete. GIF sendiri memiliki kompresi lossless yang merupakan lawan dari lossy. Lossless tidak akan mengurangi kualitas gambar bila disimpan berulang kali. Hanya saja pada kenyataannya dengan menurunkan jumlah warna yang bisa ditampilkan dari sebuah JPG ke GIF, secara otomatis warna yang ada akan berkurang dan menghilang. Karena kompresi lossless, maka umumnya gambar GIF memiliki size yang lebih besar dibandingkan dengan JPG pada ukuran yang sama. Dan hal ini masih tergantung dari jenis gambar yang ditampilkan, apakah berupa foto yang banyak warna dan apakah warna yang ada memiliki nilai random yang tinggi. Kompresi GIF cocok digunakan pada gambar yang nilai warnanya tidak terlalu acak, dengan kata lain memiliki kecenderungan warna yang sama di sekitar sebuah pixel.

GIF saat ini masih menjadi primadona karena kemampuannya menyimpan beberapa frame gambar menjadi animasi. Sama seperti JPG, GIF memiliki mode dalam penyimpanan yaitu interlaced atau normal. Prinsip interlaced hampir sama dengan progresif pada JPG, yaitu menyimpan dalam beberapa pass, akan tetapi cara ini justru menjadikan gambar GIF memiliki size yang lebih besar. Selain itu juga terdapat mode yang disebut dither, di mana warna dibuat menjadi lebih random atau menyebar yang bila diterapkan di dalam gambar foto akan membuat gambarnya menjadi lebih “halus”, tetapi dengan imbalan size bisa berlipat-lipat kali lebih besar.

Satu lagi kelebihan GIF dibanding dengan JPG adalah bahwa gambar berformat GIF bisa menampung nilai alpha transparency yang bisa membuat suatu gambar terlihat transparan. Hanya saja transparency dalam GIF hanya berupa transparency 1 warna yang tidak bisa digabungkan dengan warna lainnya, sehingga terkadang penggunaan transaparency dengan GIF akan menimbulkan efek halo di sekitar backgroundnya yang transparan. GIF juga dapat menampung metadata seperti JPG.



GIF File (File GIF bisa menampilkan efek transparan namun resolusi gambar tidak bisa semaksimal file JPEG sehingga ada bagian gradasi yang tidak bisa ditampilkan)

Format terakhir yang kini makin populer adalah PNG (Portable Network Graphics). Sama seperti GIF, PNG memiliki kompresi lossless di mana PNG tidak akan kehilangan kualitas setelah disimpan berkali-kali. Tingkat kompresi pada PNG pun lebih baik dibandingkan dengan GIF sehingga tidak jarang sebuah gambar GIF yang disimpan dengan format PNG akan memiliki size yang berkali-kali lebih kecil. Masih sama seperti GIF bahwa kompresi yang digunakan pun cocok untuk gambar yang memiliki nilai sebaran warna yang rendah. Oleh sebab itu secara umum tetap tidak bisa mengalahkan size dari JPG untuk sebuah foto yang memiliki sebaran warna random yang tinggi. PNG juga memiliki mode yang bisa digunakan sama dengan GIF yaitu dithering dan interlacing.

PNG lebih fleksibel dibandingkan dengan GIF di mana PNG bisa memilih antara menggunakan pallete 8-bit seperti GIF, atau 24-bit seperti JPG, maupun 32-bit dengan alpha transparency. Alpha transparency dalam PNG bisa disandingkan dengan warna yang ada sehingga menciptakan sebuah warna yang transparan, tidak seperti GIF yang harus hanya menerima transparency murni. Akan tetapi di sini justru muncul dilema dari para web designer atau developer dalam menggunakan PNG. Web browser yang banyak digunakan pada saat ini yaitu Internet Explorer (IE) versi 6 masih belum bisa menampilkan transparansi dibandingkan dengan web browser modern lainnya. Bahkan disebut-sebut, IE 7 masih memiliki sedikit masalah kompabilitas dengan PNG. Tetapi dengan sedikit hack atau perubahan khusus di IE, tampilan warna PNG bisa menjadi lebih baik di web browser ini.

PNG sendiri memiliki “pendamping” yang bisa menampilkan gambar animasi seperti GIF yang bernama MNG. Hanya saja setelah bertahun-tahun dipublikasikan, MNG tidak mendapat sambutan yang baik dan masih sangat jarang digunakan dibandingkan dengan format GIF yang sudah terlampau tua. Bahkan masih banyak browser yang belum mengimplementasikan MNG sebagai format gambar yang bisa diterimanya, padahal dengan MNG sendiri tentunya animasi yang bisa dibuat akan lebih fleksibel dibandingkan dengan GIF, dan juga menekan size yang ada. PNG sendiri bisa menyimpan metadata seperti JPG.



PNG File (Perhatikan bagian pojok dari image, PNG bisa menampilkan efek transparan dengan resolusi gambar setajam file JPEG)

Itulah format-format gambar umum di web yang banyak digunakan saat ini beserta ulasan tentang kelebihan dan kekurangannya. Walau ketiga format tersebut merupakan format yang paling terkenal saat ini, tidak tertutup kemungkinan format gambar lain akan naik ke podium juara menggantikan ketiga format tersebut. Disebut-sebut terdapat pengganti JPG yang memiliki tingkat kompresi yang lebih baik dengan size yang lebih kecil. Masih ada juga format gambar vektor SVG yang tidak akan kehilangan kualitas bahkan dengan zoom sekalipun yang bahkan bisa jauh lebih fleksibel dibandingkan dengan PNG karena dapat menampung hyperlink dalam sebuah area gambar. Dan juga format gambar yang tadi saya sebutkan yaitu MNG untuk animasi.

Semoga melalui entry ini, pembaca akan lebih mengerti perbedaan dan kegunaan utama dari ketiga format gambar yang paling banyak digunakan saat ini.

Sumber :
http://etersoul.com/2008/08/24/web-jpg-gif-png/