Memilih Format Gambar yang Tepat untuk Web

Tiga Pertanyaan yang Perlu Dijawab Terlebih Dahulu

Di situs web sungguhan, pilihan format untuk setiap gambar bergantung pada tiga pertanyaan:

1. Apa isi gambarnya? Foto cocok dengan format lossy seperti JPG, WebP lossy, dan AVIF, karena kesalahan kecil tersamarkan oleh detail alami. Tangkapan layar, teks, bagan, dan grafis berwarna datar memiliki tepi tajam, dan di sana kompresi lossy dapat meninggalkan halo yang terlihat. Karena itu, gambar seperti ini lebih cocok dengan format lossless (PNG, WebP lossless) atau, jika dibuat dari bentuk-bentuk vektor, SVG.
2. Apakah gambar memerlukan transparansi atau animasi? JPG tidak mendukung keduanya. PNG, WebP, dan AVIF dapat menyimpan kanal alfa penuh dengan tepi yang lembut. Piksel GIF hanya bisa transparan sepenuhnya atau tidak transparan sama sekali, sehingga tepi yang melengkung dapat tampak bergerigi atau berpinggiran di atas latar berwarna. GIF, WebP, AVIF, dan APNG (PNG animasi) dapat memuat animasi, tetapi video pendek sering kali jauh lebih kecil daripada GIF.
3. Di mana gambar akan dipublikasikan? Di halaman HTML milik Anda sendiri, Anda dapat menyajikan beberapa format. Sistem manajemen konten (CMS), toko online, atau formulir unggah menentukan sendiri format yang diterimanya dan mungkin mengonversi file secara otomatis, jadi periksa dokumentasinya yang terbaru. Program email jauh lebih beragam daripada browser, sehingga JPG dan PNG lebih aman untuk newsletter.

Untuk cara kerja masing-masing format, lihat JPG vs PNG vs WebP vs AVIF.

Format Berdasarkan Isi: Tabel Keputusan

Saat menyajikan AVIF atau WebP di halaman Anda sendiri, sediakan juga versi JPG atau PNG untuk browser dan aplikasi yang tidak dapat menampilkannya. Jika sebuah platform hanya menerima satu file, format di kolom cadangan biasanya menjadi pilihan yang aman. Favicon memiliki aturannya sendiri; lihat Ukuran, Format, dan Tag HTML Favicon.

Untuk loop bergaya GIF di halaman web, elemen <video> tanpa suara dengan atribut autoplay, loop, muted, dan playsinline sering dipakai sebagai pengganti, karena browser umumnya mengizinkan video tanpa suara diputar otomatis. Di email, sebagian versi desktop Outlook hanya menampilkan frame pertama GIF animasi, jadi letakkan pesan utama di frame tersebut.

Menyajikan WebP atau AVIF dengan Fallback

Di halaman yang HTML-nya Anda tulis sendiri, elemen <picture> memungkinkan setiap browser mengambil format pertama yang didukungnya:

<picture>
  <source srcset="/img/pasta-1600.avif" type="image/avif">
  <source srcset="/img/pasta-1600.webp" type="image/webp">
  <img src="/img/pasta-1600.jpg" alt="Semangkuk pasta saus tomat" width="1600" height="1200">
</picture>

Browser membaca elemen <source> secara berurutan dan melewati elemen yang type-nya tidak didukung. Elemen <img> wajib ada: elemen ini membawa teks alt serta lebar dan tinggi yang memungkinkan browser menyiapkan ruang untuk gambar, dan file-nya ditampilkan jika tidak ada source yang cocok. Dengan CSS seperti img { max-width: 100%; height: auto; }, gambar tetap mengecil agar muat di layar sempit tanpa mengubah proporsinya. Untuk sekaligus menyajikan beberapa ukuran, cantumkan setiap file beserta lebarnya di srcset dan tambahkan atribut sizes, seperti yang dijelaskan dalam Mengubah Ukuran Gambar: Piksel, Rasio Aspek, dan DPI.

Banyak CMS dan CDN gambar dapat membuat salinan WebP atau AVIF dan memilih salah satunya untuk setiap pengunjung. Jika sistem yang Anda gunakan dapat melakukannya, unggah JPG atau PNG berkualitas tinggi dan biarkan sistem itu yang mengonversi, alih-alih file yang sudah Anda kompres dengan kuat, agar gambar tidak dikompresi dua kali.

Contoh Kasus: Gambar-Gambar dalam Satu Artikel

Misalkan sebuah artikel resep memuat tiga gambar, dan lebar kolom teksnya maksimal 760 piksel CSS.

• Foto utama. Foto asli dari ponsel berukuran 4032 × 3024 piksel, sekitar 12,2 megapiksel. Kolom selebar 760 piksel pada layar dengan dua piksel perangkat per piksel CSS memerlukan lebar sekitar 1.520 piksel, sehingga ukuran 1600 × 1200 mempertahankan proporsi 4:3 dengan 1,92 megapiksel, sekitar 16% dari aslinya. Ubah ukurannya terlebih dahulu, lalu simpan sebagai AVIF atau WebP beserta JPG sebagai cadangan; foto asli berukuran penuh memiliki lebih dari enam kali jumlah piksel versi 1600 × 1200, dan sebagian besar piksel itu hanya akan dibuang browser saat memperkecil gambar.
• Logo dengan latar transparan. File PNG dari desainer berukuran 1000 × 500 piksel dan ditampilkan selebar 200 piksel CSS, sehingga ukuran 400 × 200 sudah mencukupi untuk layar dengan dua piksel perangkat per piksel CSS. Tetap gunakan PNG atau WebP; JPG akan mengisi area transparan dengan warna solid, yang tampak sebagai kotak di header berwarna. Jika desainer dapat mengekspor SVG, itu lebih baik lagi.
• Tangkapan layar aplikasi timer. Isinya teks dan warna datar, jadi simpan sebagai PNG. JPG dapat menimbulkan bintik-bintik di sekitar huruf, dan pembaca lebih mudah menyadarinya daripada kesalahan kecil pada foto.

Mengonversi File dengan Konverter Gambar LeedyBox

Konverter Gambar mengubah format satu atau beberapa gambar di browser Anda, tanpa mengunggah data gambar ke LeedyBox.

1. Klik "Pilih File atau Seret & Lepas di Sini", atau seret file PNG, JPG, WebP, BMP, GIF, atau AVIF ke area tersebut. Jenis file lain, seperti HEIC atau SVG, serta file yang tidak dapat dibaca browser Anda ditolak dengan sebuah pesan.
2. Setiap file mendapat menu formatnya sendiri (berlabel "To:" di layar yang lebih lebar), yang awalnya diatur ke JPG. Pilih JPG, PNG, WEBP, BMP, AVIF, atau ICO untuk masing-masing file, atau untuk semua file sekaligus melalui "Atur Semua Format Menjadi..." di bagian Opsi Batch.
3. Klik "Konversi & Unduh". Satu file disimpan dengan nama seperti logo_converted.webp; beberapa file diunduh dalam leedybox_converted_images.zip.

• Dimensi piksel tidak berubah, kecuali untuk ICO. Ubah ukurannya terlebih dahulu dengan alat Ubah Ukuran Gambar, atau gunakan opsi "Batasi juga lebar dan tinggi" di alat Kompres Gambar.
• Untuk JPG, WebP, dan AVIF, konverter meminta browser menyimpan dengan kualitas 0,92 pada skala 0 sampai 1, dan tidak ada penggeser kualitas. Pengaturan ini lebih mengutamakan detail daripada ukuran file. Artinya juga, WebP disimpan secara lossy: tidak ada opsi WebP lossless, jadi konversikan tangkapan layar dan grafis berisi teks ke PNG. Untuk file yang lebih kecil, alat Kompres Gambar menyediakan penggeser kualitas (default 75) dan target ukuran file; lihat Penjelasan Pengaturan Kompresi Gambar.
• File JPG dan file BMP dari konverter ini tidak memiliki transparansi, sehingga area transparan menjadi putih. File BMP tersebut juga tidak terkompresi, yaitu 3 byte per piksel (setiap baris diberi padding hingga kelipatan 4 byte) ditambah header 54 byte: gambar 1200 × 800 menjadi 2.880.054 byte (sekitar 2,9 MB), apa pun isinya, sehingga BMP tidak cocok untuk halaman web.
• File ICO memuat satu gambar PNG dan mempertahankan transparansi. Gambar yang salah satu sisinya lebih dari 256 piksel diperkecil agar muat dalam 256 × 256, sehingga logo 1000 × 500 menjadi 256 × 128; gambar yang lebih kecil tetap berukuran sama. Untuk favicon.ico dengan ukuran 16, 32, dan 48 piksel beserta ikon PNG dan Apple touch icon, gunakan Generator Favicon.
• AVIF hanya dapat dipilih jika browser Anda dapat membuat file AVIF, dan saat ini banyak browser belum mampu melakukannya; jika tidak bisa, opsi ini tercantum sebagai "AVIF (tidak didukung browser ini)". Jika browser tidak dapat membuat format yang dipilih (output WebP juga bergantung pada browser), sebuah pesan akan muncul dan tidak ada yang disimpan, alih-alih data PNG disimpan dengan ekstensi yang salah. Jika Anda mengonversi beberapa file, satu kegagalan seperti ini menghentikan seluruh batch, sehingga tidak ada file ZIP yang dibuat.
• Setiap gambar digambar ulang dan di-encode dari awal, sehingga data EXIF, lokasi GPS, dan profil warna dari file asli tidak ikut terbawa, dan GIF, WebP, atau AVIF animasi menjadi gambar diam berisi satu frame. Konverter ini tidak membuat file SVG, GIF, atau file animasi.

Masalah Umum dan Cara Mengatasinya

• Logo transparan memiliki kotak putih atau hitam di sekelilingnya. Kemungkinan logo tersebut disimpan sebagai JPG atau sebagai BMP tanpa transparansi. Gunakan PNG atau WebP; lihat mengapa transparansi hilang pada JPG.
• File PNG jauh lebih besar daripada JPG asalnya. PNG menyimpan setiap piksel dengan persis, termasuk noise dan artefak kompresi JPG, dan konversi tidak mengembalikan detail yang sudah hilang dari JPG. Gunakan WebP atau JPG untuk foto.
• Formulir unggah menolak WebP atau AVIF. Sebagian formulir hanya menerima JPG dan PNG. Konversikan foto ke JPG dan grafis transparan ke PNG. Mengganti ekstensi pada nama file tidak mengubah formatnya.
• File WebP hampir tidak lebih kecil daripada JPG, atau malah lebih besar. JPG aslinya mungkin sudah dikompresi dengan kuat, sementara kualitas 0,92 yang dipakai konverter mempertahankan banyak detail, termasuk artefak JPG itu sendiri, yang juga memakan byte untuk disimpan. Jika file tetap terlalu besar dalam kedua format, bisa jadi gambarnya masih berukuran penuh seperti dari kamera. Ubah ukurannya ke ukuran tampilan, lalu gunakan alat Kompres Gambar dan bandingkan hasilnya.
• Warna tampak lebih pudar daripada aslinya. Konverter menggambar setiap gambar pada kanvas browser, yang secara default bekerja dalam sRGB, dan tidak mempertahankan profil warna asli. Foto dalam ruang warna yang lebih luas seperti Display P3 atau Adobe RGB dapat kehilangan sebagian warnanya yang paling jenuh, dan perbedaannya paling terlihat di layar bergamut lebar. Ekspor salinan sRGB dari editor foto Anda, periksa hasilnya di sana, lalu konversikan salinan tersebut.
• Foto HEIC dari ponsel tidak diterima. HEIC tidak termasuk dalam daftar format konverter. Banyak ponsel dapat mengekspor atau membagikan foto sebagai JPG; konversikan salinan tersebut.

Yang Perlu Diperiksa Sebelum Memublikasikan

• Buka halaman di dua browser dan di ponsel. Jika memakai <picture>, uji juga fallback-nya dengan menghapus sementara source AVIF dan WebP.
• Bandingkan file baru dengan file asli pada ukuran sebenarnya, dengan memperhatikan wajah, teks, dan gradasi.
• Di panel Network pada alat pengembang browser, periksa file mana yang diunduh dan berapa ukurannya.
• Jika situs Anda memiliki mode gelap, periksa gambar transparan di atas latar terang maupun gelap.
• Simpan file asli dan lakukan konversi dari file tersebut; menyimpan ulang file lossy menambahkan kesalahan baru di atas kesalahan lama.

Pertanyaan Umum