Kapan Menggunakan Format JPG, GIF, PNG, dan SVG untuk Imej Web Anda

Terdapat beberapa format imej yang boleh digunakan di laman web. Beberapa contoh biasa ialah GIF , JPG , dan PNG . Fail SVG juga biasa digunakan di laman web hari ini, memberikan pereka web lagi pilihan lain untuk imej dalam talian.

Imej GIF

Gunakan fail GIF untuk imej yang mempunyai bilangan warna yang kecil dan tetap. Fail GIF sentiasa dikurangkan kepada tidak lebih daripada 256 warna unik. Algoritma mampatan untuk fail GIF kurang kompleks daripada untuk fail JPG, tetapi apabila digunakan pada imej warna rata dan teks ia menghasilkan ukuran file yang sangat kecil .

Format GIF tidak sesuai untuk imej atau imej foto dengan warna kecerunan. Oleh kerana format GIF mempunyai bilangan warna yang terhad, kecerunan dan gambar akan berakhir dengan banding dan piksel apabila disimpan sebagai fail GIF.

Singkatnya, anda akan menggunakan GIF hanya untuk imej mudah dengan hanya beberapa warna, tetapi anda juga boleh menggunakan PNGs untuk itu juga (lebih lama lagi).

Imej JPG

Gunakan imej JPG untuk gambar dan imej lain yang mempunyai berjuta-juta warna. Ia menggunakan algoritma mampatan yang kompleks yang membolehkan anda membuat grafik yang lebih kecil dengan kehilangan beberapa kualiti imej. Ini dipanggil pemampatan "lossy" kerana beberapa maklumat imej hilang apabila imej dimampatkan.

Format JPG tidak sesuai dengan imej dengan teks, blok warna pepejal, dan bentuk mudah dengan tepi tajam. Ini kerana apabila imej dimampatkan, teks, warna, atau garisan mungkin mengaburkan menghasilkan imej yang tidak begitu tajam kerana ia akan disimpan dalam format lain.

Imej JPG paling baik digunakan untuk gambar dan imej yang mempunyai banyak warna semula jadi.

Imej PNG

Format PNG telah dibangunkan sebagai pengganti untuk format GIF apabila ia kelihatan bahawa imej GIF akan tertakluk kepada yuran royalti. Grafik PNG mempunyai kadar pemampatan yang lebih baik daripada imej GIF yang menghasilkan gambar yang lebih kecil daripada fail yang sama disimpan sebagai GIF. Fail PNG menawarkan ketelusan alpha, bermakna anda boleh mempunyai bidang imej anda yang sama telus sepenuhnya atau menggunakan rangkaian ketelusan alfa. Sebagai contoh, bayangan drop menggunakan pelbagai kesan ketelusan dan sesuai untuk PNG (atau anda hanya boleh mengakhiri kami menggunakan bayang-bayang CSS sebaliknya).

Imej PNG, seperti GIF, tidak sesuai dengan gambar. Adalah mungkin untuk mendapatkan sekitar isu banding yang mempengaruhi foto disimpan sebagai fail GIF menggunakan warna yang benar, tetapi ini boleh menyebabkan imej yang sangat besar. Imej PNG juga tidak disokong dengan baik oleh telefon bimbit dan telefon ciri yang lebih lama.

Kami menggunakan PNG untuk sebarang fail yang memerlukan ketelusan. Kami juga menggunakan PNG-8 untuk sebarang fail yang sesuai sebagai GIF, menggunakan format PNG ini.

Imej SVG

SVG bermaksud Grafik Vektor Berkala. Tidak seperti format berasaskan raster yang terdapat dalam JPG, GIF, dan PNG, fail ini menggunakan vektor untuk membuat fail yang sangat kecil yang boleh diberikan pada sebarang saiz tanpa kehilangan kualiti peningkatan saiz fail. Mereka dicipta untuk ilustrasi seperti ikon dan juga logo.

Menyediakan Imej untuk Penghantaran Web

Tidak kira format imej mana yang anda gunakan, dan laman web anda pasti menggunakan beberapa format yang berbeza di semua halamannya, anda perlu memastikan bahawa semua imej di laman web itu disediakan untuk penghantaran web . Imej yang terlalu besar boleh menyebabkan laman web berjalan perlahan dan memberi kesan keseluruhan prestasi. Untuk memerangi ini, imej tersebut mesti dioptimumkan untuk mencari keseimbangan antara kualiti tinggi dan saiz fail yang paling rendah yang mungkin pada tahap kualiti.

Memilih format imej yang betul adalah sebahagian daripada pertempuran, tetapi juga memastikan anda telah menyediakan fail-fail tersebut adalah langkah seterusnya dalam proses penghantaran web yang penting ini.

Artikel asal oleh Jennifer Krynin. Diedit oleh Jeremy Girard.