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.
File Anda diproses sepenuhnya di dalam browser web Anda menggunakan HTML5 Canvas dan WebAssembly. Tidak ada data sama sekali yang meninggalkan perangkat Anda.
Lewati antrean unggah dan unduh. Konversi terjadi secara lokal pada kecepatan penuh perangkat keras tanpa batasan server.
Kompatibel dengan spesifikasi resmi ISO, W3C, dan IETF untuk menjamin kompatibilitas hasil di berbagai sistem operasi modern.
Perbandingan Format & Spesifikasi Teknis
| Format Keluaran | Tipe MIME | Spesifikasi | Tipe |
|---|---|---|---|
| PNG Gambar | image/png | W3C-PNG | Portable Network Graphics |
| JPG Gambar JPEG | image/jpeg | ITU-T-T81-JPEG | Joint Photographic Experts Group |
| WebP Gambar | image/webp | RFC-6386-VP8 | Format Gambar Modern WebP dari Google |
| SVG Vektor | image/svg+xml | W3C-SVG | Scalable Vector Graphics |
| HEIC Foto | image/heic | ISO-IEC-23008-12-HEIF | High Efficiency Image Container |
| AVIF Gambar | image/avif | AOMEDIA-AV1-AVIF | Format Berkas Gambar AV1 |
| PSD Photoshop Document | image/vnd.adobe.photoshop | ADOBE-PSD-SPEC | Adobe Photoshop Document |
| PSB Photoshop Large Document | image/vnd.adobe.photoshop | ADOBE-PSD-SPEC | Adobe Photoshop Large Document |
| WMF Windows Metafile | image/x-wmf | MS-WMF-SPEC | Windows Metafile Vector Format |
| EMF Enhanced Metafile | image/x-emf | MS-EMF-SPEC | Enhanced Metafile Vector Format |
| JFIF Image | image/jpeg | ITU-T-T81-JPEG | JPEG File Interchange Format |
| TGA Truevision | image/x-tga | TGA-SPEC | Raster Tingkat Lanjut Truevision |
| PCX ZSoft | image/x-pcx | PCX-SPEC | ZSoft Paintbrush PCX Bitmap |
Spesifikasi Teknis & Rincian Codec
Aturan Keputusan Format Cepat
Gunakan WebP atau AVIF untuk situs web modern (30% lebih kecil daripada JPEG dengan dukungan transparansi). Gunakan JPG untuk foto di mana artefak kompresi kecil yang tidak 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 adalah matematika murni: ia menyimpan garis, kurva, dan warna matematis, memungkinkan ikon dan ilustrasi dirender dengan sangat tajam pada segala hal mulai dari layar ponsel hingga layar 8K dengan ukuran file yang 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 menghadirkan kualitas transparan yang identik dengan ukuran file hingga 40% lebih kecil.
0 byte diunggah ke server eksternal. Semua pemrosesan terjadi secara lokal di sandboks peramban Anda.