Format gambar dijelaskan: PNG, JPG, GIF, WebP, SVG

Memilih format gambar yang tepat adalah salah satu cara termudah membuat halaman lebih cepat dan lebih tajam. Salah pilih, Anda dapat logo buram atau foto yang beratnya lima kali dari seharusnya. Berikut keunggulan tiap format umum, agar Anda bisa mencocokkan format dengan gambar.

Dua keluarga

Pertama, sebuah pembeda yang menjelaskan segalanya. Format raster (PNG, JPG, GIF, WebP) menyimpan kisi piksel, jadi buram atau berpiksel saat diperbesar. Format vektor (SVG) menyimpan bentuk sebagai matematika, jadi tetap setajam silet di ukuran berapa pun. Foto selalu raster; logo dan ikon paling baik sebagai vektor.

Format-formatnya

JPG / JPEG

Kompresi lossy yang dibuat untuk fotografi. Ukuran sangat baik untuk konten foto, didukung di mana-mana, tetapi tanpa transparansi dan ada artefak kasatmata bila terlalu dikompresi. Default untuk foto ketika WebP bukan pilihan.

PNG

Lossless, dengan transparansi. Sempurna untuk logo, ikon, tangkapan layar, dan apa pun dengan tepi tajam, teks, atau warna rata. Karena lossless, foto yang disimpan sebagai PNG jadi besar.

GIF

Format lama yang terbatas 256 warna, kini hampir eksklusif dipakai untuk animasi sederhana. Untuk gambar statis ia kalah dari PNG; untuk animasi, format modern (WebP animasi atau video) lebih kecil dan berkualitas lebih tinggi.

WebP

Format modern yang serba bisa: lossy atau lossless, dengan transparansi dan animasi. Ia biasanya menghasilkan berkas 25–35% lebih kecil dari JPG atau PNG pada kualitas visual yang sama, dan setiap peramban terkini mendukungnya. Untuk kebanyakan gambar web hari ini, WebP adalah default terbaik.

SVG

Grafik vektor yang didefinisikan sebagai XML. Ideal untuk logo, ikon, dan ilustrasi — dapat diperbesar tanpa batas, mungil untuk bentuk sederhana, dan dapat digayakan dengan CSS. Tidak cocok untuk fotografi.

Panduan keputusan cepat

• Fotografi → WebP (atau JPG untuk kompatibilitas maksimum)
• Logo atau ikon → SVG (atau PNG jika butuh salinan raster)
• Tangkapan layar atau grafik berteks → PNG (atau WebP)
• Butuh transparansi → PNG, WebP, atau SVG
• Animasi sederhana → WebP animasi

Setelah memilih format, panduan kompresi gambar kami membahas cara menurunkan ukuran. Konversi antar-format dengan konverter SVG dan pengubah ukuran gambar, dan kecilkan berkas dengan pengompres gambar — semuanya di browser Anda.