Tukar format imej _

Cara penukaran imej berasaskan pelayar berfungsi

Setiap penukaran adalah saluran paip empat langkah yang berjalan dalam pelayar anda. Untuk JPEG dan PNG, Canvas API pelayar sendiri mengendalikan pengekodan secara langsung. Untuk WebP pada Safari dan AVIF pada setiap pelayar, halaman memuatkan kodek WebAssembly ringan atas permintaan — masih semua setempat, imej anda tidak pernah meninggalkan peranti.

1. Baca setiap fail yang dimuat naik sebagai Blob dan buat URL objek supaya pelayar boleh menyahkodnya secara setempat, tanpa menyalin bait ke pelayan atau mengekalkannya ke cakera.
2. Lukis imej yang disahkodkan ke atas elemen Canvas luar skrin, menggunakan sebarang kekangan ubah saiz sambil mengekalkan nisbah aspek asal. Jika anda memilih lebar maks atau dimensi maks, di sinilah penurunan skala berlaku.
3. Panggil canvas.toBlob(callback, targetMimeType, quality) untuk mengekod semula piksel untuk PNG, JPEG, dan Chrome/Firefox WebP. Untuk Safari WebP dan pengekodan AVIF, seorang pekerja kodek WebAssembly dimuatkan pada penggunaan pertama dan mengendalikan pengekodan dalam utas latar belakang. Output PNG sentiasa tanpa kehilangan; JPEG, WebP dan AVIF mengikut peluncur kualiti, yang dipetakan terus kepada tetapan kuantisasi pengekod.
4. Tunjukkan lakaran kecil sebelum/selepas dengan dimensi output dan saiz fail, kemudian tawarkan butang muat turun setiap imej atau ZIP tunggal untuk keseluruhan kelompok. ZIP dibina dalam memori menggunakan fflate, perpustakaan 8 KB yang berjalan sepenuhnya dalam tab.

Mengapa menukar format imej?

• Beralih dari PNG ke WebP mengurangkan saiz fail yang tipikal sebanyak 25 hingga 35% tanpa kehilangan kualiti yang ketara pada kualiti 0.8, yang mengurangkan berat halaman secara langsung dan meningkatkan skor Core Web Vitals LCP. Pada halaman perincian produk yang tipikal dengan lapan imej utama, itulah perbezaan antara cat pertama 4 MB dan cat pertama 2.6 MB.
• PNG memelihara ketelusan di mana JPEG membuangnya. Beralih PNG ke JPEG merender piksel telus terhadap latar belakang putih, yang tepat seperti yang anda mahukan apabila destinasi (klien e-mel, CMS lama, templat cetak) tidak dapat menerima PNG dari awal.
• Platform media sosial dan rangkaian iklan mempunyai keperluan format yang ketat. Facebook dan LinkedIn lebih suka JPEG untuk muat naik foto, saluran paip pratonton OG Twitter menerima WebP, dan beberapa pelayan iklan programatik menolak apa-apa yang bukan JPEG. Laluan penukaran pantas sebelum muat naik mengelakkan ping-pong kreatif yang ditolak.
• Menstandarkan kelompok imej format campuran (tangkap layar PNG, foto JPEG, eksport WebP daripada pereka) kepada format output tunggal sebelum memuat naik ke CMS atau DAM membuang cabang pengendalian format daripada saluran paip ingest. Satu format masuk, satu format keluar, laluan kod bersyarat yang jauh lebih sedikit di hiliran.

Aplikasi biasa

Penukaran format muncul bila-bila masa format sumber dan jangkaan destinasi tidak sepadan. Tiga corak yang kami lihat berulang kali.

• Menyediakan foto produk untuk kedai Shopify atau WooCommerce. Asal JPEG ditukar kepada WebP pada kualiti 0.85 untuk paparan awam kedai, sementara salinan PNG disimpan untuk eksport sedia cetak dan penyenaraian pasaran yang masih menolak WebP.
• Menukar eksport PNG yang dibekalkan pereka kepada JPEG atau WebP sebelum memasuki binaan React atau Next.js. Saluran paip imej rangka kerja mengambil sumber yang lebih kecil dan bundel pengeluaran menghantar lebih sedikit bait setiap laluan.
• Memproses kelompok folder tangkap layar daripada proses QA. PNG ke JPEG pada kualiti 0.9 biasanya mengecilkan arkib 50-tangkap-layar dari kira-kira 120 MB kepada di bawah 20 MB sebelum dilampirkan kepada tiket penjejak pepijat.

Contoh yang dikerjakan: PNG 2 MB kepada WebP 300 KB

Imej hero PNG 2 MB pada 2400×1600 piksel adalah muatan biasa pada halaman pendaratan pemasaran. Ia adalah penanda aras yang adil untuk apa yang penukaran jimatkan pada halaman sebenar.

Lepaskan PNG ke zon muat naik, pilih WebP sebagai format sasaran, tetapkan kualiti kepada 0.8, dan tetapkan lebar maks kepada 1200 untuk menghalvakan dimensi piksel. Saluran paip Canvas melukis imej pada 1200×800 dengan aspek dipelihara, kemudian mengekodkan semula kepada WebP. Kad output menunjukkan hasilnya, biasanya dalam julat 280 hingga 320 KB, iaitu pengurangan kira-kira 85% berbanding asal. Klik Muat Turun pada kad untuk ambil fail tunggal, atau klik Muat Turun .zip di bahagian bawah panel jika anda menukar beberapa imej dalam satu laluan. Keseluruhan perjalanan pergi-balik, dari lepas hingga muat turun, berjalan dalam beberapa ratus milisaat untuk imej saiz ini dan menggunakan sifar lebar jalur selepas halaman itu sendiri selesai dimuatkan.

Format mana yang disokong?

Pada bahagian input, sebarang format yang boleh dinyahkod oleh pelayar diterima: PNG, JPEG, WebP, GIF, dan BMP meliputi hampir setiap fail yang dihasilkan oleh pereka atau alat tangkapan skrin. Format output ialah PNG (sentiasa tanpa kehilangan), JPEG, WebP, dan AVIF. Output AVIF disokong melalui pengekod WebAssembly yang dimuatkan atas permintaan dalam setiap pelayar — tiada pengekod Canvas asli diperlukan.

Adakah ini berlaku pada peranti saya?

Ya, sepenuhnya. Halaman menggunakan Canvas API asli pelayar dan Web File API untuk menyahkodkan dan mengekodkan semula setiap imej dalam memori. Tiada data imej dihantar ke pelayan, tiada muat naik sementara, tiada perjalanan pergi-balik awan. Anda boleh mengesahkan sendiri: buka DevTools, beralih ke panel Rangkaian, dan jalankan penukaran. Satu-satunya permintaan keluar yang anda lihat ialah muat halaman awal dan panggilan iklan. Tiada yang berbentuk imej meninggalkan tab.

Apakah pertukaran kualiti antara PNG dan JPEG?

PNG adalah format tanpa kehilangan. Setiap piksel bertahan dalam kitaran enkod dengan tepat, yang menjadikan PNG pilihan tepat untuk tangkap layar, tangkapan UI, dan sebarang imej dengan tepi tajam atau kawasan warna rata yang besar. JPEG menggunakan pemampatan DCT dan membuang perincian halus yang mata jarang perasan, yang menjadikannya pilihan tepat untuk foto. Kualiti 0.8 adalah titik manis biasa di mana perbezaan visual dari asal sukar dikesan tetapi fail mendarat 4 hingga 6 kali lebih kecil daripada setara PNG. WebP boleh beroperasi dalam mod tanpa kehilangan dan hilang; peluncur kualiti di sini mendorong enkoder hilang, dan pada kualiti 0.85 WebP biasanya mengalahkan JPEG sebanyak 25 hingga 30% pada kandungan foto semula jadi.

Bagaimana output AVIF berfungsi?

Pengekodan AVIF menggunakan kodek WebAssembly yang dimuatkan atas permintaan kali pertama anda memilih format AVIF — tiada plugin, tiada bendera pelayar, tiada menunggu keluaran Chrome masa depan. Perduaan WASM dihidangkan dari asal kami sendiri, mengekod imej anda sepenuhnya dalam utas latar belakang, dan mengembalikan blob image/avif standard yang sedia untuk dimuat turun. Satu-satunya permintaan rangkaian ialah ambilan sekali kodek itu sendiri; tiada data imej yang pernah meninggalkan peranti anda. Setelah dimuatkan, pengekod kekal dicache untuk sesi supaya penukaran seterusnya lebih cepat. Fail AVIF biasanya 20-30% lebih kecil daripada WebP dan 50% lebih kecil daripada JPEG pada kualiti setara, menjadikannya pilihan terbaik untuk tapak yang sensitif terhadap prestasi.

Lepaskan imej anda, pilih format, tukar. Semuanya berjalan dalam tab anda. Tiada muat naik, tiada akaun, tiada menunggu giliran pelayan.