Cara kerja konversi gambar berbasis browser
Setiap konversi adalah pipeline empat langkah yang berjalan di browser Anda. Untuk JPEG dan PNG, Canvas API browser menangani encode secara langsung. Untuk WebP di Safari dan AVIF di setiap browser, halaman memuat codec WebAssembly ringan sesuai permintaan — semuanya tetap lokal, gambar Anda tidak pernah meninggalkan perangkat.
- Membaca setiap file yang diunggah sebagai Blob dan membuat URL objek sehingga browser dapat mendekodenya tanpa menyalin byte ke server.
- Menggambar gambar yang didekode ke elemen Canvas layar luar, menerapkan batasan ukuran sambil mempertahankan rasio aspek asli.
- Panggil
canvas.toBlob(callback, targetMimeType, quality)untuk mengenkode ulang piksel untuk PNG, JPEG, dan Chrome/Firefox WebP. Untuk Safari WebP dan enkoding AVIF, pekerja codec WebAssembly dimuat pada penggunaan pertama dan menangani encode di thread latar belakang. Output PNG selalu tanpa kehilangan data; JPEG, WebP dan AVIF mengikuti penggeser kualitas, yang dipetakan langsung ke pengaturan kuantisasi encoder. - Menampilkan thumbnail sebelum/sesudah dengan dimensi output dan ukuran file, lalu menawarkan tombol unduh per gambar atau satu ZIP untuk seluruh batch.
Mengapa mengonversi format gambar?
- Beralih dari PNG ke WebP memotong ukuran file tipikal 25–35% tanpa kehilangan kualitas yang terlihat pada kualitas 0,8, yang langsung menurunkan bobot halaman dan meningkatkan skor LCP Core Web Vitals.
- PNG mempertahankan transparansi yang dibuang JPEG, jadi PNG→JPEG merender piksel transparan dengan latar belakang putih — berguna ketika tujuan (email, CMS lama) tidak menerima PNG.
- Platform media sosial dan jaringan iklan memiliki persyaratan format yang ketat: Facebook dan LinkedIn lebih memilih JPEG untuk foto; pipeline pratinjau OG Twitter menangani WebP; beberapa server iklan menolak materi iklan non-JPEG.
- Menstandarisasi batch gambar berformat campuran (tangkapan layar PNG, foto JPEG, ekspor WebP) ke satu format sebelum mengunggah ke CMS atau DAM menghilangkan kerumitan penanganan format dari pipeline ingest.
Aplikasi umum
Konversi format diperlukan ketika format sumber dan ekspektasi tujuan tidak cocok.
- Mempersiapkan foto produk untuk toko Shopify atau WooCommerce — asli JPEG dikonversi ke WebP pada kualitas 0,85 untuk tampilan depan toko, PNG disimpan untuk ekspor siap cetak.
- Mengonversi ekspor PNG yang disediakan desainer ke JPEG atau WebP sebelum disematkan dalam build React atau Next.js, sehingga pengoptimasi gambar framework memulai dengan sumber yang lebih kecil.
- Memproses folder tangkapan layar dari satu kali pengujian QA secara massal — PNG ke JPEG pada kualitas 0,9 untuk memotong ukuran arsip sebelum dilampirkan ke tiket pelacak bug.
Contoh nyata: PNG 2 MB → WebP 300 KB
Gambar hero PNG berukuran 2 MB pada 2400×1600 piksel adalah muatan umum di halaman arahan pemasaran.
Seret PNG ke sini, pilih WebP sebagai format target, atur kualitas ke 0,8, dan secara opsional atur lebar maks ke 1200 untuk membagi dua dimensi piksel. Pipeline canvas menggambar gambar pada 1200×800 (aspek terjaga), mengenkode ulang ke WebP, dan kartu output menampilkan hasilnya — biasanya 280–320 KB, pengurangan 85%. Klik Unduh pada kartu atau unduh massal ZIP jika Anda mengonversi beberapa gambar.
Format apa yang didukung?
Di sisi input, format apa pun yang dapat didekode browser diterima: PNG, JPEG, WebP, GIF, dan BMP mencakup hampir setiap file yang dihasilkan desainer atau alat tangkapan layar. Format output adalah PNG (selalu tanpa kehilangan), JPEG, WebP, dan AVIF. Output AVIF didukung melalui encoder WebAssembly yang dimuat sesuai permintaan di setiap browser — tanpa memerlukan encoder Canvas asli.
Apakah ini terjadi di perangkat saya?
Ya. Halaman menggunakan Canvas API native browser dan Web File API. Tidak ada data gambar yang dikirim ke server; pipeline konversi berjalan sepenuhnya di tab browser Anda. Anda dapat memverifikasi ini dengan membuka DevTools dan memeriksa panel Jaringan — tidak ada permintaan keluar setelah halaman dimuat.
Apa trade-off kualitas antara PNG dan JPEG?
PNG adalah format tanpa kehilangan data — setiap piksel bertahan melalui siklus enkode dengan tepat. JPEG menggunakan kompresi DCT dan membuang detail halus yang jarang diperhatikan mata; kualitas 0,8 adalah titik manis umum di mana perbedaan visual dari aslinya hampir tidak terlihat bagi sebagian besar penonton tetapi file 4–6x lebih kecil dari PNG. WebP dapat beroperasi dalam mode tanpa kehilangan dan dengan kehilangan; slider kualitas di sini menggerakkan encoder dengan kehilangan, dan kualitas 0,85 biasanya mengungguli JPEG 0,85 sebesar 25–30% pada foto alami.
Bagaimana cara kerja output AVIF?
Enkoding AVIF menggunakan codec WebAssembly yang dimuat sesuai permintaan saat pertama kali Anda memilih format AVIF — tanpa plugin, tanpa bendera browser, tanpa menunggu rilis Chrome mendatang. Biner WASM disajikan dari origin kami sendiri, mengenkode gambar Anda sepenuhnya di thread latar belakang, dan mengembalikan blob image/avif standar yang siap diunduh. Satu-satunya permintaan jaringan adalah pengambilan satu kali codec itu sendiri; tidak ada data gambar yang pernah meninggalkan perangkat Anda. Setelah dimuat, encoder tetap di-cache untuk sesi tersebut sehingga konversi berikutnya lebih cepat. File AVIF biasanya 20–30% lebih kecil dari WebP dan 50% lebih kecil dari JPEG pada kualitas setara, menjadikannya pilihan terbaik untuk situs yang sensitif terhadap kinerja.
Seret gambar Anda, pilih format, konversi. Semuanya berjalan di tab Anda — tanpa unggahan, tanpa akun, tanpa menunggu server.