Format gambar dijelaskan: JPG, PNG, WebP, AVIF, GIF, BMP, dan ICO
Format mana yang dipakai untuk foto, logo, tangkapan layar, halaman web, cetak, dan media sosial, dan mengapa.
Setiap format gambar adalah sekumpulan kompromi antara ukuran file, kualitas, transparansi, animasi, dan kompatibilitas. Pilih yang salah dan Anda mendapat file yang membengkak atau logo yang kabur. Panduan ini menjabarkan keunggulan setiap format, dengan angka-angka yang Anda butuhkan untuk memutuskan.
Dua jenis kompresi
Kompresi lossless menyimpan setiap piksel persis dan hanya mencari cara lebih efisien untuk menulis data yang sama, seperti yang dilakukan ZIP. Buka dan simpan gambar lossless seribu kali dan tidak berubah. PNG, BMP, GIF, dan WebP lossless bekerja seperti ini.
Kompresi lossy membuang informasi, menyasar detail yang paling tidak sensitif bagi mata manusia: tekstur halus, perbedaan warna tipis, noise frekuensi tinggi. Hasilnya bisa sepersepuluh ukuran file lossless tanpa perbedaan terlihat, tapi setiap penyimpanan ulang kehilangan sedikit lagi. JPG, WebP lossy, dan AVIF bekerja seperti ini.
Aturan pertama langsung mengikuti: gunakan format lossy untuk foto, yang penuh noise dan tekstur yang tidak dirindukan siapa pun, dan format lossless untuk grafik dengan tepi tajam, warna datar, dan teks, di mana setiap piksel penting.
Format demi format
JPG (JPEG)
Format foto sejak 1992. Lossy, warna 8-bit, tanpa transparansi, tanpa animasi. Didukung oleh semua yang pernah dibuat. Pengaturan kualitas dari 0 sampai 100 mengendalikan kompromi-nya; 80 sampai 85 adalah titik ideal sehari-hari. Kelemahannya adalah "kotak-kotak" yang terlihat pada kualitas rendah, ringing di sekitar tepi tajam, dan tidak adanya transparansi. Gunakan untuk foto yang pergi ke mana pun di luar browser: email, cetak, marketplace, perangkat lunak lama.
PNG
Lossless, hingga warna 16-bit, transparansi alfa penuh, tanpa animasi (APNG ada tapi jarang). Pilihan tepat untuk logo, ikon, tangkapan layar, diagram, grafik, dan gambar apa pun yang butuh latar transparan. Kelemahannya adalah ukuran: foto PNG bisa sepuluh kali ukuran JPG. Jangan pernah gunakan PNG untuk foto di situs web.
WebP
Format web Google, kini didukung setiap browser terkini. Punya mode lossy dan lossless, mendukung transparansi di keduanya, dan mendukung animasi. WebP lossy sekitar 25 sampai 35% lebih kecil dari JPG pada kualitas setara; WebP lossless sekitar 25% lebih kecil dari PNG. Ini format serbaguna terbaik untuk apa pun yang ditampilkan di browser. Kelemahannya adalah kompatibilitas di luar browser: perangkat lunak desktop lama, beberapa klien email, dan banyak formulir unggah masih menolaknya.
AVIF
Lebih baru lagi, berbasis codec video AV1. Biasanya 50% lebih kecil dari JPG dan 20% lebih kecil dari WebP pada kualitas setara, dengan transparansi, animasi, dan dukungan warna lebar. Didukung semua browser terkini sejak 2024. Pengenkodean lambat, terutama di browser, dan dukungan di perangkat lunak non-browser masih tidak merata. Gunakan saat ukuran file kritis dan Anda mengendalikan lingkungan tampilan; sajikan fallback WebP atau JPG di sampingnya.
GIF
Dari 1987. Terbatas pada 256 warna per frame, transparansi satu warna, dan animasi, yang menjadi satu-satunya alasan ia masih ada di mana-mana. Buruk untuk foto, cukup untuk grafik sederhana, tak terkalahkan untuk kompatibilitas. Untuk gambar diam, PNG melakukan semua yang dilakukan GIF tapi lebih baik; untuk animasi, MP4 atau WebP animasi jauh lebih kecil.
BMP
Bitmap Windows tak terkompresi. File sangat besar, tanpa transparansi dalam penggunaan umum, tanpa kompresi. Bertahan hanya karena sangat sederhana untuk dibaca, yang penting bagi perangkat tertanam dan perangkat lunak lawas. Jangan pernah gunakan untuk web atau penyimpanan.
ICO
Format ikon Windows dan favicon browser. Berisi beberapa ukuran gambar yang sama dalam satu file agar yang tepat bisa dipilih untuk tab, bookmark, atau pintasan desktop. Dibuat dari PNG dengan alat PNG ke ICO.
Tabel perbandingan
| Format | Kompresi | Transparansi | Animasi | Ukuran foto vs JPG | Kompatibilitas |
|---|---|---|---|---|---|
| JPG | Lossy | Tidak | Tidak | 1× | Universal |
| PNG | Lossless | Ya, alfa penuh | Tidak | 5 sampai 10× | Universal |
| WebP | Keduanya | Ya, alfa penuh | Ya | 0,65 sampai 0,75× | Semua browser, kebanyakan aplikasi modern |
| AVIF | Keduanya | Ya, alfa penuh | Ya | 0,5× | Semua browser terkini, sedikit aplikasi |
| GIF | Lossless, 256 warna | Ya, on/off | Ya | 2 sampai 4× (dan kualitas lebih buruk) | Universal |
| BMP | Tidak ada | Tidak | Tidak | 20 sampai 30× | Universal tapi jarang dipakai |
Format mana untuk pekerjaan mana
- Foto di situs web: WebP pada kualitas 75 sampai 85, dengan fallback JPG jika harus mendukung browser sangat lama. AVIF jika Anda ingin halaman sekecil mungkin.
- Logo dan ikon di situs web: SVG jika punya; jika tidak PNG atau WebP lossless.
- Tangkapan layar: PNG. Kompresi lossy mengaburkan teks.
- Lampiran email: JPG untuk foto, PNG untuk grafik. Jangan kirim WebP; terlalu banyak klien email salah menanganinya.
- Cetak: JPG kualitas 95 atau PNG/TIFF, pada 300 piksel per inci ukuran cetak.
- Media sosial: JPG atau PNG; setiap platform mengompres ulang saat unggah, jadi unggah pada kualitas tinggi dan dimensi yang tepat.
- Potongan produk transparan: PNG untuk kompatibilitas maksimum, WebP untuk web.
- Favicon: ICO plus PNG untuk layar utama ponsel.
Mengonversi di antaranya
Setiap konversi di situs ini berjalan di browser Anda. Rute paling umum adalah PNG ke WebP dan JPG ke WebP untuk web, WebP ke JPG dan WebP ke PNG untuk kompatibilitas, dan PNG ke JPG untuk memperkecil foto yang diekspor dalam format yang salah. Kompresor gambar menangani semuanya dengan dukungan batch.