Ada sejumlah format gambar yang dapat digunakan pada halaman web. Beberapa contoh umum adalah GIF , JPG , dan PNG . File SVG juga umum digunakan di situs web saat ini, memberikan desainer web pilihan lain untuk gambar online.
Gambar GIF
Gunakan file GIF untuk gambar yang memiliki sejumlah kecil warna tetap. File GIF selalu dikurangi menjadi tidak lebih dari 256 warna unik. Algoritma kompresi untuk file GIF kurang kompleks daripada untuk file JPG, tetapi ketika digunakan pada gambar berwarna datar dan teks itu menghasilkan ukuran file yang sangat kecil .
Format GIF tidak cocok untuk gambar atau gambar fotografi dengan warna gradien. Karena format GIF memiliki jumlah warna terbatas, gradien dan foto akan berakhir dengan garis dan piksel saat disimpan sebagai file GIF.
Singkatnya, Anda akan menggunakan GIF hanya untuk gambar sederhana dengan hanya beberapa warna, tetapi Anda juga bisa menggunakan PNG untuk itu juga (lebih lanjut tentang itu segera).
Gambar JPG
Gunakan gambar JPG untuk foto dan gambar lain yang memiliki jutaan warna. Ini menggunakan algoritma kompresi yang kompleks yang memungkinkan Anda untuk membuat grafik yang lebih kecil dengan kehilangan sebagian kualitas gambar. Ini disebut kompresi "lossy" karena beberapa informasi gambar hilang ketika gambar dikompresi.
Format JPG tidak cocok untuk gambar dengan teks, blok warna solid besar, dan bentuk sederhana dengan tepi yang tajam. Ini karena ketika gambar dikompresi, teks, warna, atau garis dapat buram sehingga gambar yang tidak tajam seperti itu akan disimpan dalam format lain.
Gambar JPG paling baik digunakan untuk foto dan gambar yang memiliki banyak sekali warna alami.
Gambar PNG
Format PNG dikembangkan sebagai pengganti format GIF ketika tampak bahwa gambar GIF akan dikenakan biaya royalti. Grafik PNG memiliki tingkat kompresi yang lebih baik daripada gambar GIF yang menghasilkan gambar yang lebih kecil daripada file yang sama disimpan sebagai GIF. File PNG menawarkan transparansi alpha, yang berarti Anda dapat memiliki area gambar Anda yang sepenuhnya transparan atau bahkan menggunakan berbagai transparansi alpha. Sebagai contoh, drop shadow menggunakan berbagai efek transparansi dan akan cocok untuk PNG (atau Anda hanya dapat mengakhiri kami menggunakan bayangan CSS sebagai gantinya).
Gambar PNG, seperti GIF, tidak cocok untuk foto. Anda dapat mengatasi masalah banding yang mempengaruhi foto yang disimpan sebagai file GIF menggunakan warna yang benar, tetapi ini dapat menghasilkan gambar yang sangat besar. Gambar PNG juga tidak didukung dengan baik oleh ponsel dan ponsel berfitur lama.
Kami menggunakan PNG untuk file apa pun yang membutuhkan transparansi. Kami juga menggunakan PNG-8 untuk file apa pun yang akan cocok sebagai GIF, menggunakan format PNG ini sebagai gantinya.
Gambar SVG
SVG adalah singkatan dari Scalable Vector Graphic. Tidak seperti format berbasis raster yang ditemukan di JPG, GIF, dan PNG, file-file ini menggunakan vektor untuk membuat file yang sangat kecil yang dapat ditampilkan dalam ukuran apa pun tanpa kehilangan kualitas peningkatan ukuran file. Mereka diciptakan untuk ilustrasi seperti ikon dan bahkan logo.
Mempersiapkan Gambar untuk Pengiriman Web
Terlepas dari format gambar apa yang Anda gunakan, dan situs web Anda pasti menggunakan sejumlah format yang berbeda di seluruh halamannya, Anda perlu memastikan bahwa semua gambar di situs tersebut disiapkan untuk pengiriman web . Gambar terlalu besar dapat menyebabkan situs berjalan lambat dan berdampak pada kinerja keseluruhan. Untuk mengatasi hal ini, gambar-gambar tersebut harus dioptimalkan untuk menemukan keseimbangan antara kualitas tinggi dan ukuran file terendah yang mungkin pada tingkat kualitas tersebut.
Memilih format gambar yang tepat adalah bagian dari pertempuran, tetapi juga memastikan Anda telah menyiapkan file-file itu adalah langkah berikutnya dalam proses pengiriman web yang penting ini.
Artikel asli oleh Jennifer Krynin. Diedit oleh Jeremy Girard.