Format Gambar: Perbandingan WebP, PNG, JPG & SVG
Memilih format gambar yang salah dapat memperlambat waktu muat halaman atau membuat grafis Anda buram. Berikut adalah perbandingan format web modern dalam hal kompresi, transparansi, dan ketajaman.
Berkas diproses secara lokal di peramban Anda menggunakan WebAssembly dan API HTML5. Berkas tidak pernah meninggalkan perangkat Anda, sehingga tidak ada unggahan ke server atau penyimpanan berkas pihak ketiga.
Mulai mengonversi secara langsung di perangkat Anda sendiri - tanpa menunggu unggah, tanpa antrean unduh, dan tanpa pembatasan kecepatan dari server jarak jauh.
Gunakan setiap alat yang tersedia tanpa membuat akun, membayar paket, atau menghadapi batas ukuran berkas buatan. Lakukan konversi sesering yang mampu ditangani peramban dan perangkat Anda.
Perbandingan Format & Spesifikasi Teknis
| Format Keluaran | Tipe MIME | Spesifikasi | Tipe |
|---|---|---|---|
| PNG Gambar | image/png | W3C-PNG | Format Grafik Jaringan Portabel |
| JPG Gambar JPEG | image/jpeg | ITU-T-T81-JPEG | Format gambar JPEG terkompresi. |
| WebP Gambar | image/webp | RFC-6386-VP8 | Format Gambar Modern WebP dari Google |
| SVG Vektor | image/svg+xml | W3C-SVG | Grafik vektor yang dapat diperbesar atau diperkecil tanpa kehilangan ketajaman. |
| HEIC Foto | image/heic | ISO-IEC-23008-12-HEIF | Kontainer gambar dengan efisiensi tinggi. |
| AVIF Gambar | image/avif | AOMEDIA-AV1-AVIF | Format Berkas Gambar AV1 |
| PSD Dokumen Photoshop | image/vnd.adobe.photoshop | ADOBE-PSD-SPEC | Format dokumen Adobe Photoshop. |
| PSB Dokumen Besar Photoshop | image/vnd.adobe.photoshop | ADOBE-PSD-SPEC | Dokumen Besar Adobe Photoshop |
| WMF Format vektor Windows | image/x-wmf | MS-WMF-SPEC | Format grafis vektor Windows Metafile. |
| EMF Format vektor Windows | image/x-emf | MS-EMF-SPEC | Format grafis vektor Enhanced Metafile untuk Windows. |
| JFIF Gambar | image/jpeg | ITU-T-T81-JPEG | Format Pertukaran Berkas JPEG |
| TGA Truevision | image/x-tga | TGA-SPEC | Gambar Raster Truevision Targa |
| PCX ZSoft | image/x-pcx | PCX-SPEC | Bitmap PCX dari perangkat lunak ZSoft Paintbrush. |
| PDF Dokumen | application/pdf | ISO-32000-2 | Format Dokumen Portabel |
Spesifikasi Teknis & Rincian Codec
Panduan Cepat Memilih Format
Gunakan WebP atau AVIF untuk situs web modern (30% lebih kecil daripada JPEG dengan dukungan transparansi). Gunakan JPG untuk foto jika artefak kompresi yang kecil dan nyaris tak terlihat tidak menjadi masalah. Gunakan PNG untuk tangkapan layar, grafis antarmuka pengguna, dan ilustrasi yang memerlukan teks tajam berbasis piksel. Gunakan SVG untuk logo dan ikon yang memerlukan skala tak terbatas.
Raster vs. Vektor: Mengapa SVG Tidak Pernah Buram
Gambar raster (JPG, PNG, WebP) adalah kisi-kisi piksel warna tetap - jika Anda memperbesarnya terlalu jauh, gambar akan menjadi buram atau berbintik. SVG sepenuhnya berbasis matematika: format ini menyimpan garis, kurva, dan warna dalam bentuk matematis, sehingga ikon dan ilustrasi dapat ditampilkan dengan sangat tajam pada berbagai perangkat, dari layar ponsel hingga layar 8K, dengan ukuran file kecil.
Mitos: 'DPI Lebih Tinggi Berarti Kualitas Gambar Web Lebih Baik'
DPI (dots per inch) murni merupakan instruksi pencetakan fisik dan sepenuhnya diabaikan oleh peramban web. Pada ponsel dan monitor komputer, ketajaman gambar ditentukan sepenuhnya oleh dimensi piksel (misalnya, 1920x1080) dan kepadatan layar, bukan metadata DPI yang disematkan.
Transparansi Alfa: PNG vs. WebP
JPG tradisional sama sekali tidak mendukung transparansi - latar belakang transparan berubah menjadi putih atau hitam pekat. PNG mempelopori transparansi alfa 8-bit yang bersih, tetapi WebP kini menghasilkan kualitas transparansi yang setara dengan ukuran file hingga 40% lebih kecil.
0 byte diunggah ke server eksternal. Semua pemrosesan berlangsung secara lokal di sandbox browser Anda.