Kapan Seharusnya Pakai JPG atau GIF?

Seperti anda, saya juga menghabiskan sebagian waktu saya menyimpan grafik untuk dipakai di web. Jadi saat saya browsing di internet, secara alami saya melihat kesalahan optimisasi, seperti seorang penggemar bola yang mampu melihat permainan bertahan yang berantakan hanya dengan melihat formasinya.

Saya tidak menyerang Blogging Tips, situs itu adalah sebuah blog yang suka saya baca, akan tetapi mereka meluncurkan sebuah desain baru dengan header merah besar dengan tipe reverse block. Kombinasi ini adalah teritori GIF yang klasik, akan tetapi mereka memilih menggunakan JPG. JPG dalam skenario ini akan menghasilkan pemudaran di sekitar huruf-huruf sebagai hasil kompresi. Lihatlah contoh di bawah ini:



Kapankan saat anda seharusnya menggunakan JPG dan kapan seharusnya anda menggunakan GIF?

Pemakaian gambar adalah salah satu komponen kunci CSS, oleh karena itu pengetahuan ini sangat berguna.



Gunakan GIF saat gambar anda menggunakan jumlah warna yang sedikit, memiliki bentuk-bentuk keras dan memiliki area besar yang berwarna sama.



Gunakan JPG apabila gambar anda menggunakan jumlah warna yang besar, gradien, memiliki elemen-elemen fotografi atau anda perlu menggunakan transparansi biner.

Ini hanyalah peraturan umumnya

Seperti semua peraturan lain, peraturan dibuat untuk dilanggar. Banyak skenario di mana peraturan ini tidak akan berlaku. Contohnya, gambar fotografi yang cukup kecil dan berwarna monoton mungkin akan memberikan hasil yang baik dengan GIF. Begitu juga, gradien suatu saat dapat berubah menjadi efek-efek keren dengan teknik kompresi GIF. Pada akhirnya, anda sendirilah yang harus melakukan percobaan dan melihat mana yang paling bagus.

Bagaimana dengan PNG?

Mmmm. PNG. PNG adalah format yang paling bagus, bukankah begitu? Lossless compression, alpha transparency, gamma correction dan warna 48-bit yang sering menghasilkan ukuran gambar yang bahkan lebih kecil lagi. Apalagi yang kurang? Alasan utama untuk tidak menggunakan PNG untuk transparasi canggihnya adalah fitur ini tidak bekerja di IE6 atau IE yang lebih tua lagi. Ada beberapa hack yang dapat anda lakukan untuk menanggulangi hal ini, akan tetapi hal ini mendatangkan beberapa masalah. PNG memang dapat dipakai, akan tetapi untuk sebagian besar orang, PNG hanyalah sebuah format penggoda. Saat pemakaian IE6 mulai berkurang, kita akan melihat semakin banyak pemakaian PNG di internet.