Konverter Format Gambar

Cara kerja konversi format gambar

Saat Anda menambahkan gambar, browser mendekodenya menjadi piksel mentah dengan createImageBitmap(). Alat ini menggambar piksel tersebut ke sebuah canvas HTML pada resolusi penuh, lalu memanggil canvas.toBlob() dengan tipe MIME pilihan Anda — image/png, image/jpeg, atau image/webp — untuk mengodekannya ulang ke format baru. Codec gambar milik browser sendiri yang melakukan pengodean, sehingga keluarannya sesuai standar dan berkasnya tidak pernah meninggalkan tab Anda.

• Ke PNG — lossless: piksel yang persis sama dipertahankan, termasuk transparansi.
• Ke JPG — lossy: piksel dikompresi ulang pada pengaturan kualitas Anda, dan setiap transparansi diratakan ke warna latar yang Anda pilih (putih secara bawaan).
• Ke WebP — lossy pada kualitas < 100, dengan transparansi tetap terjaga. Biasanya berkas terkecil dari ketiganya pada kualitas yang setara.

PNG vs JPG vs WebP — mana yang sebaiknya Anda pilih?

Patokan umum: WebP untuk situs web Anda sendiri (paling kecil), PNG saat Anda butuh transparansi atau teks yang tajam, dan JPG untuk foto serta di mana pun sebuah formulir menuntutnya.

Konversi yang umum

• PNG ke JPG — perkecil tangkapan layar besar atau ekspor untuk formulir unggahan yang hanya menerima JPEG. Ingat, warna latar menggantikan transparansi apa pun.
• WebP ke PNG — ubah WebP yang Anda unduh menjadi PNG yang didukung di mana-mana, untuk perangkat lunak lama atau editor yang tidak bisa membuka WebP.
• WebP ke JPG — konversikan gambar web modern menjadi JPEG untuk email, perpesanan, atau CMS lawas.
• JPG ke WebP — kodekan ulang foto ke WebP untuk memangkas bobot halaman dan memperbaiki Core Web Vitals di situs Anda.
• JPG ke PNG — dapatkan salinan lossless untuk disunting tanpa menumpuk artefak JPEG (ini tidak akan memulihkan detail yang sudah hilang dari JPG).

Tips untuk hasil terbaik

• Butuh berkas lebih kecil, bukan format baru? Gunakan Kompresor Gambar atau Kompres ke Ukuran Target untuk mencapai batas KB yang persis.
• Butuh dimensi berbeda? Konversikan di sini, lalu ubah ukurannya — atau ubah ukuran lebih dulu jika Anda juga mengubah ukuran pikselnya.
• Foto HEIC dari iPhone? Gunakan konverter khusus HEIC ke JPG — HEIC memerlukan dekoder khusus yang tidak disertakan alat ini.
• Kualitas 80–90 untuk foto JPG/WebP terlihat identik dengan 100 tetapi jauh lebih kecil. Turunkan lebih rendah hanya jika Anda harus memenuhi anggaran ukuran yang ketat.
• Ingin mempertahankan transparansi? Konversikan ke PNG atau WebP, jangan pernah ke JPG.

Panduan singkat mengenal format-formatnya

Setiap format yang Anda konversikan diciptakan untuk memecahkan masalah tertentu, dan mengetahui latar belakangnya membuat pilihan menjadi jelas.

• GIF (1987) — dibuat oleh CompuServe, dipimpin Steve Wilhite. Format ini memperkenalkan animasi web dan transparansi sederhana hidup/mati (1-bit), tetapi paletnya terbatas pada 256 warna. Ia memakai kompresi LZW, dan paten atas LZW (dipegang Unisys) justru menjadi alasan PNG diciptakan. Paten-paten itu kedaluwarsa pada 2004; kini GIF sebenarnya hanya layak dipakai untuk animasi lawas yang pendek.
• JPEG (1992) — standar ISO/IEC 10918 dari Joint Photographic Experts Group. Kompresi lossy-nya yang berorientasi foto membuat fotografi digital menjadi praktis dan telah didukung secara universal selama lebih dari tiga dekade, itulah sebabnya formulir unggahan masih memintanya.
• PNG (1996) — sebuah W3C Recommendation yang dibangun oleh kelompok sukarelawan khusus sebagai pengganti GIF yang bebas royalti ketika Unisys mulai menegakkan paten LZW. Format ini lossless, mendukung kanal alpha penuh dan truecolor, tetapi tidak punya animasi bawaan.
• WebP (2010) — format milik Google, diturunkan dari codec video VP8. Ia mendukung lossy dan lossless, mendukung transparansi di kedua mode, serta menambahkan animasi — benar-benar serbaguna.
• AVIF (2019) — yang termuda dari kelompok ini, dibangun di atas codec video AV1 bebas royalti dari Alliance for Open Media. Umumnya ia mengompresi lebih baik daripada semua format di atas dan menambahkan HDR, wide color, serta kedalaman hingga 12-bit.

Anda juga akan menjumpai BMP (bitmap tanpa kompresi lawas dari Microsoft, besar tetapi lossless) dan TIFF (wadah fleksibel yang dibuat Aldus pada 1986, hingga kini favorit arsip di dunia cetak dan pemindaian).

Apa yang sebenarnya dilakukan kompresi lossy

JPEG, WebP, dan AVIF bersifat lossy: keduanya membuang detail yang kemungkinan tidak disadari mata Anda demi berkas yang jauh lebih kecil. JPEG adalah contoh paling jelas. Ia membagi gambar menjadi blok piksel 8×8, menjalankan tiap blok melalui discrete cosine transform (DCT) untuk menyatakannya sebagai frekuensi, lalu mengkuantisasi frekuensi tersebut — membuang yang halus. Slider "kualitas" sebenarnya mengendalikan seberapa agresif kuantisasi itu terjadi. Ia juga memakai chroma subsampling (biasanya 4:2:0): karena kita melihat kecerahan jauh lebih tajam daripada warna, JPEG mempertahankan detail kecerahan penuh tetapi memangkas separuh resolusi warna.

Rancangan itu punya konsekuensi yang terlihat. Pada kualitas rendah Anda akan melihat blocking (kisi 8×8 mulai kentara) dan ringing atau "mosquito noise" — bintik-bintik berkedip di sekitar tepi tajam dan teks. Itulah persis alasan JPEG buruk untuk tangkapan layar, logo, dan line art, di mana tepi adalah segalanya. Dua fakta lain yang perlu diketahui:

• Generation loss itu nyata. Setiap kali Anda membuka dan menyimpan ulang JPEG, ia didekode dan dikuantisasi ulang, sehingga artefaknya menumpuk. Menyunting foto lewat beberapa kali penyimpanan JPEG merusaknya secara kasatmata; bekerjalah dalam format lossless dan ekspor ke JPEG sekali saja di akhir.
• Mengonversi JPEG ke PNG tidak bisa mengembalikan detail yang hilang. Salinan PNG dari sebuah JPEG bersifat lossless sejak titik itu, tetapi ia mempertahankan artefak yang sudah terpanggang dalam JPEG — ia hanya menghentikannya agar tidak makin parah.
• Progressive JPEG menyimpan gambar sebagai pindaian dari kasar ke halus, sehingga pratinjau buram muncul cepat lalu menajam — praktis pada koneksi lambat dengan ukuran berkas yang mirip baseline.

Kedalaman warna dan kanal alpha

"Transparansi" hanyalah satu kolom pada tabel perbandingan di atas, tetapi perbedaan mendasarnya jauh lebih dalam. PNG dapat menyimpan gambar sebagai palet terindeks (hingga 256 warna, seperti GIF), sebagai truecolor 24-bit (8 bit masing-masing untuk merah, hijau, dan biru — sekitar 16,7 juta warna), atau sebagai RGBA 32-bit, yang menambahkan kanal alpha 8-bit untuk transparansi yang halus dan bervariasi. Alpha yang bervariasi itulah yang membuat logo PNG bisa punya tepi lembut ber-anti-alias yang menyatu dengan latar apa pun.

Sebaliknya, JPEG selalu 8 bit per kanal dan sama sekali tidak punya kanal alpha — ia benar-benar tidak bisa menyimpan transparansi. Satu keterbatasan itulah alasan konverter ini harus meratakan piksel tembus pandang ke sebuah warna latar ketika Anda mengonversi ke JPG. WebP dan AVIF menghindari seluruh masalah tersebut: keduanya mempertahankan kanal alpha bahkan dalam mode lossy-nya, sehingga memberi Anda transparansi sekaligus berkas yang kecil.

AVIF, WebP, dan web modern

Untuk situs web Anda sendiri, format-format baru jelas lebih unggul. Google melaporkan berkas WebP umumnya sekitar 25–34% lebih kecil daripada JPEG pada kualitas setara, dan web.dev mencatat AVIF dapat lebih dari 50% lebih kecil daripada JPEG dalam beberapa kasus, dengan lebih sedikit artefak blocking dan lebih sedikit rembesan warna di sekitar tepi keras. Gambar yang lebih kecil dimuat lebih cepat, dan karena gambar kerap menjadi elemen Largest Contentful Paint sebuah halaman, memilih format modern langsung memperbaiki Core Web Vital tersebut.

Dukungan browser bukan lagi hambatan seperti dulu. WebP berfungsi di semua browser saat ini (Safari menambahkannya pada 2020). AVIF didukung di Chrome, Firefox, Safari, dan — belakangan — Edge, mencakup mayoritas besar pengguna. Lalu mengapa tidak mengonversi semuanya ke AVIF? Ada beberapa alasan jujur: sebagian perangkat lunak lama, editor gambar, sistem manajemen konten, klien email, dan formulir unggahan masih belum menerima WebP atau AVIF, serta pengodean AVIF lebih lambat dan lebih rakus CPU. Pola yang aman adalah menyajikan format modern dengan cadangan, bukan memaksakan satu format di mana-mana:

Cara rapi untuk menyajikannya adalah elemen HTML <picture>. Daftarkan sumber-sumber modern Anda dengan atribut type dan biarkan browser memilih yang pertama ia pahami, hingga jatuh ke <img> yang universal:

• <source type="image/avif"> — dipakai browser yang mendukung AVIF
• <source type="image/webp"> — cadangan berikutnya
• <img src="photo.jpg"> — bawaan yang terjamin untuk selebihnya

Ini memberi pengunjung modern berkas terkecil sementara semua orang lain tetap melihat gambarnya — dan konversi yang Anda lakukan di sini adalah cara membuat sumber-sumber alternatif itu.

Mengapa berkas "hasil konversi" bisa keluar lebih besar

Konversi mengubah wadah dan skema kompresinya, bukan kerumitan bawaan gambarnya — jadi ukuran berkas bisa bergerak ke mana saja, dan orang kerap terkejut ketika ia justru membesar. Penyebab yang biasa:

• Foto ke PNG. PNG bersifat lossless, sehingga ia harus merekam setiap piksel foto yang sedikit berbeda dengan setia. Foto JPEG berukuran 200 KB bisa membengkak menjadi beberapa megabyte sebagai PNG. PNG bersinar pada grafis datar dan teks, bukan pada foto bernada kontinu.
• Kualitas disetel terlalu tinggi. JPG atau WebP pada kualitas 100 mempertahankan detail yang tak dapat Anda lihat dan membuat berkasnya membengkak. Untuk foto, kualitas 80–90 terlihat identik dan jauh lebih kecil.
• Sumber yang sudah dioptimalkan. Jika aslinya sudah terkompresi dengan baik, mengodekan ulang ke format lossy lain mungkin tidak membantu dan bahkan bisa menambah sedikit overhead.

Solusinya adalah mencocokkan format dengan kontennya: simpan foto dalam format lossy (JPG, WebP, atau AVIF), sisakan PNG untuk grafis dan transparansi, dan gunakan Kompresor Gambar khusus ketika tujuan Anda sebenarnya adalah berkas yang lebih kecil, bukan format yang berbeda.

Animasi: GIF, APNG, WebP, dan AVIF

Hanya sebagian format ini yang bisa bergerak, dan itu penting jika sumber Anda beranimasi. GIF adalah format web beranimasi yang asli, tetapi ia dibatasi 256 warna per frame dan menghasilkan berkas besar. PNG tidak punya animasi dalam spesifikasi intinya — itu memerlukan ekstensi APNG yang terpisah. WebP dan AVIF sama-sama mendukung animasi warna penuh pada sepersekian ukuran GIF, itulah sebabnya klip pendek berulang makin sering disajikan sebagai WebP beranimasi. Satu peringatan praktis untuk alat ini dan konverter berbasis canvas mana pun: menggambar ulang lewat canvas menangkap satu frame saja, sehingga mengonversi GIF beranimasi ke format statis hanya menyisakan satu frame. Untuk mempertahankan gerakan, simpanlah dalam format yang mendukung animasi dari awal sampai akhir.

EXIF, GPS, dan sisi privasi

Foto langsung dari ponsel atau kamera membawa blok tersembunyi berisi metadata EXIF: model kamera dan lensa, tanggal dan waktu persisnya, pengaturan yang dipakai — dan kerap koordinat GPS tempat foto itu diambil. Data lokasi tersebut adalah risiko privasi yang nyata ketika Anda memposting foto secara publik, karena ia bisa mengungkap rumah Anda atau sekolah anak. Efek samping yang berguna dari pengodean ulang lewat canvas browser, cara alat ini bekerja, adalah keluarannya berupa gambar bersih tanpa blok EXIF — detail kamera dan lokasi GPS terhapus otomatis. Itu keuntungan privasi saat berbagi daring. Sisi lainnya: jika Anda memang membutuhkan metadata itu (untuk pengarsipan atau hak cipta), simpanlah berkas asli Anda, karena salinan hasil konversi tidak akan memilikinya.

Memilih pengaturan kualitas tanpa menebak-nebak

Slider kualitas hanya berlaku untuk format lossy — JPG dan WebP; PNG mengabaikannya sepenuhnya karena ia selalu lossless. Untuk format lossy tersebut, beberapa patokan menghilangkan kebutuhan menebak:

• 80–90 adalah titik terbaik untuk foto. Hasilnya secara visual tak terbedakan dari kualitas 100, tetapi berkasnya jauh lebih kecil. Sepuluh poin terakhir pada slider menambahkan banyak byte demi detail yang hampir tak seorang pun dapat melihatnya.
• Di bawah kira-kira 70, artefak mulai muncul. Anda mulai melihat blocking dan "mosquito noise" yang berkedip di sekitar tepi — dan itu paling parah terlihat pada teks, logo, dan garis tajam, jadi turunlah serendah itu hanya bila Anda harus memenuhi anggaran ukuran yang ketat.
• WebP dan AVIF menurun lebih anggun daripada JPEG pada kualitas rendah, jadi jika Anda butuh berkas yang sangat kecil keduanya menjaga detail lebih baik.
• Untuk grafis, tangkapan layar, dan apa pun dengan teks tajam, jangan gunakan JPEG berkualitas tinggi sama sekali — pilih PNG atau WebP lossless. Tidak ada pengaturan kualitas JPEG yang menangani tepi keras sebersih format lossless.

Singkatnya: kualitas lossy adalah tombol putar untuk foto, di mana sedikit kehilangan yang tak kasatmata menghasilkan berkas yang jauh lebih kecil. Untuk segala sesuatu yang sarat tepi, pilihan format lebih menentukan daripada slidernya.

Alat terkait

• Kompresor Gambar (perkecil ukuran berkas)
• Kompres ke Ukuran Target (KB)
• Pengubah Ukuran Gambar (ubah dimensi)
• HEIC ke JPG (foto iPhone)
• Gambar ke Base64 (data URI)
• Potong Gambar (rasio, lingkaran)