Apa format gambar terbaik untuk situs web?

"Format terbaik" bukanlah pertanyaan yang tepat sebelum Anda mengetahui jenis gambarnya. Sebuah situs web memuat beberapa jenis gambar yang sangat berbeda, dan masing-masing memiliki pilihan terbaik yang jelas:

• Foto (produk, orang, tempat): format lossy. AVIF menghasilkan ukuran terkecil, WebP adalah pilihan modern yang aman, dan JPG merupakan cadangan yang dapat ditampilkan oleh setiap browser.
• Logo, ikon, dan ilustrasi: SVG. Ini merupakan karya grafis vektor sehingga tetap tajam pada ukuran apa pun di layar mana pun, dan ukuran filenya biasanya sangat kecil. Gunakan format piksel sebagai cadangan hanya ketika suatu platform menolak SVG.
• Tangkapan layar, grafis UI, dan apa pun yang memiliki transparansi: PNG, atau WebP lossless. Warna datar dan tepian tajam merupakan jenis gambar yang dapat dikemas dengan baik oleh format lossless.
• Animasi pendek: WebP atau AVIF animasi, bukan GIF yang terbatas pada palet kecil dan menghasilkan file jauh lebih besar.
• Favicon: file ICO, idealnya disertai versi SVG atau PNG; lihat cara membuat favicon dari gambar.

Kesalahan klasik adalah menyimpan foto sebagai PNG. PNG menyimpan setiap piksel secara lossless, yang sempurna untuk logo tetapi sangat buruk untuk foto: ukuran filenya membengkak hingga beberapa kali ukuran JPG tanpa peningkatan yang terlihat.

Untuk foto, pilihannya bergantung pada seberapa jauh Anda dapat mengandalkan browser yang lebih baru:

• AVIF memberikan kompresi terbaik: pada kualitas web biasa, ukurannya sekitar 50% lebih kecil daripada JPEG dan 20–30% lebih kecil daripada WebP, serta mendukung HDR dan warna gamut lebar jika Anda memerlukannya. Chrome, Firefox, dan Safari semuanya dapat menampilkannya (Safari sejak versi 16.4, pada 2023). Kekurangannya adalah proses encoding yang lambat, terutama pada gambar besar, serta dukungan yang terbatas di perangkat lunak desktop dan perangkat lama.
• WebP adalah pilihan standar yang praktis: 25–35% lebih kecil daripada JPEG pada kualitas visual yang sama, mendukung transparansi, dan didukung oleh setiap browser utama sejak 2020. Beberapa aplikasi desktop dan alat lama masih tidak dapat membukanya, yang penting untuk file yang Anda serahkan kepada desainer, bukan untuk file yang Anda sajikan kepada pengunjung.
• JPG adalah cadangan universal. Format ini paling tidak efisien dari ketiganya, tetapi JPG yang disimpan pada kualitas sekitar 75–82 biasanya tidak dapat dibedakan dari gambar asli di layar, dan semua perangkat di web dapat menampilkannya.

Konfigurasi terbaik menyajikan AVIF kepada browser yang mendukungnya, WebP kepada browser lainnya, dan mempertahankan JPG untuk perangkat yang lebih lama. Jika Anda lebih suka memilih satu format, WebP dengan JPG sebagai cadangan dapat melayani hampir semua orang. Perbandingan langsung tersedia di WebP vs AVIF dan WebP vs JPG; untuk grafis alih-alih foto, lihat PNG vs JPG.

Setelah mengetahui format tujuan, proses konversinya cepat dan tidak pernah meninggalkan perangkat Anda. Konverter gambar EditItAll berjalan sepenuhnya di browser Anda:

1. Buka konverter dan masukkan gambar Anda, baik satu file maupun seluruh isi folder. File dalam satu batch diproses bersama-sama.
2. Pilih format keluaran: WebP atau AVIF untuk foto, serta PNG untuk grafis yang memerlukan transparansi. Tersedia jalur langsung untuk kebutuhan umum: JPG ke WebP, PNG ke WebP, JPG ke AVIF, dan PNG ke AVIF.
3. Atur kualitasnya. Tidak ada kolom ukuran target karena ukuran merupakan hasil keluaran. Setiap file menampilkan ukurannya sebelum dan sesudah diproses, jadi geser pengatur sedikit demi sedikit hingga angka dan gambarnya sama-sama terlihat tepat.
4. Unduh hasilnya satu per satu atau sebagai satu ZIP.

Tidak ada yang diunggah; Anda dapat memutus sambungan internet setelah halaman dimuat dan tetap melakukan konversi. Metadata EXIF dan GPS juga dihapus dari setiap gambar yang diekspor sehingga foto produk tidak mengungkapkan lokasi pengambilannya. Layanan ini gratis, tanpa akun dan tanpa tanda air. Sudah memiliki format yang tepat dan hanya perlu memperkecil ukurannya? Langsung gunakan kompresor gambar. Jika suatu platform mewajibkan versi piksel dari logo vektor, SVG ke PNG akan merendernya dalam ukuran apa pun yang Anda pilih.

Memilih format yang tepat memang penting, tetapi tiga kebiasaan berikut menghemat lebih banyak bita daripada yang bisa dicapai dengan beralih dari JPG ke AVIF:

• Ubah ukuran sesuai ukuran yang benar-benar Anda tampilkan. Foto dari kamera memiliki lebar berkali-kali lipat dibandingkan ruang yang ditempatinya di halaman, sementara setiap piksel tambahan tersebut diunduh lalu dibuang. Alat gambar EditItAll menyediakan batas dimensi maksimum opsional khusus untuk hal ini.
• Kompres sekali dari file asli. Setiap penyimpanan lossy membuang sedikit lebih banyak detail. Simpan file asli, ekspor salinan web darinya, dan jangan menyimpan ulang JPG menjadi WebP lalu AVIF secara berantai.
• Sajikan format modern dengan format cadangan. Tawarkan AVIF atau WebP terlebih dahulu dan biarkan browser lama menggunakan JPG atau PNG sebagai cadangan agar tidak ada pengunjung yang melihat gambar rusak.

Jika laporan kecepatan meminta Anda untuk "melakukan encoding gambar secara efisien" atau "menyajikan gambar dalam format generasi berikutnya", inilah tepatnya keputusan yang dimaksud: memperbaiki peringatan encoding gambar secara efisien memandu Anda menjalani prosesnya, sedangkan mengompres JPEG untuk web membahas pengatur kualitas secara mendetail. Panduan format lainnya tersedia dalam kelompok konversi gambar.