PNG vs JPEG vs WebP vs AVIF: memilih format gambar dengan sengaja

Format lossless mengarsipkan setiap piksel dengan persis; format lossy membuang detail yang nyaris tak terdaftar mata demi file yang jauh lebih kecil. Pilihan ini bukan soal selera kualitas—melainkan untuk apa file itu: master yang akan diedit lagi, atau artefak kirim yang dikirim sekali.

Satu catatan jujur untuk pipeline browser: encoder Canvas tidak menyediakan saklar WebP lossless, jadi di tooling lokal “output lossless” praktis berarti PNG. Workspace yang menawarkan tingkat lossless palsu sedang memberi tahu Anda sesuatu tentang kejujurannya.

• Lossless menyimpan semuaLossless (PNG, dan mode lossless WebP serta AVIF): dekoding mereproduksi piksel asli bit demi bit, sehingga tidak ada yang menurun berapa pun seringnya file dibuka dan disimpan ulang.
• Lossy membelanjakan detailLossy (JPEG, dan mode lossy WebP serta AVIF): encoder memodelkan penglihatan manusia dan membuang apa yang diprediksi tidak akan Anda rindukan—dan penghematan itu permanen, bukan lapisan yang bisa dikupas nanti.
• Master vs kirimanPembagian praktisnya: simpan master secara lossless, kirim hasil secara lossy, dan jangan pernah menjadikan ekspor lossy sebagai sumber untuk edit berikutnya.

Format kompresi punya spesialisasi. Transformasi kosinus JPEG menyukai gradien fotografis yang mulus dan merusak tepi tajam; deflate PNG menyukai rentang warna datar dan garis presisi serta mengembangkan foto yang penuh noise; WebP dan AVIF meminjam trik codec video yang menangani keduanya dengan cukup baik.

Pasangan yang salah mahal di kedua arah: PNG fotografis bisa lima sampai sepuluh kali lebih berat daripada JPEG yang setara, sedangkan logo yang disimpan sebagai JPEG menumbuhkan halo yang tidak bisa dihilangkan sepenuhnya oleh kenaikan kualitas berapa pun.

• FotoFoto dan gradien: JPEG pada kualitas sedang jauh lebih kecil daripada PNG, dan kehilangannya tak terlihat pada ukuran kirim—inilah beban kerja yang memang dirancang untuk format lossy.
• Grafis datarLogo, ikon, tangkapan layar antarmuka, dan seni garis: area datar dan tepi tajam terkompresi sempurna di PNG, sementara JPEG meninggalkan ringing yang terlihat di setiap transisi keras.
• Konten campuranKonten campuran seperti tangkapan layar berisi foto: uji keduanya—WebP sering berada di antara dua format lama, tetapi campuran piksellah yang memutuskan, bukan labelnya.

Jika tata letak perlu menampakkan latar belakang, formatnya harus membawa kanal alfa. PNG, WebP, dan AVIF semuanya mendukung transparansi; JPEG tidak—meratakan gambar ke latar solid adalah kewajiban, bukan pilihan.

• Alfa itu per pikselKanal alfa menyimpan opasitas per piksel di samping warna, dan itulah yang membuat logo duduk bersih di latar mana pun alih-alih di atas persegi putih.
• JPEG meratakanMengonversi PNG transparan ke JPEG menggantikan alfa dengan alas solid; pilih warna alas itu dengan sengaja, karena ia menjadi permanen di dalam piksel.
• Pilih alasnyaKonverter Format Gambar mengungkapkan perataan ini dan menanyakan warna latar yang dipakai, sehingga komprominya eksplisit—bukan ditemukan belakangan di tata letak.

WebP terdekode di setiap browser terkini; AVIF terdekode di Chrome, Firefox, dan Safari terkini tetapi tidak di browser lama atau setiap alat hilir. Dukungan adalah milik tujuan, bukan milik format—periksa pipeline yang sebenarnya sebelum menetapkan satu set kiriman penuh.

Untuk pengiriman web, jawaban standarnya adalah rantai cadangan: sajikan AVIF atau WebP dengan cadangan JPEG atau PNG lewat elemen picture, sehingga browser modern memanen penghematannya dan yang lain tetap tampil.

• Tujuan yang memutuskanDukungan encoding tertinggal dari decoding: sebagian browser menampilkan WebP tetapi tidak bisa mengenkodenya lewat Canvas, jadi konverter harus menyelidiki kemampuan itu alih-alih mengasumsikannya.
• Encoding butuh penyelidikanKonverter Format Gambar menjalankan persis penyelidikan itu di muka dan menonaktifkan ekspor WebP di tempat encoding tidak ada, alih-alih diam-diam menyerahkan PNG bernama .webp.
• Penanganan AVIF yang jujurInput AVIF hanya diterima bila browser benar-benar mendekodenya; bila tidak bisa, workspace mengatakannya dan meminta Anda mengekspor PNG atau JPEG dulu, alih-alih mempercayai tanda tangan file.

Setiap penyimpanan lossy mengkuantisasi ulang gambar yang sudah diaproksimasi, sehingga artefak menumpuk: penyimpanan JPEG ketiga dari gambar yang sama terlihat lebih buruk daripada yang pertama pada pengaturan kualitas yang sama. Konversikan sekali saja, di ujung pipeline, dari sumber terbaik yang Anda miliki.

Aturan penumpukan ini juga menetapkan urutan operasi: setiap resampling dan setiap enkoding ulang adalah peristiwa kehilangan yang terpisah, jadi pipeline termurah adalah yang langkah lossy-nya paling sedikit.

• Konversi sekaliEditlah di master lossless dan ekspor salinan lossy sebagai langkah terakhir; setiap penyimpanan lossy di tengah jalan adalah satu generasi kerusakan yang tak bisa diurungkan.
• Efek sampingEnkoding ulang Canvas juga membuang profil warna ICC, metadata EXIF, dan animasi apa pun—GIF masuk sebagai frame pertamanya, dan workspace mengungkapkannya di samping file.
• Simpan aslinyaSimpan aslinya setelah konversi; file hasil konversi adalah artefak kirim, bukan master, dan mengonversi balik tidak pernah mengembalikan apa yang sudah terbelanjakan.

Nasihat format hanyalah hipotesis sampai byte berbicara. Konverter Format Gambar melaporkan ukuran byte sebelum dan sesudah persis sebagaimana dihasilkan, dengan kualitas JPEG dan WebP yang dapat diatur dari 0,50 hingga 0,95 (bawaan 0,85), sehingga komprominya berupa angka di layar, bukan folklor.

• Konversikan file asliKonversikan file asli, bukan sampel: penghematan byte bergantung pada konten sebenarnya, dan laporannya menampilkan kedua ukuran berdampingan.
• Piksel adalah tuasBila byte masih melewati anggaran, piksel adalah tuas berikutnya: memparuhkan lebar dan tinggi membuang kira-kira tiga perempat piksel, sering kali kemenangan lebih besar daripada ganti format mana pun.
• Batas yang jelasKedua alat menerima file hingga 12 MiB dengan sisi hingga 8.192 piksel, dan pengubah ukuran dapat mengunci rasio aspek sehingga satu dimensi mengikuti yang lain.