Bakawan
web desain & multimedia
Gif vs JPEG vs PNG (Repost)
16 April
Disclaimer : Posting ini adalah hasil tulisan Reposting. Isinya sudah diedit. Di tulis tahun 2008 dan diposting secara otomatis. Merupakan warisan posting jaman dulu sebelum kejadian kacau pindah server. Kebetulan masih bisa diselamatkan berkat cache internet archieve Alexa (?). Sekarang Komentar yg ada dulu (yg ikut hilang bersama database server lama) digabung dan dimasukkan ke dalam posting.
Menurut saya, diskusi seputar format image mana yang terbaik itu debat kusir absurb apabila tidak ditentukan terlebih dahulu dasar-dasar penilaiannya. Oleh karena itu, diskusi dikerucutkan pada format image mana yang paling baik digunakan untuk website dan hanya website. Jadi kita sama sekali tidak menyinggung image-editing. Dengan begini, artikel ini bisa terfokus menjawab pertanyaan, yang juga merangkap tema posting ini: “Mana yang lebih baik gif, png, atau jpeg sebagai image dalam pembuatan website ?”
Mengapa Perlu Memilih ?
Alasan utama dibalik mengapa kita harus memilih format image yang tepat ialah dikarenakan pemilihan tsb akan mempengaruhi kecepatan loading web. Semakin kecil pernik ukuran image yg harus ditampilkan maka semakin cepat browser menampilkan web kita. Mereka yg berkunjung pun senang tak harus menunggu lama. Perlu diingat, manajemen image yang buruk bisa membuat sebuah website itu lemot, nge-hang, ataupun menghasilkan error server 500.
GIF ( Graphics Interchange Format)
Gif itu bagus untuk website. Kombinasi warna yg tersedia sebanyak 256 warna. Jumlah kombinasi ini cukup membuatnya dipakai bagi keperluan grafis apapun, tentu saja dgn mengecualian keperluan photografi. Kamu bisa memakainya sebagai icon, favicon, logo, line grafis, ataupun image2 tombol.
Gif juga bisa dianimasikan. Sebenarnya tersedia pilihan format lain seperti flash atau format animasi berbasis vektor. Akan tetapi format2 itu biasanya lebih konsumtif-bandwidth. So, membuatnya menjadi pilihan kosmetik yg mahal krn berat dan tidak search engine friendly.
Gif mempunyai kemampuan mengkompres area2 gambar sewarna. Dengan kemampuan ini, banyak item2 grafis website bisa didesain dgn ukuran sekecil mungkin. Metode yang paling umum mereduksi ukuran file GIF ialah dengan mereduksi jumlah warna dalam palettle.
Perlu digaris-bawahi, GIF telah menggunakan skema kompresi internal LZW. Skema ini bisa membuat gambar berukuran sekecil mungkin tanpa kehilangan data penting apapun. Sy tidak tau pasti bagaimana algoritma LZW ini bekerja *belum tapi data-data tsb mempresentasikan kualitas input image sebelum dikompersi ke format Gif.
JPEG
Format ini bener2 didesain memanjakan forograper. Format ini bisa mensupport sampai 16.7 juta warna. Jumlah tersebut cukup untuk keperluan apapun bahkan pencitraan warna yg tidak bisa dicerna mata manusia.
Selain jumlah kombinasi warna, perbedaan jpg dgn gif itu terletak pada algoritma kompresi. Berbeda dengan gif, algoritma kompresi jpeg bekerja dengan meresonansi informasi2 image keluar. Dan tergantung seting yg diberikan, informasi tsb bisa dan bisa tidak dapat dicerna mata.
Perlu diingat, apabila kamu mensave image sementara kualitas imagenya telah berubah maka beserta munculnya output image baru, kamu juga akan kehilangan informasi yg dikandung image original sebelumnya. So, berhati-hatilah. Sebelum melakukan apapun, simpan image originalnya terlebih dahulu.
PNG (Portable Network Graphics)
PNG merupakan format image terbaru. PNG dikembangkan pada tahun 1995. Tujuan pengembangannya ialah demi mengatasi batasan-batasan gif. Png didesain dengan feature2 utama gif, termasuk streaming dan format file progressive.
Namun dibanding gif, png menyediakan kedalaman warna yg lebih baik, mampu melayani konversi image sampe kombinasi warna 24 bit.
PNG tidak mempunya isu lisensi paten, berbeda dengan format lainnya. Oleh karena itu, diharapkan penggunaanPNG akan tersebar-luas di kemudian hari, meskipun diyakini tidak akan benar2 menggantikan gif.
Gif
Ada 2 feature Gif yg menarik perhatian, yaitu transparency dan interlacing.
- Transparency : Gif mendukung transparency sehingga designer dapat mendesign background sebuah image itu transparan. Artinya, bila kamu meletakkan image yang transparan pada sebuah latar berwarna merah maka warna background image akan memimic seperti bunglon dan ikut berubah menjadi merah.
- Interlacing : Interlacing itu akan menciptakan ilusi seolah image gif itu lebih cepat loadingnya. Sebenarnya image ditampilkan browser dalam beberapa langkah sistemastis. Mulanya blur dan chaotis namun seiring lebih banyak informasi yang didownload dari server, maka image pun akan menjadi lebih dan lebih dan lebih jelas. Perlu dipertimbangkan, image yang sedikit ber-interlacing akan berukuran lebih besar dibandingkan file gif biasa.
Kapankah Gif sebaiknya dipakai ?
- Umumnya, image GIF digunakan untuk logo, line drawing, dan icons.
- Hindari menggunakannya untuk image photograpi, dan juga image yg membutuhkan stretches bertone-yg-konitium
- Saat kamu mendesign file gif, hindari penggunaan gradiens
- Jangan pakai anti-aliasing agar ukuran file bisa minimal.
Apa itu JPEG Progressive ?
File jpeg manapun dapat disimpan sebagai jpeg progresif. Format ini mirip dengan gif yg berfeature interlacing. Dan sebagaimana gif, mula2 browser akan menampilkan image berkualitas rendah bagi pengunjung web dan kemudian perlahan meningkatkan kualitasnya sesuai aslinya.
Kapankah Jpeg sebaiknya dipakai ?
- Dipakai sebagai image hasil fotograpi
- Dipakai bagi image2 yg melebihi 256 kombinasi warna.
PNG Format
PNG mempunyai tiga kelebihan dari pada GIF:
- Alpha channels (variable transparency)
- Cross-platfrom gamma correction (control untuk ketajaman/brightnes gambar) dan color correction two-dimension interlancing( metode untuk progresif display).
- PNG juga mengompres lebih baik dari GIF sekitar 5% sampai 25%
Komentar Lama
Gif and jpeg merupakan format grafik internet paling utama. Sementara penggunaan PNG, sebagaimana diproyeksikan, mulai sedikit2 menggantikan keduanya. Namun format manakah yg paling baik dipergunakan — saat ini — dalam pembuatan website? berdasar prinsip efisiensi, dengan yakin sy jawab : gif. Kualitas image dan efisiensi bisa seiring sejalan.
Sayangnya, format PNG belum betul2 disupport oleh Internet Explorer, hehehe (Mar 26, 10:12 PM, eepinside.com)
Sebenarnya bukan belum di SUPPORT mas, akan tetapi jika gambar PNG tersebut terdapat TRANSPARANSI yang mana itu belum di support sama IE6 kebawah, tapi kelemahan ini bisa di akali dengan sedikit javascript. (Mar 27, 10:20 AM, nurudin.jauhari.net) Go
menurut ku sih, PNG, karena Wikipedia menggunakan PNG dan ketika saya download, size filenya gak gede dan qualitas gambar pun bagus…Kalo gif sih ambil hikmah animasi nya aja hehe…kalo jpeg, buat background hoho…(opini gw) (Apr 1, 12:46 PM, densscessario.com)
Pertanyaan Design yg Belum kejawab
- Mengapa jpg, png, dan gif akan menghasilkan ukuran file yang berbeda padahal sumber imagenya sama ?
- Apakah kualitas output hasil konversi image pd format2 yg berbeda itu sama ?
- Apakah sy mulai terdengar seperti ahli multimedia roy suryo ?
- dll
Catatan Versi
- Posting versi 1 terbit pd tgl 26 maret 2008.
- Posting versi 2 terbit pd sekarang! dan dilakukan secara otomatis melalui cronjob dan diedit seadanya tanpa menghilangkan informasi yg diperlukan serta kredit bagi tiap komentator (yg diasumsikan komentar dia bagus hehehehe).
Related Post :
Tulisan (yg mungkin) MiripApakah konten posting ini terlalu Teknis IT ? any comment are welcomed
:xoxo:
Trackback & Pingback
[...] GIF vs JPG vs PNG [...]
[...] Gambar (format gambar GIF, JPEG, PNG), [...]
[...] mendasar antara ketiga format gambar tersebut. Berikut ini saya mengutip beberapa paragraf dari blog bakawan, salah seorang desainer web asal bandung, tentang ketiga macam format gambar di [...]
Newsletter :
Langganan blog via emailMasukin Email » Pencet Subscribe » klik email yg dikirim feedburner »
...tp inga inga ndak ada jaminan jadi pinter IT loh :D
sebenernya pengen pilih svg non-animasi yg berbasis text/xml, tp lagi-2 IE masi ketinggalan..
setuju,
kualitas..pilih jpg,
transparansi..bisa gif, png, diantara itu, yg lbh terasa legal..png
animasi kurang dari 3 frame/detik, boleh lah make gif.
utk sekadar kasat mata (tanpa pembesaran/zoom), cukup pilih yg terkecil ukurannya.
selain kompresi (terkait ukuran), kompatibilitas peramban (tanpa hack; terutama IE6 ke bawah), dan kualitas warna, ngga perlu ribet urusan lain, kan..atau ada pertimbangan lainnya lagi ya..
jujur aja svg adalah format gambar yg sy belum pernah pakai. mungkin karena format2 lain udah memenui kebutuhan (atau sy aja yg malas otak atik hehehe)
mengapa yah yg format lain ngak support animasi dan kita malah harus mengandalkan flash si nyonya gemuk untuk menampilkan banner sederhana ?
soal IE sudah lupakan saja browser barbar itu. Mikirin dia tuh kayak mikirin kena ada perang ? kenapa langit warnanya biru ? dan pertanyaan absurd lainnya. IE adalah mimpi buruk hehehehhe jawaban rasis!
untuk menjawab pertanyaan nomor 1, saya pnya solusi :
Karena algoritma kompresi yang digunakan pada tiap jenis gambar adalah berbeda-beda, sebaiknya kita pelajari dulu algoritmanya, dan implementasikan pada sebuah gambar dengan 12 warna dasar(warna dasar disini maksud saya adalah warna2 krayon, bukan RGB), dan pelajari bagaimana algoritma tersebut memainkan warna2, sehingga membentuk sebuah image baru yang ukuran filenya berbeda dengan ukuran file aslinya. :D
Jawaban no 2:
Misalkan untuk batasan 256 warna, kemungkinan kualitasnya di mata manusia akan sama, tapi tidak di mata mesin. hehehehehe….
[diedit sesuai permintaan gands]
CYMk maksudnya…cyan, yellow, magenta, and black. nah itu tuh soal mempelajari algortima konversi itu. Kebetulan sy banyak temen yg kerjaannya foographer dan image designer yg kerjaan retouch foto pada ngak ngerti euy. Hal kayak algortima ini ngak semudah kita baca dokumen coding…udah kayak dunia coding yg bener2 lain. Tp kalau kamu udah ngerti hehehe minta share donk di blog kamu :D
@balas jawab nomor 2 : iya di mata manusia awam warna 256 akan sama. Tp entah kenapa nggak bagi yg ahli. Tp satu hal yg pasti, bila berbeda format maka bisa berbeda bagaimana hasil ouput image tsb saat diconver lagi ata diberi retouch. JPG adalah yg paling mudah sekaligus yg paling besar ukurannya. JPG is the best asal ngak diminta ukuran image (merujuk ke kancas dan bukan file) ngak digedein….sifat jpg yg loosy atau apa gitu sy ngak paham banget
saya pernah memang mempelajari algoritma kompresi image dan membuat kode programnya dengan bahasa C. hehehe… tapi dah lupa blas!! hahahaha…. ntar coba2 saya cari lagi source codenya, mudah2an masih ada. biar saya retouch lagi. hahaha… ntar saya take a look ke algoritmanya. :D
satu lg..pas desain di ctrl+[+][+] (dua kali atau lebih), image ikut membesar kan?..walau tanpa pake mak erot.. :)
saya mimpi svg yg menampilkan gambar tapi berbasis teks (xml) ala Canvas akan lbh banyak diadopsi, elastis saat diperbesar sesuai keinginan pengguna, …tp tanpa menyebut bahwa ada peramban bernama IE di dunia ini..
mungkin bakal ada deh browser kayak gitu….tp mungkin. kemarin sy ngedownload amd browser (can you believe it perusahaan processor bikin browser hehehe). Mereka bikin yg mirip pogo gitu jadi bisa bisa browsig 3D. Belum tau sih bagaimana browser amd ini memperlakukan gambar web…..siapa tau mimpi lebih cepat terwujud hehehheh
hmm ? svg elastis…..kayak stoking ? :D atau underwear hhehehh
ownload berhasil tp ngak bisa install karena sy ngak mau install vista hehehe iya cuma bisa jalan di window vista doank.
artikelnya teknis banget.. tapi saya lebih memilih PNG ketimbang GIF dan JPG. bagi saya <em>"size does matter"</em>, dan PNG punya kelebihan yang tidak dipunyai saingannya, <em>Alpha channel.</em>
iya….kalau lagi mendesain web sebaiknya ukuran gambar itu diperjatikan. Sekali pun website udah dicache tetap aja berat…sekali pun gambar udah dicompress tp ukurannya tetap bisa jadi beban buat browser pengunjung….heheh begitulah…makanya jangan pilih png…pilih gif hahaha maksa
Klo saya yg pasti2 aja deh… :D
yg pasti itu yg bagaimana yah ?
Wah ada si sahquille kiwil di sini.. :D
@aulia:
Bro aulia, ente bener2 ngerti keinginan pelanggan deh. Udah dibenerin toh kolom komentnya? Bagus lah, jadinya ga perlu capek2 nulis ulang lagi hehee…
BTW saya mampir ke sini gara2 gugling dg kata kunci "perbedaan jpg, png, gif". Blog ini cuma nangkring peringkat ke-5 (kalah sama yg lain), tapi berhubung saya lagi baik (hehee), dan juga karena blog ini adalah blog tercepat yg pernah saya kunjungi, maka saya langsung mampir ke sini tanpa lihat2 yg lain..
O iya, izin ngutip sebagian ya, buat posting ttg "optimasi gambar" di blogku. Ga usah kuatir, credit link tetap akan diberikan kok :D
hahaha iya,… soal warnanya nati dulu deh hehehe. bro, engga usah minta ijin. udah dijinin kok dan sy udah baca…wah hasilnya jadi posting yg bagus hheheheh. sy malah yg makasih :D
Mas format png itu bagus. Dan lebih bagus lagi bersifat legal..
Mas gimana sih caranya supaya format png mempunyai kapasitas kecil tapi daya tampung warnanya banyak. Tnx b4
ha ? itu kayaknya dua hal yg bersebrangan banget. Sy rasa engga ada caranya. Kalau ingin ukuran kecil maka perkecil jumlah warna. cuma ini yg satu tau. Tanpa memandang format gambar
Mas saya gratcy lagi neh?
Ada yg mau saya tanyakan lg neh.
GMn seh caranya mengkoMersilkan website kita.. Jadi setiap ada yg mengunjungi website kita, kita dapet duit..
Oya mas kapan-kapan submit ya ke web eLearning saya, mr-amateur.co.cc.
trus kasih komentarnya.
untuk penggunaan PNG supaya terbaca transparannya sama IE6 ke bawah gunakan save nya dgn PNG 8-bit jangn gunakan yg 24-bit..
untuk keperluan website sebaiknya gunakan gif karena lebih ringan dan jelas akan lebih cepat di buka ;)