Πώς να συμπιέζει εικόνες: Ένας οδηγός σχεδιαστή ιστοσελίδων

Η μέση ταχύτητα μιας σύγχρονης σύνδεσης στο Διαδίκτυο θα ακούγεται πολύ φουτουριστικό στους πλοιάρχους του ιστού του παρελθόντος. Πίσω στις πρώτες μέρες του Ιστού, το ποσό των μεταφερόμενων δεδομένων ήταν ζωτικής σημασίας, τόσο από πλευράς χρόνου όσο και από το κόστος, επομένως όλοι εμπλέκονται στη φιλοξενία κάτι online προσπάθησε να κάνει μικρότερες εικόνες.

Κατά ειρωνικό τρόπο, το πρόβλημα δεν έχει φύγει σήμερα. Κάθε φορά που επισκέπτεστε μια ιστοσελίδα σεναρίου σε Script (όπως Mainstream World News), τραβάει συχνά μια ντουζίνα megabytes του JavaScript κώδικα, εικόνες, βίντεο και περιληπτικά. Μπορεί να εξακολουθεί να είναι οδυνηρά αργή και ακόμη και να κοστίσει μια όμορφη δεκάρα για ορισμένους χρήστες κινητών δεδομένων (αυτό δεν πρέπει να είναι ένα πρόβλημα εάν χρησιμοποιείτε ένα αξιοπρεπές οικοδόμος ιστότοπου , και καλό web hosting θα πρέπει να το παρακολουθήσετε για εσάς).

Σε αυτό το σεμινάριο, θα μάθουμε τους τρόπους που μπορείτε να πετύχετε τα αρχεία bitmap για τον ιστό. Εφόσον χρησιμοποιεί τις καλές μορφές PNG και JPEG (δείτε περισσότερα για μορφές αρχείων εικόνας Εδώ, και φροντίστε να αποθηκεύσετε τα αρχεία σας στα δεξιά αποθήκευση σύννεφων επίσης), θα δούμε πώς μπορούμε να τα κάνουμε μικρότερα χωρίς να διακυβεύουν την ποιότητα, χρησιμοποιώντας μερικά ζεστά Έργα ανοιχτού κώδικα . Στο τέλος, θα έχουμε ουσιαστικά μικρότερα αρχεία που θα εξακολουθήσουν να φαίνονται καλά, αλλά απαιτούν λιγότερο χρόνο και δεδομένα για να παρασχεθούν σε προγράμματα περιήγησης ιστού των χρηστών.

Διαβάστε για να βουτήξετε στις λεπτομέρειες. Πρώτον, μια γρήγορη σημείωση στο λογισμικό. Όλα τα εργαλεία που αναφέρονται εδώ είναι ανοιχτού κώδικα - μεταβείτε στο κάτω μέρος για έναν οδηγό για να Πώς να πάρετε το λογισμικό χρειάζεσαι.

• Τα καλύτερα θέματα χαρτοφυλακίου Wordpress

Επιλέξτε τη σωστή μορφή

Μπορεί να ακούγεται ασήμαντο να εξακολουθεί να μεταχειρίζεται σχετικά με το μέγεθος του αρχείου, αλλά υπάρχουν αρκετά παραδείγματα όπου μια εικόνα είναι είτε πολύ μαζική χωρίς κανένα σκοπό είτε φαίνεται τρομερό παρά το γεγονός ότι είναι μικρό. Για να αποφύγετε τέτοια λάθη, επιλέξτε μια μορφή για να αποθηκεύσετε ή να μετατρέψετε μια εικόνα με σύνεση. Η χρήση του JPEG συνεπάγεται να σπάσει μια εικόνα σε πλακάκια 8x8 pixel, όπου κάθε κεραμίδι έχει συμπιεστεί. Το επίπεδο συμπίεσης εξαρτάται από τον χρήστη (είναι αυτό το ρυθμιστικό όταν αποθηκεύετε μια εικόνα) αλλά τυπικά JPEG επιτρέπει την αύξηση του μεγέθους αρχείου 10: 1 με μια αποδεκτή απώλεια ποιότητας.

Η αντιληπτική διαφορά μεταξύ των αρχείων JPEG που γίνεται με υψηλό (80-100) και χαμηλό (40-60) αναλογία συμπίεσης είναι ελάχιστη για φωτογραφικές εικόνες αλλά εξαιρετικά αισθητή για πράγματα όπως ψηφιακά έργα τέχνης, εικονίδια και στιγμιότυπα οθόνης. Επομένως, συνιστάται να επιλέξετε JPEG για φωτογραφίες και πηγαίνετε με κάτι άλλο για τους άλλους τύπους εικόνων bitmap.

Το PNG είναι μία από τις πιο κατάλληλες μορφές για τα γραφικά δικτύου (στην πραγματικότητα, αυτό είναι το μέσο συντομογραφίας). Ενώ η μορφή JPEG είναι πάντα απώλεια (ακόμη και με ποιότητα σε 100), η μορφή PNG μπορεί να είναι είτε απώλεια είτε όχι. Επιπλέον, ακόμη και όταν είναι, συμπιέζει τα δεδομένα μειώνοντας τον αριθμό των χρωμάτων που χρησιμοποιούνται στην εικόνα, έτσι ώστε το αποτέλεσμα να κοιτάζει συνήθως τραγανό και καθαρό. Έτσι επιλέξτε PNG για την απεικόνιση των γραμμών οθόνης ή οποιουδήποτε άλλου είδους εικόνων με στερεά πλήρωση.

Ξεκινήστε με βολικές μεθόδους

Βελτιστοποίηση αρχείων bitmap είναι δυνατή με μια δέσμη εργαλείων δωρεάν λογισμικού, οπότε δεν χρειάζεται να βασίζεστε σε έναν επεξεργαστή πλήρους εικόνας. Το Imagine είναι μια τέτοια εφαρμογή και είναι εξαιρετικά εύκολο στη χρήση. Απλά σύρετε μια εικόνα (ή μια στοίβα των εικόνων) πάνω από το παράθυρο Φανταστείτε και χρησιμοποιήστε τα μικρά ρυθμιστικά για να ρυθμίσετε τη αναλογία συμπίεσης.

Φανταστείτε ότι λειτουργεί με αρχεία JPEG, PNG και WEBP και είναι ιδανικό για κωδικοποίηση απώλειας. Το μεγαλύτερο πλεονέκτημα είναι ότι το εργαλείο είναι διαδραστικό. Σας δείχνει άμεσα τον τρόπο με τον οποίο η εικόνα θα εξετάσει τις τρέχουσες ρυθμίσεις και θα εμφανίζει το προτεινόμενο μέγεθος αρχείου. Το Imagine λειτουργεί εξαιρετικά για την επεξεργασία παρτίδων - τουλάχιστον μπορεί να αποθηκεύσει όλες τις ανοιχτές εικόνες ταυτόχρονα αν χρειαστεί να.

Περιττό να πούμε ότι υπάρχουν δεκάδες, αν όχι εκατοντάδες, άλλων βελτιστών JPEG και PNG, συμπεριλαμβανομένων μερικών εύχρηστων ηλεκτρονικών υπηρεσιών (όπως Tinyjpg ). Αλλά μην βιαστείτε ακόμα - έχουμε κάτι καλύτερο το μανίκι μας.

Προηγμένες τεχνικές συμπίεσης

Εκ πρώτης όψεως, φαίνεται ότι δεν μπορούμε να χρειαστούμε πολύ περισσότερο από ένα δάγκωμα από τα μεγέθη αρχείων JPEG JPEG, κάτι που μπορεί να αποδειχθεί αμέσως από μάταιες προσπάθειες για περαιτέρω εικόνες αρχειοθέτησης χρησιμοποιώντας φερμουάρ ή οποιαδήποτε άλλη τεχνική συμπίεσης. Αλλά εδώ έρχεται Guetzli, ένα έξυπνο ελβετικό μπισκότο και εξελιγμένο αντιληπτικό κωδικοποιητή για το JPEG.

Το Guetzli κάνει ένα μέσο JPEG μικρότερο κατά 20 έως 30 τοις εκατό, αυξάνοντας την πυκνότητα συμπίεσης. Το μυστικό είναι ότι ο αλγόριθμος γνωρίζει τον τρόπο με τον οποίο οι άνθρωποι αντιλαμβάνονται τι βλέπουν, οπότε η προκύπτουσα εικόνα εξακολουθεί να φαίνεται μεγάλη στο μάτι. Το Guetzli είναι ένα εργαλείο γραμμής Cross-Platform, το οποίο χρησιμοποιεί την ακόλουθη σύνταξη:

guetzli [--quality Q] [--verbose] original_image output_jpeg_image

Η αρχική εικόνα μπορεί να είναι είτε PNG είτε JPEG, ενώ η έξοδος είναι πάντα JPEG. Επομένως, μπορείτε να χρησιμοποιήσετε το Guetzli για να μετατρέψετε PNG σε JPEG χάρη στην κατάσταση κατάστασης της τεχνικής της. Η ποιότητα πρέπει να πέσει μεταξύ 0-100. Το Guetzli είναι ένα απίστευτα βαρύ λογισμικό πόρων. Καταναλώνει σχεδόν 300MB μνήμης ανά 1 megapixel και επίσης πολλή δύναμη CPU. Ελπίζουμε ότι οι υπερ-βελτιστοποιημένες jpegs σας δεν θα ενισχύσουν την υπερθέρμανση του πλανήτη ...

Τα φορητά γραφικά δικτύου είναι μια διαφορετική ιστορία, εφόσον σχεδιάστηκε για κωδικοποίηση εικόνας χωρίς απώλειες. Όταν αποθηκεύετε μια εικόνα ως png σε ένα πρόγραμμα επεξεργασίας εικόνας όπως το gimp, έχετε ένα ρυθμιστικό λόγο συμπίεσης με τιμές από το 0 έως 9. εδώ δεν σημαίνει συμπίεση και να κάνει την εικόνα να ζυγίζει σαν ένα tiff. Αντίθετα, 9 λωρίδουν τις περισσότερες από τις απεριόριστες πληροφορίες χρώματος και οδηγούν σε ένα αρχείο που είναι 15-20 φορές μικρότερο από το TIFF.

Αυτή τη φορά θα προσπαθήσουμε να κάνουμε ένα ήδη μικρό αρχείο PNG (με λόγο 9) ακόμη μικρότερη. Για το σκοπό αυτό, θα χρησιμοποιήσουμε το Zopfli, ένα άλλο εργαλείο ανοιχτού κώδικα που θα έχει και πάλι ρίζες στα Labs Google. Το Zopfli είναι ένας υψηλής ποιότητας συμπιεστής για την κωδικοποίηση δεδομένων deflate, gzip και zlib.

Το ενδιαφέρον μέρος είναι ότι το Zopfli περιέχει δύο κωδικοποιητές σε μία δέσμη: το δυαδικό δυαδικό και το ειδικό εργαλείο «zopflipng». Το τελευταίο είναι ακριβώς αυτό που χρειαζόμαστε! Το Zopflipng είναι ένας κωδικοποιητής που βασίζεται σε εκτροπές με ορισμένους αλγόριθμους που υποστηρίζονται από τη μορφή ιστοσελίδων. Είναι αρκετά έξυπνο για να επιλέξει αυτόματα την καλύτερη στρατηγική χρησιμοποιώντας κωδικούς σάρωσης και αφαιρώντας διάφορα περιττά κομμάτια μέσα PNG. Χρησιμοποιήστε το με αυτή την απλή σύνταξη:

zopflipng original_png output_png

Το Zopflipng μπορεί πιθανότατα να κάνει την εργασία ακόμα καλύτερη με τις ακόλουθες ρητές επιλογές:

 zopflipng - zopflipng - 000 --Filters = 01234mepb --lossy_8bit --lossy_transparent original_png
output_png 

Η τιμή που πληρώνετε είναι η ίδια με την Guetzli: Το εργαλείο παίρνει πολύ χρόνο για να επεξεργαστεί μια εικόνα, ειδικά αν είναι μεγάλη. Οι περισσότερες επαναλήψεις που χρησιμοποιείτε, όσο περισσότερο θα χρειαστούν αλλά 500 είναι ένας λογικός αριθμός. Το κέρδος μεγέθους αρχείου με το Zopfli βρίσκεται μεταξύ 8 και 20 τοις εκατό, το οποίο είναι πολύ καλό για τις ιδιώτες εικόνες. Εν συντομία, η απόκτηση 8 τοις εκατό είναι κοινή για στιγμιότυπα οθόνης, ενώ το 20 τοις εκατό είναι δυνατόν με φωτογραφίες (όταν πρέπει να τα αποθηκεύσετε ως PNG).

Αναβάθμιση σε μορφές αρχείων επόμενου γονέα

Συνήθως, αυτό το μέρος ξεπερνά το πεδίο εφαρμογής PNG και JPEG, αλλά είναι πολύ πρακτικό, δεδομένου ότι μπορείτε να οργανώσετε τη μετατροπή αρχείων στη--fly. Αυτό που εννοούμε εδώ χρησιμοποιεί εναλλακτικές και νέες μορφές εικόνας που ξεπερνούν τα καλύτερα πρότυπα της βιομηχανίας (διαβάστε το WEBP).

Το ένα είναι το Flif, μια νέα μορφή απώλειας χωρίς απώλειες με βάση τη μέθοδο συμπίεσης συμπίεσης Maniac (Meta-Adaptive κοντά σε μηδενική ακέραιτη αριθμητική κωδικοποίηση), η οποία μπορεί να ξεπεράσει το PNG, FFV1, χωρίς απώλειες WEBP, χωρίς απώλειες BPG και χωρίς απώλειες JPEG 2000 όσον αφορά τη σχέση συμπίεσης. Το Flif είναι διαθέσιμο για όλες τις πλατφόρμες και ορισμένοι θεατές εικόνων το υποστηρίζουν ήδη, αλλά έχει πολύ δρόμο να πάει να χτυπήσει το mainstream. Αυτή τη στιγμή, έχει νόημα χρησιμοποιώντας flif για αποθήκευση ή στην πλευρά του διακομιστή. Μπορεί να ενεργήσει σαν μια αποτελεσματική μορφή αρχειοθέτησης. Θα χρειαστεί να πάρετε τον κώδικα από τη σελίδα GitHub του έργου και να το συγκεντρώσετε. Μόλις το έχετε το πτερύγιο Δυαδική εγκατεστημένη, χρησιμοποιήστε την ακόλουθη εντολή για να κωδικοποιήσετε μια εικόνα PNG:

 Flif -e Original_png Output_Flif 

Αντικαθιστώ -μι με -ρε και βάλτε τα αρχεία με αντίστροφη σειρά για να «ασχοληθείτε» την εικόνα σας πίσω στο PNG. Από την άποψη των εργαλείων, τώρα υπάρχει το στοιχείο Flif Wic API για τα Windows, το QT Flif Plugin για το Linux και το Phew Image Viewer και το plugin QuickLook για MacOs (δείτε την ενότητα Links για λεπτομέρειες). Σε σύγκριση με την εικόνα που προηγουμένως βασανίστηκε από το Zopflipng, ο Flif μειώνει το μέγεθος του αρχείου του πιο κάτω κατά ~ 10 τοις εκατό. Εντυπωσιακά αποτελέσματα!

Ο τελευταίος μας ήρωας είναι ο Lepton, μια άλλη μορφή ανοιχτού κώδικα που δημοσιεύεται γενναιόδωρα από τους προγραμματιστές Dropbox. Το Lepton κάνει με JPEG τι κάνει το Flif με PNG. Το Lepton μπορεί να μειώσει τα JPEGs έως και 22% στην κατάσταση χωρίς απώλειες, που σημαίνει ότι ο κωδικοποιητής δεν προκαλεί απώλεια ποιότητας σε σύγκριση με το αρχικό αρχείο JPEG. Κάτω από την κουκούλα Lepton συνεπάγεται έξυπνες τεχνικές συμπίεσης αυτών των τεμαχίων 8x8 JPEG. Αντί να γράφετε μηδενικά και αυτά, το Lepton κωδικοποιεί δεδομένα bitmap χρησιμοποιώντας τον αριθμητικό κωδικοποιητικό VP8, το οποίο σέβεται το πλαίσιο γύρω από κάθε μπλοκ.

Η δοκιμή μας απέδειξε το Lepton να είναι πολύ αποτελεσματικό και γρήγορο. Η εντολή έμοιαζε με τα εξής:

 Lepton Original.jpg Output.Lep 

Και σε ένα δεύτερο ή δύο το εργαλείο παρήγαγε το αρχείο .lep που ήταν μικρότερο από σχεδόν το ένα τέταρτο του πρωτοτύπου. Σε σύγκριση με το χρονοβόρο Guetzli, το Lepton είναι πυγμισμένο γρήγορα. Μπορείτε να χρησιμοποιήσετε το Lepton με τον ίδιο τρόπο Dropbox. Η μορφή σάς δίνει τη δυνατότητα να μειώσετε το κόστος αποθήκευσης κατά 20 έως 25 τοις εκατό και αφού είναι τόσο ελεύθερος, μπορείτε να κάνετε αλληλουχίες κωδικοποίησης / αποκωδικοποίησης on-fly χωρίς σημαντικά μειονεκτήματα. Με την ευκαιρία, η εντολή αποκωδικοποίησης είναι εξίσου απλή, χρειάζεται μόνο να ανταλλάξει τα δύο αρχεία και το προκύπτον αρχείο είναι πανομοιότυπο με το αρχικό JPEG:

 Lepton Original.Lep Output.jpg 

Χρησιμοποιήστε τις περιγραφόμενες τεχνικές για να βελτιστοποιήσετε την αποθήκευση δεδομένων χρήστη ή να βελτιώσετε περαιτέρω τις ταχύτητες φόρτωσης των έργων σας στο Web.

Πώς να πάρετε το λογισμικό

Κάθε κομμάτι λογισμικού που περιγράφεται σε αυτό το σεμινάριο είναι ανοιχτή πηγή, ώστε να μπορείτε να το χρησιμοποιήσετε ελεύθερα. Δεν χρειάζεται να ασχοληθούμε να καταρτίζουν τα πάντα από πηγές, καθώς τα περισσότερα από τα παρακάτω εργαλεία έχουν δυαδικές λήψεις. Εδώ είναι πώς να λάβετε το λογισμικό.

Πιάστε το δυαδικό guetzli εδώ . Είναι το πιο εύκολο πράγμα που πρέπει να κάνετε. Το Zopfli δίνει μόνο τον κώδικα (να το χτίσει με 'make') στο Github . Ωστόσο, μπορεί να είναι πιο σοφός για να το πάρετε μέσω του διαχειριστή πακέτου Node.js:

 <Κωδικός> NPM Εγκατάσταση κόμβου-ZOPFLI