Mampatkan imej _

Cara pemampatan imej berasaskan pelayar berfungsi

Setiap laluan pemampatan berjalan sepenuhnya dalam JavaScript. Tiada pustaka codec dimuat turun dan tiada pelayan terlibat. Canvas API pelayar sendiri menyahkodkan imej, mengkodkannya semula pada kualiti yang lebih rendah, dan menyerahkan Blob yang boleh dipratonton, dimuat turun, atau di-zip oleh halaman. Kerana setiap langkah kekal dalam kotak pasir tab, fail asal tidak pernah menyentuh 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 menulisnya ke cakera.
2. Lukis imej yang disahkodkan ke atas elemen Canvas luar skrin pada dimensi piksel asalnya, bersedia untuk dikodkan semula.
3. Panggil canvas.toBlob(callback, mimeType, quality) untuk mengkodkan semula piksel. Dalam mod kualiti, nilai peluncur dipetakan terus kepada tetapan kuantisasi enkoder; dalam mod saiz sasaran, halaman membelah nilai kualiti sehingga output blob muat di bawah bajet bait anda.
4. Tunjukkan bacaan sebelum/selepas dengan saiz asal, saiz yang dimampatkan, dan peratusan penjimatan, kemudian tawarkan muat turun setiap imej atau satu ZIP untuk keseluruhan kelompok. ZIP dibina dalam ingatan menggunakan fflate, pustaka 8 KB yang dimuatkan pada penggunaan pertama.

Mengapa mampatkan imej?

• Imej yang lebih kecil dimuatkan dengan lebih cepat. Memotong hero image 4 MB kepada 600 KB meningkatkan Largest Contentful Paint secara langsung, yang merupakan salah satu Core Web Vitals yang digunakan Google untuk kedudukan. Pada halaman dengan beberapa foto, penjimatan bertambah menjadi cat pertama yang lebih cepat.
• Had muat naik dan lampiran ada di mana-mana. Banyak platform CMS, alat tiket, dan sistem e-mel menolak fail melebihi 1 atau 2 MB. Satu laluan pemampatan pantas membawa foto di bawah had tanpa anda membuka editor penuh.
• Lebar jalur dan storan memerlukan kos pada skala besar. Menghantar WebP pada kualiti 0.8 berbanding PNG bersaiz penuh boleh memotong muatan imej sebanyak satu pertiga atau lebih, yang mengurangkan bil egress CDN dan penggunaan data mudah alih pengunjung anda.
• Privasi penting untuk imej sensitif. Kerana semuanya berjalan dalam pelayar anda, imbasan kad pengenalan, imej perubatan, dan tangkap layar dalaman kekal pada peranti anda — tiada muat naik ke pelayan pihak ketiga seperti TinyPNG yang perlu dibimbangkan.

Aplikasi biasa

Pemampatan diperlukan bila-bila masa imej lebih besar daripada tempat yang dituju. Tiga corak yang kami lihat berulang kali.

• Menyediakan foto produk untuk kedai dalam talian. Asal JPEG dimampatkan kepada kualiti 0.8 (atau sasaran 200 KB) supaya paparan depan kedai kekal pantas dan lulus Core Web Vitals pada mudah alih.
• Mengecilkan tangkap layar sebelum melampirkannya ke bug tracker atau wiki. Kelompok tangkapan PNG yang ditukar kepada JPEG pada kualiti 0.85 sering turun dari puluhan megabait kepada beberapa.
• Mendapatkan foto di bawah had muat naik — portal permohonan kerja yang menolak fail melebihi 1 MB, sistem e-mel dengan had lampiran yang ketat, atau avatar forum yang perlu muat dalam bajet bait.

Contoh yang dikerjakan: JPEG 4 MB kepada 400 KB

JPEG 4 MB terus dari kamera telefon adalah muatan biasa yang melanggar had muat naik dan melambatkan halaman. Ini adalah penanda aras yang adil untuk apa yang disimpan oleh pemampatan.

Lepaskan JPEG ke zon muat naik, biarkan format pada JPEG, dan sama ada seret peluncur kualiti ke bawah hingga 0.7 atau beralih ke mod saiz sasaran dan taip 400 KB. Dalam mod kualiti, saluran paip Canvas mengkodkan semula sekali dan menunjukkan hasilnya, biasanya sekitar 500 hingga 700 KB bergantung pada foto. Dalam mod saiz sasaran, halaman mencuba beberapa nilai kualiti, memilih yang tertinggi yang masih muat di bawah 400 KB, dan melaporkan peratusan penjimatan. Klik Muat Turun pada kad untuk ambil fail tunggal, atau klik Muat Turun .zip jika anda memampatkan beberapa imej sekaligus. Keseluruhan perjalanan pergi-balik berjalan jauh di bawah satu saat untuk imej saiz ini dan menggunakan sifar lebar jalur selepas halaman itu sendiri selesai dimuatkan.

Apakah perbezaan antara mod kualiti dan mod saiz sasaran?

Mod kualiti memberikan anda satu peluncur dari 0.1 hingga 1.0 yang dipetakan kepada tetapan kuantisasi enkoder JPEG atau WebP — nombor lebih rendah bermakna fail lebih kecil dan artefak lebih ketara. Mod saiz sasaran membalikkan masalah: anda menyebut saiz dalam kilobait dan halaman membelah nilai kualiti, mengkod beberapa kali sehingga menemui kualiti tertinggi yang masih muat di bawah bajet anda. Saiz sasaran berguna apabila had keras penting (had muat naik 1 MB, misalnya); mod kualiti lebih pantas dan lebih baik apabila anda hanya mahukan hasil visual yang dapat diramal. PNG adalah tanpa kehilangan, jadi tiada mod yang digunakan padanya.

Adakah ini berlaku pada peranti saya?

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

Mengapa memampatkan PNG kadang-kadang hampir tidak mengecilkannya?

PNG adalah format tanpa kehilangan, jadi Canvas API tidak boleh membuang butiran untuk membuatnya lebih kecil — ia hanya boleh mengemas semula piksel yang sama. Untuk foto, PNG sudah besar dan pengkodean semula tanpa kehilangan menyimpan sedikit. Kemenangan sebenar datang daripada menukar format output kepada JPEG atau WebP, yang menggunakan pemampatan lossy yang sesuai untuk foto dan secara rutin menghasilkan 4 hingga 10 kali lebih kecil. Kekalkan PNG hanya apabila anda memerlukan kualiti tanpa kehilangan atau ketelusan; jika tidak, pilih JPEG untuk foto atau WebP untuk keseimbangan saiz-kualiti terbaik.

Format mana yang patut saya pilih?

Untuk foto, WebP pada kualiti 0.8 memberikan keseimbangan saiz-kualiti terbaik dan disokong oleh setiap pelayar yang dihantar sejak 2021; JPEG adalah pengganti universal yang selamat apabila destinasi lebih lama atau lebih ketat. Pilih PNG hanya apabila anda memerlukan kualiti tanpa kehilangan atau saluran alfa — seni garisan, tangkap layar UI, logo dengan ketelusan. Jika anda mengoptimumkan kelajuan halaman dan penonton anda menggunakan pelayar moden, WebP hampir selalu pilihan yang betul; jika anda memberi makan CMS lama atau saluran paip cetak yang menolak WebP, kekalkan JPEG.

Lepaskan imej anda, pilih tahap kualiti atau saiz sasaran, mampatkan. Semuanya berjalan dalam tab anda. Tiada muat naik, tiada akaun, tiada menunggu giliran pelayan.