Tukar format imej _

Cara penukaran imej berasaskan pelayar berfungsi

Setiap penukaran ialah saluran paip empat langkah yang berjalan sepenuhnya dalam JavaScript. Tiada perpustakaan kodek dimuat turun dan tiada pelayan terlibat. Canvas API pelayar sendiri mengendalikan penyahkodan, pengubahan saiz, dan pengekodan semula dalam memori, kemudian menyerahkan Blob yang boleh dipratonton atau di-zip oleh halaman. Kerana setiap langkah berada dalam kotak pasir tab, fail asal tidak pernah mencapai rangkaian.

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 mengekodkan semula piksel. Output PNG sentiasa tanpa kehilangan; JPEG dan WebP mengikut peluncur kualiti, yang dipetakan terus kepada tetapan kuantisasi enkoder.
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 disahkodkan oleh pelayar diterima: PNG, JPEG, WebP, GIF, dan BMP meliputi hampir setiap fail yang dihasilkan oleh pereka atau alat tangkap layar. Format output ialah PNG (sentiasa tanpa kehilangan), JPEG, dan WebP. Output AVIF belum disokong lagi kerana enkoder AVIF Canvas API hanya terdapat dalam Chrome 105 dan kemudian dan tiada dalam Safari dan Firefox. Laluan AVIF berasaskan WebAssembly dirancang untuk v1.1 supaya ciri ini berfungsi merentas setiap pelayar moden.

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.

Bilakah sokongan AVIF akan tiba?

Pengekodan AVIF melalui canvas.toBlob(…, 'image/avif') hanya berfungsi dalam Chrome 105 dan kemudian hari ini; Safari dan Firefox tidak menyokongnya secara asli. Keluaran v1.1 akan menambah laluan AVIF opt-in menggunakan enkoder WebAssembly ringan supaya ciri ini berfungsi dalam setiap pelayar moden tanpa menunggu kesepaduan asli. Sehingga kemudian, pilihan AVIF dalam pemilih format ditunjukkan sebagai 'akan datang' dan enkoder WebP adalah alternatif yang disyorkan. WebP disokong oleh setiap pelayar yang dihantar sejak 2021 dan menghasilkan fail dalam 10 hingga 20% daripada saiz AVIF untuk kebanyakan imej dunia sebenar.

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