Dasar-dasar gambar
JPG, PNG, atau WebP? Cara memilih format gambar yang tepat
Jawaban singkat: pakai JPG (atau WebP) untuk foto, PNG (atau WebP lossless) untuk tangkapan layar, teks, dan apa pun dengan latar transparan, serta SVG untuk logo dan ikon yang digambar dari bentuk. Jika formulir, email, atau program lama rewel, JPG untuk foto dan PNG untuk grafik adalah pilihan teraman. Perlu format lain? Ubah dengan alat Refentra yang ditautkan, di browser Anda. Konversi tidak pernah mengembalikan detail yang sudah hilang.
File diproses secara lokal.
Di halaman ini
Dua pertanyaan menentukan hampir segalanya
1. Foto atau grafik? Foto terdiri dari peralihan warna yang halus, jadi format boleh membuang detail kecil yang tidak Anda sadari (kompresi lossy: JPG, WebP lossy). Tangkapan layar, diagram, logo, dan teks punya tepi tajam; kompresi lossy meninggalkan keburaman dan pinggiran warna di sana, sehingga butuh format lossless (PNG, WebP lossless).
2. Perlu transparansi atau animasi? JPG tidak bisa menyimpan piksel transparan dan tidak bisa beranimasi. PNG dan WebP bisa menyimpan transparansi; WebP dan AVIF juga bisa beranimasi. GIF adalah format animasi tertua dan paling tidak efisien.
Format mana untuk tugas apa
- Foto untuk situs web atau dibagikan
- WebP atau JPG (AVIF bila didukung). WebP lossy rata-rata 25–35 % lebih kecil daripada JPEG pada kualitas serupa.
- Tangkapan layar, teks, diagram
- PNG. WebP lossless rata-rata sekitar 26 % lebih kecil daripada PNG.
- Perlu latar transparan
- PNG atau WebP. JPG tidak punya transparansi.
- Logo atau ikon dari garis dan bentuk
- SVG. Dapat diskalakan ke ukuran apa pun tanpa buram; tidak untuk foto.
- Animasi pendek
- WebP atau AVIF beranimasi. GIF hanya bila tidak ada yang lain yang diterima.
- Formulir, email, program lama
- JPG untuk foto, PNG untuk grafik. Periksa dulu format yang diterima.
Sumber: MDN, Image file type and format guide (berbahasa Inggris), diperiksa pada 5 Oktober 2026. Penghematan adalah rata-rata dari halaman itu; berkas Anda akan berbeda. Refentra tidak berafiliasi dengan MDN.
Kesalahan yang merugikan kualitas atau ukuran
- Mengubah JPG ke PNG untuk «meningkatkan kualitas». Gambar tetap selembut semula, tetapi berkas jadi jauh lebih besar.
- Menyimpan tangkapan layar sebagai JPG. Teks jadi bertepi buram dan berpinggiran warna. Pakai PNG.
- Memakai PNG untuk foto. Berkas sering beberapa kali lebih besar daripada JPG tanpa keuntungan yang terlihat.
- Menyimpan ulang JPG yang sama berulang-ulang. Setiap penyimpanan kehilangan sedikit lagi. Simpan aslinya dan ekspor satu salinan sekali saja.
- Mengirim WebP di tempat yang hanya menerima JPG atau PNG. Ubah dulu, lihat di bawah.
Ubah di browser Anda
- JPG ke PNG dan PNG ke JPG (untuk area transparan, Anda mengonfirmasi warna latar).
- WebP ke JPG dan WebP ke PNG saat situs atau program menolak WebP.
- Gambar ke WebP dan gambar ke AVIF untuk berkas situs yang lebih kecil.
Untuk situs Anda sendiri
MDN menyarankan mengutamakan WebP atau AVIF untuk gambar raster dan menyediakan cadangan JPEG atau PNG untuk browser yang tidak dapat menampilkannya. Elemen picture melakukannya:
<picture>
<source srcset="photo.avif" type="image/avif" />
<source srcset="photo.webp" type="image/webp" />
<img src="photo.jpg" width="1200" height="800" alt="…" />
</picture>Atribut width dan height mencegah tata letak melompat saat gambar dimuat. Lihat juga memperbaiki peringatan gambar PageSpeed.
Sumber dan metode
Sifat format dan rekomendasi berasal dari halaman MDN yang ditautkan, diperiksa pada 5 Oktober 2026. Nama dan batasan alat diperiksa pada alat Refentra saat ini. Panduan ini disusun dan disunting dengan bantuan AI.