Βελτιστοποίηση JPEG για τον παγκόσμιο ιστό - τελικός οδηγός

Η συμπίεση εικόνας βρίσκεται σε κάθε μορφή εγγενών μέσων. Ωστόσο, η διαφορά μεταξύ GIF, PNG και JPEG είναι πως οι πληροφορίες συμπιέζονται και εμφανίζονται στην οθόνη. Υπάρχουν τόσες πολλές συμβουλές για τη σύνθεση μεγάλων μέσων εικόνας που δημοσιεύονται στο διαδίκτυο, και όμως πολλοί σχεδιαστές εξακολουθούν να μην κατανοούν κάποιες από τις βασικές αρχές.

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

Αποφύγετε πάντα την αποθήκευση στο 100%

Δεν θα πρέπει σχεδόν ποτέ να αποθηκεύσετε τις εικόνες σας JPEG με ποιότητα 100%. αυτό θα δεν να παράγουν τα πιο δυνατά “βελτιστοποιηθεί” εικόνα. Πραγματικά υπολογίζει μέσω ενός ορίου βελτιστοποίησης που αυξάνει υπερβολικά τα μεγέθη του αρχείου σας. Ακόμη και σε σύγκριση με την ποιότητα 90% ή 95%, θα δείτε μια σημαντική πτώση στο μέγεθος του αρχείου.

Οι περισσότερες φορές θα σας συνιστούμε να αποθηκεύετε εικόνες πολύ χαμηλότερες από την ποιότητα 90%. Εάν ανοίξετε το παράθυρο διαλόγου Αποθήκευση για Web στο Photoshop, θα παρατηρήσετε ότι προσφέρουν προκαθορισμένες τιμές από τις οποίες μπορείτε να επιλέξετε. Πρόσθεσα τις πιθανές τιμές JPEG παρακάτω - παρατηρήστε τις εγγενείς συμβάσεις ονομασίας.

• Χαμηλός - 10%
• Μεσαίο - 30%
• Υψηλός - 60%
• Πολύ ψηλά - 80%
• Το μέγιστο - 100%

Ακόμα και στο Adobe Photoshop, η ποιότητα εικόνας είναι 60%. Πολλοί προγραμματιστές ιστοσελίδων θα εγγυηθούν μεταξύ 50% - 70% είναι μια ασφαλής σειρά για να κολλήσει με.

Πόσο χαμηλό είναι πολύ χαμηλό?

Οι τιμές που επιλέγετε για τη βελτιστοποίηση εξαρτώνται απόλυτα από το συγκεκριμένο έργο. Θα πρέπει να εξετάσετε ποιοι τύποι γραφικών θα εξάγουν τα υψηλότερα μεγέθη αρχείων - αυτά είναι αυτά που πραγματικά χρειάζονται συμπίεση.

Υποστηρίζω ότι κάτω από το 30% πραγματικά αποκόπτετε τη βασική ποιότητα εικόνας. Άλλοι σχεδιαστές θα ορκιστούν 50% ως α “όριο” στη μείωση της βέλτιστης τιμής. Αλλά η καλύτερη συμβουλή εδώ είναι να δοκιμάσετε διαφορετικές ρυθμίσεις και να δείτε τι φαίνεται καλύτερα! Δεν μπορείτε να πάτε στραβά με μερικές δοκιμαστικές μελέτες που βελτιστοποιούν τις εικόνες JPEG για τον ιστό.

Επιλογές συμπίεσης

Θα πρέπει πρώτα να διευκρινίσουμε τους δύο όρους «συμπίεση» και «ποιότητα» οι οποίοι είναι αντίστροφοι ο ένας στον άλλο. Αυτό σημαίνει ότι αν αποθηκεύσετε ένα αρχείο JPEG με συμπίεση 40% θα έχετε ποιότητα 60% (σε σύγκριση με τη μέγιστη ποιότητα 100% χωρίς συμπίεση).

Αυτές είναι οι πιο βασικές επιλογές που πρέπει να χρησιμοποιήσετε - και θα πρέπει να είναι αρκετές κατά την αποθήκευση για τον ιστό. Οι γενικοί χρήστες δεν μπαίνουν σε πολύ βαθύτερες προσαρμογές. Η υποδειγματοληψία γίνεται σε πιο περίπλοκα θέματα όπου μετατρέπετε τις εικόνες RGB σε YCbCr (Luminance, Chroma Blue, Chroma Red).

(Εικόνα Πηγή: Kara Monroe)

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

(Εικόνα Πηγή: Derek Hatfield)

Ως ενδιαφέρουσα πλευρά σημειώνει το Adobe Photoshop δεν χρησιμοποιεί πάντα υποδειγματοληψία για συμπίεση. Οποιεσδήποτε εικόνες αποθηκεύονται μέσω του “Αποθηκεύστε για ιστό” το παράθυρο διαλόγου θα χρησιμοποιεί μόνο υποδειγματοληψία χρώματος κάτω από μια τιμή ποιότητας 50%.

Διαφορετικά μέσα Web

Ο ιστός είναι επίσης γεμάτος από διαφορετικά είδη μέσων εικόνας. Μπορείτε να έχετε φωτογραφίες, εικονίδια, κουμπιά, κονκάρδες και τόνους άλλων γραφικών. Αλλά είναι αξιοσημείωτο ότι η σύγκριση ποιότητας μεταξύ κουμπιού και φωτογραφίας δεν έχει νόημα.

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

Προγραμματισμός ενός μοντέλου γραφικών

Θέλετε να έχετε ένα οργανωμένο σύστημα αρχείων το οποίο είναι αρκετά εύκολο για να περάσετε. Ορισμένοι webmasters θα επιλέξουν να φιλοξενήσουν τις φωτογραφίες τους σε άλλο μέρος του ιστού - όπως το Flickr ή το Picasa. Ωστόσο, θα εξακολουθείτε να θέλετε να χρησιμοποιήσετε κάποιο εργαλείο συμπίεσης για να μειώσετε τα μεγέθη των εικόνων, αλλά ο τρόπος με τον οποίο θα τα εμφανίσετε στον ιστότοπό σας θα διαφέρει. Αυτό ισχύει ιδιαίτερα με τη δημοφιλή άνοδο των κινητών συσκευών με πρόσβαση στο Διαδίκτυο.

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

Ένα άλλο φανταχτερό εργαλείο για το check out είναι το Yahoo! Smush.it. Πρόκειται για μια εφαρμογή ιστού που βασίζεται σε πρόγραμμα περιήγησης όπου μπορείτε να ανεβάσετε μια εικόνα και το Smush.it θα αφαιρέσει όλα τα περιττά πρόσθετα byte για να βελτιστοποιήσει το μέγεθος του αρχείου. Είναι 100% χωρίς απώλειες που σημαίνει ότι η ποιότητα της εικόνας δεν θα υποβαθμιστεί καθόλου. Και ακόμα καλύτερα μπορείτε να μεταφορτώσετε εικόνες από άμεσες διευθύνσεις URL αν τους έχετε φιλοξενήσει στον ιστότοπό σας ή σε ένα διακομιστή τρίτου μέρους.

Πρόσθετα εργαλεία

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

IrfanView

Αυτό το ελεύθερο λογισμικό για Windows σας επιτρέπει να βλέπετε και να βελτιστοποιείτε οποιοδήποτε σύνολο μεγάλων εικόνων. Μου αρέσει ιδιαίτερα αυτό το λογισμικό επειδή υποστηρίζει μετατροπή παρτίδας από εικόνες σε πολλούς καταλόγους. Μπορείτε να εφαρμόσετε αυτόματα τις ίδιες λειτουργίες σε εκατοντάδες εικόνες JPEG αυτόματα.

Αυτό που είναι ακόμη καλύτερο είναι η υποστήριξη plugin από τρίτους προγραμματιστές. Ένα τέτοιο παράδειγμα είναι το RIOT (Radical Image Optimization Tool). Αυτό το πρόσθετο λειτουργεί για άλλους παρόμοιους επεξεργαστές γραφικών ανοικτού κώδικα όπως το GIMP. Προσφέρει μια προβολή διπλής εικόνας, όπου μπορείτε να ρυθμίσετε με μη αυτόματο τρόπο τις παραμέτρους συμπίεσης για κάθε μία από τις εικόνες σας.

Η υποστήριξη λογισμικού είναι υπέροχη και τα χαρακτηριστικά RIOT είναι πολύ εύχρηστα. Μαζί με τη συμπίεση εικόνας έχετε επίσης πρόσβαση στην κατάργηση πρόσθετων μεταδεδομένων, όπως EXIF ​​και Adobe XMP. Αυτά τα επιπλέον κομμάτια των δεδομένων μπορούν να προστεθούν μόνο στο συνολικό μέγεθος αρχείου και σπάνια χρειάζονται.

ImageOptim για Mac

Εάν χρησιμοποιείτε το OS X και χρειάζεστε μια ισχυρή εφαρμογή συμπίεσης, μην κοιτάξετε ξανά. Το ImageOptim είναι ένα ισχυρό εργαλείο για τη συμπίεση εικόνων για τον ιστό - μερικές φορές ακόμα καλύτερα από το Photoshop.

Η όλη εφαρμογή υποστηρίζει λειτουργικότητα drag-and-drop έτσι είναι εύκολο να βελτιστοποιήσετε μεγάλες σειρές εικόνων. Μπορείτε, επίσης, να εκτελέσετε εντολές απευθείας μέσα από τα σενάρια του κελύφους Terminal και setup. Ανατρέξτε στη σελίδα κώδικα Google για περισσότερες πληροφορίες και τεχνική υποστήριξη.

Υπήρξαν μερικά δευτερεύοντα ζητήματα με την τελευταία 1.3.3 σταθερή απελευθέρωση στην απόδοση pixellated JPEG εικόνων στην Opera. Δοκιμάστε να ελέγξετε όλες τις βελτιστοποιημένες εικόνες σας στα 4 μεγάλα προγράμματα περιήγησης - Chrome, Safari, Firefox και Opera (και ίσως IE). Εάν κάτι φαίνεται κρυμμένο, μπορείτε να δοκιμάσετε να κατεβάσετε το ImageOptim 1.3.0 το οποίο μετατρέπει λίγο καθαρότερο.

Χρήσιμοι πόροι

• JPEG 101: Οδηγός μαθημάτων συντριβής σε JPEG
• Οι σωστές ρυθμίσεις συμπίεσης για την αποθήκευση εικόνων JPG για το WordPress
• Έξυπνες τεχνικές βελτιστοποίησης JPEG
• Πώς να βελτιστοποιήσετε τις εικόνες JPEG για ιστότοπους
• Όλα όσα πρέπει να ξέρετε για τη συμπίεση εικόνας

συμπέρασμα

Η συμπίεση JPEG είναι δύσκολη, καθώς πρέπει να βρείτε τη σωστή ισορροπία μεταξύ ποιότητας και ουσίας. Ακόμη και καθώς οι σύγχρονες ταχύτητες σύνδεσης στο Διαδίκτυο αυξάνονται, υπάρχει ακόμα ανάγκη να μειωθεί το μέγεθος των ιστοσελίδων. Νέα πλαίσια όπως το jQuery και το Typekit μπορούν να προσπεράσουν εκατοντάδες επιπλέον kilobytes, ακόμη και σε ένα καλά βελτιστοποιημένο σχέδιο.

Πρέπει ακόμα να συστήσω το Adobe Photoshop ως το λογισμικό επεξεργασίας εικόνας της πρεμιέρας μου. Υπάρχουν και άλλα παραδείγματα καλύτερα για τη διαδικασία βελτιστοποίησης JPEG. Αλλά οι σχεδιαστές ιστοσελίδων μπορούν να περάσουν με ακόμη λιγότερο γνωστές λύσεις ανοιχτού κώδικα. Αν έχετε παρόμοια κόλπα ή ιδέες σχετικά με τη συμπίεση JPEG παρακαλώ μοιραστείτε μαζί μας στην παρακάτω περιοχή συζήτησης.