Lima elemen pemrosesan gambar yang sempurna dalam desain web
Penulis：Eve Cole
Waktu Pembaruan：2009-06-20 16:51:39
1. Format: Format PNG lebih disukai untuk gambar dengan bentuk sederhana yang dihasilkan oleh komputer (seperti logo dan ikon), sedangkan foto dengan warna yang kaya harus JPEG. Jika warnanya sedikit dan tidak ada gradien, format GIF harus digunakan.
GIF adalah format gambar web yang paling umum digunakan. GIF menampung hingga 256 warna dan berfungsi dengan hampir semua gambar kecuali foto. Ia juga memiliki kemampuan untuk menghasilkan animasi sederhana dan gambar transparan.
Format PNG relatif baru dan juga merupakan format yang direkomendasikan oleh W3C. PNG-8 dapat berisi hingga 256 warna, sebanding dengan GIF; PNG-24 mendukung mode RGB, yang dapat mengekspresikan warna apa pun dengan kualitas lebih tinggi;
JPEG dapat menyimpan sekitar 16,7 juta warna dan sering digunakan untuk menyimpan foto. Namun selain itu, JPEG hampir tidak pernah digunakan. Jika gambar memiliki kurang dari 256 warna, atau berisi area warna solid yang luas, JPEG tidak akan bekerja dengan baik - ukuran file mungkin digandakan untuk mendapatkan gambar berkualitas tinggi.
Saat memilih format gambar, Anda harus mempertimbangkan cakupan penggunaannya secara komprehensif, seperti warna, transparansi, animasi, dll., seperti yang dijelaskan di bawah ini. Berbagai parameter dapat dibandingkan melalui wizard ekspor Photoshop atau Fireworks. Kriteria pemilihannya adalah ukuran file harus sekecil mungkin dengan tetap menjaga kualitas gambar yang dapat diterima.
2. Gambar kreasi warna sebaiknya menggunakan mode RGB, bukan mode CMYK untuk pencetakan. Jangan khawatir tentang warna yang aman untuk browser, karena hampir tidak ada lagi yang menggunakan monitor 8-bit. Pemilihan warna harus mengacu pada standar terpadu, seperti sistem identitas visual (VI). Jumlah dan efek warna merupakan faktor penting dalam menentukan format gambar. Misalnya, gradien warna sering kali menghasilkan warna dalam jumlah besar. Jika disimpan sebagai GIF, akan terjadi distorsi dan ukuran file juga akan meningkat secara signifikan sebaiknya mempertimbangkan untuk menggunakan Format PNG-24, PNG-32 atau JPEG.
3. Ukuran Gambar yang dihasilkan menggunakan alat pembuatan vektor seringkali cocok untuk disimpan dalam format PNG, dan ukurannya harus ditentukan dalam alat gambar vektor, setelah diubah menjadi bitmap, skalanya tidak dapat dengan mudah (apalagi tidak boleh diperbesar). ). Perlu dicatat bahwa file PNG yang dibuat di Fireworks berisi informasi yang dapat diedit seperti lapisan, dan garis, bentuk, dan teks di dalamnya semuanya adalah grafik vektor. Menerapkan gambar seperti itu ke halaman web terlebih dahulu harus melakukan operasi keluaran untuk mengompresi ukuran file, dan gambar PNG keluaran juga akan dikonversi ke bitmap karena informasi yang dapat diedit hilang. Oleh karena itu, penyesuaian ukuran gambar harus diselesaikan sebelum operasi keluaran. Bitmap tidak diskalakan untuk memastikan garis luar dan gradien gambar cukup jelas.
Untuk bitmap dan foto yang ada, sebaiknya gunakan Photoshop dan software lain untuk menyesuaikan ukurannya sebelum memasukkannya ke halaman web daripada menggunakan atribut lebar dan tinggi dalam bahasa HTML untuk mengubah ukuran gambar. Penggunaan bahasa HTML secara langsung untuk mengontrol ukuran gambar dapat menyebabkan distorsi gambar yang serius.
Umumnya, gambar yang ditempatkan pada halaman web harus dikontrol ke ukuran yang relatif kecil. Jika dicampur dengan teks, lebarnya harus sekitar 300 px. Meskipun muncul sendiri, lebarnya harus kurang dari 600 piksel. Sedangkan untuk ketinggian, sebaiknya tidak melebihi satu layar.
4. GIF transparan dan PNG keduanya mendukung transparansi, tetapi dengan cara yang berbeda. GIF hanya mengatur satu atau beberapa warna menjadi transparan sepenuhnya, tanpa mempertimbangkan transparansi warna gradien yang berdekatan. Artinya jika warna latar belakang berubah secara signifikan (atau mengandung beberapa warna kontras), transisi ke bagian transparan tidak akan mulus dan akan terdapat garis pemisah yang jelas. Jika Anda ingin membuat GIF transparan, Anda perlu mengatur warna latar belakang kanvas agar sama dengan (atau mendekati) warna latar belakang efek target. PNG tidak memiliki masalah ini dan juga dapat diatur agar tembus cahaya.
Namun, IE6 tidak dapat menampilkan PNG transparan dengan benar secara default, dan tindakan yang tepat perlu diambil.
5. Animasi pada halaman web animasi biasanya menyertakan Flash dan animasi GIF. Flash memiliki fungsi yang kuat, efek yang kaya, kualitas gambar yang tinggi, dan perangkat lunak pembuatan yang kuat. Ini adalah bentuk animasi web yang disukai dalam banyak kasus. Kerugian dari GIF animasi adalah hanya dapat menggunakan tidak lebih dari 256 warna, dan sulit untuk membuat animasi dengan efek yang kompleks. Namun, kelebihannya adalah filenya kecil dan dapat diputar di browser lama atau modern mana pun tanpa plug -dalam dukungan.
