Πώς λειτουργεί η συμπίεση εικόνας στο πρόγραμμα περιήγησης
Κάθε πέρασμα συμπίεσης εκτελείται στο πρόγραμμα περιήγησής σας. Για JPEG και PNG το Canvas API του προγράμματος περιήγησης χειρίζεται την κωδικοποίηση απευθείας. Για WebP σε Safari και AVIF σε κάθε πρόγραμμα περιήγησης, η σελίδα φορτώνει έναν ελαφρύ κωδικοποιητή WebAssembly — όλα τοπικά, οι εικόνες σας δεν φεύγουν ποτέ από τη συσκευή.
- Διαβάστε κάθε αρχείο που ανεβάσατε ως Blob και δημιουργήστε ένα URL αντικειμένου ώστε το πρόγραμμα περιήγησης να το αποκωδικοποιήσει τοπικά, χωρίς να αντιγράψει bytes σε διακομιστή ή στον δίσκο.
- Σχεδιάστε την αποκωδικοποιημένη εικόνα σε ένα κρυφό στοιχείο Canvas στις αρχικές της διαστάσεις, έτοιμη για επανακωδικοποίηση.
- Καλέστε
canvas.toBlob(callback, mimeType, quality)για να επανακωδικοποιήσετε τα pixel για JPEG, PNG και Chrome/Firefox WebP. Για Safari WebP και AVIF, ένας εργάτης WebAssembly φορτώνεται στην πρώτη χρήση και χειρίζεται την κωδικοποίηση σε νήμα παρασκηνίου. - Εμφανίστε μέτρηση πριν/μετά με το αρχικό μέγεθος, το συμπιεσμένο μέγεθος και το ποσοστό εξοικονόμησης, και προσφέρετε λήψη ανά εικόνα ή ενιαίο ZIP για όλη την παρτίδα. Το ZIP χτίζεται στη μνήμη με το fflate.
Γιατί να συμπιέσετε εικόνες;
- Οι μικρότερες εικόνες φορτώνουν πιο γρήγορα. Η μείωση μιας εικόνας 4 MB σε 600 KB βελτιώνει άμεσα το Largest Contentful Paint, ένα από τα Core Web Vitals που χρησιμοποιεί η Google για κατάταξη.
- Υπάρχουν και τα όρια μεταφόρτωσης. Πολλές πλατφόρμες CMS, εργαλεία ticketing και συστήματα email απορρίπτουν αρχεία πάνω από 1 ή 2 MB.
- Το εύρος ζώνης και η αποθήκευση κοστίζουν χρήματα σε κλίμακα. Η αποστολή WebP σε ποιότητα 0.8 αντί για PNG πλήρους μεγέθους μπορεί να μειώσει το φορτίο εικόνας κατά ένα τρίτο ή περισσότερο.
- Ορισμένες εικόνες δεν πρέπει να ανεβαίνουν καθόλου. Επειδή όλα γίνονται στο πρόγραμμα περιήγησής σας, οι σαρώσεις ταυτοτήτων, οι ιατρικές εικόνες και τα εσωτερικά στιγμιότυπα οθόνης παραμένουν στη συσκευή σας.
Συνήθεις εφαρμογές
Η συμπίεση είναι απαραίτητη όταν μια εικόνα είναι μεγαλύτερη από το μέρος όπου πρόκειται να μπει. Τρία μοτίβα που βλέπουμε ξανά και ξανά.
- Προετοιμασία φωτογραφιών προϊόντων για ηλεκτρονικό κατάστημα. Τα πρωτότυπα JPEG συμπιέζονται σε ποιότητα 0.8 (ή στόχο 200 KB) ώστε το κατάστημα να παραμένει γρήγορο.
- Σμίκρυνση στιγμιότυπων οθόνης πριν από την επισύναψη σε bug tracker ή wiki. Μια παρτίδα PNG που μετατρέπεται σε JPEG σε ποιότητα 0.85 πέφτει από δεκάδες MB σε μερικά.
- Προσαρμογή φωτογραφίας σε όριο μεταφόρτωσης — μια πύλη υποβολής αιτήσεων που απορρίπτει αρχεία άνω του 1 MB.
Παράδειγμα: JPEG 4 MB σε 400 KB
Ένα JPEG 4 MB απευθείας από κάμερα κινητού είναι ένα συνηθισμένο φορτίο που υπερβαίνει όρια και επιβραδύνει σελίδες.
Ρίξτε το JPEG στη ζώνη μεταφόρτωσης, αφήστε τη μορφή σε JPEG και είτε σύρετε τον ρυθμιστή ποιότητας στο 0.7 είτε μεταβείτε στη λειτουργία μεγέθους-στόχου και πληκτρολογήστε 400 KB. Το Canvas επανακωδικοποιεί μία φορά και εμφανίζει το αποτέλεσμα. Κάντε κλικ στο Λήψη για μεμονωμένο αρχείο ή Λήψη .zip για πολλές εικόνες.
Ποια είναι η διαφορά μεταξύ λειτουργίας ποιότητας και μεγέθους-στόχου;
Η λειτουργία ποιότητας δίνει ένα ρυθμιστή από 0.1 έως 1.0. Η λειτουργία μεγέθους-στόχου αντιστρέφει το πρόβλημα: ορίζετε ένα μέγεθος σε KB και η σελίδα δοκιμάζει διάφορες ποιότητες μέχρι να βρει την υψηλότερη που χωράει κάτω από τον προϋπολογισμό σας.
Αυτό γίνεται στη συσκευή μου;
Ναι, πλήρως. Η σελίδα χρησιμοποιεί το Canvas API και το Web File API για αποκωδικοποίηση και επανακωδικοποίηση. Κανένα δεδομένο εικόνας δεν αποστέλλεται σε διακομιστή. Ανοίξτε το DevTools και δείτε μόνοι σας.
Γιατί η συμπίεση ενός PNG μερικές φορές δεν το μικραίνει σχεδόν καθόλου;
Το PNG είναι μορφή χωρίς απώλειες, οπότε το Canvas API δεν μπορεί να αφαιρέσει λεπτομέρεια. Η πραγματική εξοικονόμηση προέρχεται από την αλλαγή σε JPEG ή WebP, που χρησιμοποιούν συμπίεση με απώλειες.
Ποια μορφή πρέπει να επιλέξω;
Για φωτογραφίες, το WebP σε ποιότητα 0.8 δίνει την καλύτερη ισορροπία. Το JPEG είναι η ασφαλής επιλογή για παλαιότερα συστήματα. Επιλέξτε PNG μόνο όταν χρειάζεστε ποιότητα χωρίς απώλειες ή διαφάνεια.
Ρίξτε τις εικόνες σας, επιλέξτε ποιότητα ή μέγεθος-στόχο, συμπιέστε. Όλα γίνονται στην καρτέλα σας. Χωρίς ανέβασμα, χωρίς λογαριασμό, χωρίς αναμονή.