Βελτιστοποίηση και συμπίεση png και jpg, jpeg χωρίς απώλεια ποιότητας. Η βελτιστοποίηση εικόνας ως σημαντικό στοιχείο της διαδικασίας CRO

Αρκετά από τα περισσότερα διάσημα προγράμματαγια βελτιστοποίηση εικόνων. Επιτρέψτε μου να κάνω μια κράτηση αμέσως: μιλάμε για αλγόριθμους για τη σημαντική μείωση του μεγέθους του αρχείου, «με απώλειες» («απώλειες»). Η συμπίεση JPEG χωρίς απώλειες δεν παρουσιάζει ιδιαίτερο ενδιαφέρον, καθώς το JPEG είναι από μόνο του μια μορφή για την αποθήκευση εικόνων με «απώλειες» και η συμπίεση χωρίς απώλειες με κάθε μέσο δίνει μέγιστο κέρδος 3-5%. Εδώ μιλάμε για προγράμματα που μπορούν να μειώσουν το μέγεθος του αρχείου αρκετές φορές.

Παρεμπιπτόντως, η βελτιστοποίηση των αρχείων που ανεβαίνουν από τους συμμετέχοντες έχει εφαρμοστεί από καιρό στο Gallerix Art Club, πραγματοποιείται αυτόματα σε δύο στάδια: το πρώτο - αμέσως μετά τη μεταφόρτωση (χρησιμοποιείται το Jpegtran) και το δεύτερο - μετά από κάποιο χρονικό διάστημα. το πρόγραμμα JpegMini.

Εάν το οικιακό σας αρχείο δεν έχει βελτιστοποιηθεί ποτέ και τώρα καταλαμβάνει, για παράδειγμα, 100 GB, είναι πολύ πιθανό να μειώσετε αυτόν τον αριθμό κατά 2-2,5 φορές (έως 45-50 GB) χωρίς να παρέμβετε στην ποιότητα της εικόνας και κατά 3-4 φορές (έως 20- 25 GB) με ελαφρά, όχι πολύ αισθητή μείωση της ποιότητας.

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

Για τους σκοπούς αυτούς, υπάρχουν αρκετές εμπορικές λύσεις στην αγορά και, σύμφωνα με πολλούς Ρώσους και ξένους συναδέλφους, το JpegMini είναι το νούμερο ένα όσον αφορά ένα σύνολο παραμέτρων. Ο σκοπός αυτής της δοκιμής είναι να αντιπαραβάλει όλα τα εμπορικά και δωρεάν εργαλεία για βελτιστοποίηση εικόνας, προκειμένου να ανανεωθεί ο «πίνακας κατάταξης».

Αρχεία πηγής

Το πρώτο από αυτά - γυρισμένο στο χέρι σε κινητό τηλέφωνο του παρελθόντος - Σημείωση Samsung II, με ελάχιστη ανάλυση αρχείου. Καθένας από εμάς έχει εκατομμύρια τέτοιες φωτογραφίες, τέτοια αρχεία δεν βραβεύονται με ποιότητα, υπάρχουν πολλά και συνήθως είναι λίγο θολά και πολύ κοκκώδη.

Το δεύτερο αρχείο είναι εντελώς τεχνικής προέλευσης - είναι ένας πίνακας διαβάθμισης που δημιουργήθηκε χρησιμοποιώντας την Adobe Photoshop και αποθηκεύτηκε με 100% ποιότητα. Ορατές αλλαγέςΗ επεξεργασία αυτού του πίνακα θα χρησιμεύσει για την αξιολόγηση της τελικής ποιότητας.

Το τρίτο αρχείο γυρίστηκε σε μια "μέση" ερασιτεχνική κάμερα Panasonic GF3 in αυτόματη λειτουργίααπό το χέρι Πρόκειται για κάμερα οικιακού συστήματος, χωρίς καθρέφτες, αλλά με εναλλάξιμα οπτικά. Χάρη στην οπτική σταθεροποίηση, η ευκρίνεια είναι καλύτερη εδώ, δεν είναι κινητό τηλέφωνο, αλλά ο θόρυβος είναι σχεδόν ο ίδιος.

Το τελευταίο αρχείο είναι από το Unsplash.com, του Karl Fredrickson. Λειτουργεί ως παράδειγμα φωτογραφίας που τραβήχτηκε με επαγγελματική κάμερα με ακριβά οπτικά.

Εργαλεία

JpegMini

JpegMini επί πληρωμή πρόγραμμα. Υπάρχουν εκδόσεις για 20 και 149 USD, καθώς και μια ακριβή έκδοση διακομιστή. Οι εκδόσεις για επιτραπέζιους υπολογιστές λειτουργούν το ίδιο, η νεότερη έχει δύο περιορισμούς: στην ταχύτητα επεξεργασίας και στην είσοδο μέγιστη ανάλυσηαρχείο (28MP), το παλαιότερο περιορίζεται από το μέγεθος αρχείου (60MP). Λειτουργεί σε Windows και Mac.

TinyJPG

Υπάρχει μια πληρωμένη έκδοση με τη μορφή plugin για Adobe Photoshop(50 USD) και μια δωρεάν διαδικτυακή έκδοση με περιορισμούς στο μέγεθος του αρχείου και τον αριθμό των λήψεων ανά ημέρα (το οποίο, ωστόσο, είναι πολύ εύκολο στη διαχείριση). Το πρόσθετο λειτουργεί επίσης σε Windows και Mac. Τα πρώτα 500 αρχεία ανά μήνα μέσω API είναι δωρεάν και μετά 0,009 USD ανά αρχείο.

Compressor.io

Γνωστή διαδικτυακή υπηρεσία. Το μόνο όριο είναι το μέγιστο μέγεθος αρχείου, 10MB.

Kraken.io

Δημοφιλές στη Δύση επαγγελματική υπηρεσίαμε υψηλούς δασμούς και αυστηρές ποσοστώσεις. Η δωρεάν διαδικτυακή έκδοση είναι περιορισμένη μέγιστο μέγεθοςΤο αρχείο είναι 1 MB και δύσκολα μπορεί να γίνει αντιληπτό ως εργαλείο. Αυτό δεν είναι τίποτα άλλο από μια έκδοση επίδειξης - μια κανονική ερασιτεχνική κάμερα δεν μπορεί να παράγει ένα αρχείο μικρότερο από 2-3 MB. Τιμολόγια για Χρήση APIξεκινήστε από 5 USD ανά μήνα για εισερχόμενο όγκο 500 MB.

ConvertImage.net

Ένα σύνολο διαδικτυακών εργαλείων για επεξεργασία εικόνας, συμπεριλαμβανομένου ενός συμπιεστή Jpeg. Εντελώς δωρεάν.

Jpeg-Optimizer.com

Ηλεκτρονική υπηρεσία. Εντελώς δωρεάν και χωρίς περιορισμούς. Υπάρχει χειροκίνητη ρύθμιση του επιπέδου συμπίεσης.

Optimizilla.com

Δωρεάν διαδικτυακή υπηρεσία. Η ίδια μηχανή βρίσκεται σε άλλους τομείς. Πολυγλωσσική διεπαφή. Χειροκίνητη εγκατάστασηεπίπεδο συμπίεσης (η ρύθμιση εμφανίζεται μετά τη φόρτωση της εικόνας). Όχι περισσότερα από 20 αρχεία κάθε φορά.

DynamicDrive.com

Ένα σύνολο δωρεάν διαδικτυακών εργαλείων επεξεργασίας εικόνας. Βελτιστοποιημένο με όριο αρχείων 2,8 MB. Παράγει πολλές έτοιμες εικόνες με διαφορετικά επίπεδα συμπίεσης για να διαλέξετε.

ShortPixel.com

Μερικοί νέα υπηρεσίαμε πληθώρα διαφορετικών τιμολογιακά σχέδια, υπάρχει μηνιαία συνδρομή και χρεώσεις πακέτων (10.000 αρχεία για 9,99 USD). Λειτουργεί μέσω API ή διεπαφής ιστού (έως 20 αρχεία τη φορά). Όριο μεγέθους αρχείου σε δωρεάν online έκδοση- έως 10 MB.

ACDSδείτε το Ultimate

ACDSδείτε το Ultimate 9 επαγγελματικό πρόγραμμαγια την οργάνωση και την επεξεργασία εικόνων για Windows. Αποθήκευση με ενεργοποιημένο το "Optimize Huffman codes" και το "Color Component Sampling", ποιότητα 70%. Το πρόγραμμα πληρώνεται, η τιμή ξεκινά από 40 USD για την πιο μέτρια έκδοση, αλλά πολλά δωρεάν προγράμματα έχουν παρόμοιες ρυθμίσεις. Αυτό είναι ένα παράδειγμα καθαρής εξοικονόμησης με λίγη βελτιστοποίηση χωρίς απώλειες.

"Καθαρό" JPEG

Αποθήκευση αρχείου με ποιότητα περίπου 70% (9 στα 12) από το Adobe Photoshop CS6, μια παραλλαγή της «βασικής» μορφής. Εδώ είναι ένα καθαρό JPEG που χρησιμοποιεί μόνο τις δυνατότητες της μορφής, του «χαμηλότερου σημείου αναφοράς», που διατίθεται δωρεάν από οποιοδήποτε πρόγραμμα που μπορεί να αποθηκεύσει σε μορφή JPG.

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

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

Τα JpegMini και Kraken βρίσκονταν στο κάτω μέρος του πίνακα, ταξινομημένα ανάλογα με το μέγεθος του τελικού αρχείου, αλλά μόνο αυτές οι δύο τεχνολογίες συμπιέζουν το αρχείο, αποθηκεύοντας την εικόνα εντελώς ειλικρινά. Στην κατηγορία «10 πόντων», το JpegMini φαίνεται πιο ελκυστικό από όλες τις πλευρές.

Με μια πολύ ελαφρώς λιγότερο αποδεκτή εικόνα, αποδείχθηκε ότι το Compressor.io συμπιέζει καλύτερα μικρά αρχεία και το Optimizilla.com συμπιέζει μεγάλα, αλλά αυτό είναι ένα πολύ αυθαίρετο συμπέρασμα στο πλαίσιο αυτής της δοκιμής.

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

Η τελευταία υπηρεσία αποδείχθηκε ενδιαφέρουσα - ShortPixel. Τα τεχνουργήματα είναι πολύ αισθητά, αλλά εάν συμπιέσετε την εικόνα σε αυτό το μέγεθος χρησιμοποιώντας την ίδια τη μορφή JPG, η εικόνα αποδεικνύεται αισθητά χειρότερη. Το ShortPixel είναι πιο προσανατολισμένο στο API και είναι σχετικά φθηνό, αλλά πολύ καταστροφικό για την εικόνα.

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

Ένα ενδιαφέρον χαρακτηριστικό του TinyJPG με τη μορφή πρόσθετου: μετά την επεξεργασία, το αρχείο μπορεί να είναι είτε 8-10 φορές μικρότερο από το αρχικό μέγεθος είτε μιάμιση έως δύο φορές μεγαλύτερο.

Η δοκιμαστική εικόνα Νο. 2 συμπιέστηκε καλύτερα από το ShortPixel, αλλά στα περισσότερα αρχεία με ένας μεγάλος αριθμόςμικρές λεπτομέρειες, ο νικητής είναι η διαδικτυακή έκδοση του TinyJPG. Το αρχείο αποδεικνύεται μικρότερο και η αρχική εικόνα δεν παραμορφώνεται τόσο πολύ. Ωστόσο, το TinyJPG δέχεται αρχεία όχι μεγαλύτερα από 5 MB και το ShortPixel, ακόμη και στη δωρεάν έκδοση, δέχεται αρχεία έως και 10 MB.

Αλλο σημαντικος ΠΑΡΑΓΟΝΤΑΣμετρήσεις (εκτός από το τελικό μέγεθος αρχείου) - ευκολία χρήσης σε ροή. Για παράδειγμα, εάν αναλάβετε τη βελτιστοποίηση ενός οικιακού αρχείου 100 GB για πρώτη φορά, η πλήρης επεξεργασία του χρησιμοποιώντας διαδικτυακές υπηρεσίες θα είναι πολύ εντατική και χρονοβόρα λόγω των περιορισμών και της ανάγκης να ανεβάσετε αυτόν τον τόμο τμηματικά στον διακομιστή και πίσω. Παρά το γεγονός ότι, για ένα μέτριο 20 USD, με το JpegMini αυτό θα απαιτήσει μία κίνηση του ποντικιού (κυριολεκτικά: απλά πρέπει να σύρετε τον ριζικό φάκελο με τις εικόνες στο παράθυρο του προγράμματος).

Παρεμπιπτόντως, το πρόσθετο TinyJPG για το Photoshop δεν έχει σχεδιαστεί ως φίλτρο, αλλά ως κανάλι εξαγωγής, π.χ. Δεν είναι κατάλληλο για τη δημιουργία ενός σεναρίου αυτοματισμού στο PS. Διόρθωση: από τον ιστότοπο του κατασκευαστή μπορείτε να κατεβάσετε σενάρια αυτοματισμού που λειτουργούν σε οποιαδήποτε έκδοση του Photoshop και στο Photoshop CC, η εξαγωγή μέσω μιας προσθήκης είναι μια λειτουργία για μαζική επεξεργασία. Το πρόσθετο δεν έχει περιορισμούς - δοκιμασμένο σε αρχείο με ανάλυση 130MP (ο χρόνος επεξεργασίας είναι περίπου 7 λεπτά σε έναν αρκετά ισχυρό υπολογιστή).

Γενικά, για μαζική επεξεργασία υπάρχουν μόνο δύο επιλογές - χρήση του API και του JpegMini. Για επεξεργασία μέσω του API θα πρέπει να πληρώσετε για κάθε επεξεργασμένο αρχείο.

συμπεράσματα

• Όλα τα εργαλεία που σας επιτρέπουν να αποκτήσετε ένα σχετικά αποδεκτό αρχείο μικρότερου μεγέθους από το JpegMini παρέχουν - είτε υποβαθμίζουν οπτικά την εικόνα και είναι κατώτερα από αυτήν στην ευκολία χρήσης είτε έχουν μια λιγότερο ελκυστική τιμολογιακή πολιτική - βάσει χρόνου ή αρχείο προς αρχείο ενοικίαση έναντι μιας εφάπαξ αγοράς από το JpegMini.
• Για περιπτώσεις όπου η ποιότητα της εικόνας είναι υψίστης σημασίας και εάν η μείωση του μεγέθους του αρχείου σε βάρος της οπτικής υποβάθμισης είναι απαράδεκτη, το JpegMini παραμένει το καλύτερο εργαλείο.
• Για περιπτώσεις όπου η ποιότητα των αρχείων προέλευσης μπορεί να παραμεληθεί ελαφρώς για λόγους συμπίεσης, είναι λογικό να χρησιμοποιείτε και τις δύο εκδόσεις του TinyJPG, ανάλογα με την εργασία.
• Εάν επιλέξετε μόνο από δωρεάν συμπιεστές, η καλύτερη εμφάνιση είναι τα Compressor.io και Optimizilla.com, τα οποία σχεδόν δεν χαλούν την εικόνα, παρά το γεγονός ότι το τελικό αρχείο είναι αισθητά μικρότερο από το JpegMini.
• Οι ιδιοκτήτες ειδησεογραφικών τοποθεσιών με μεγάλη ροή εικονογραφήσεων, των οποίων οι ισχυρισμοί ποιότητας δεν είναι τόσο έντονοι, είναι λογικό να δίνουν προσοχή στο ShortPixel και στο TinyJPG. Τα πλεονεκτήματά τους είναι οι προσιτές τιμές, η συμπίεση αρχείων και η εργασία μέσω API. Και αν η ποιότητα έχει σημασία (αλλά τα χρήματα όχι), τότε είναι λογικό να συνδέσετε το Kraken μέσω του API ή, στην περίπτωση πολύ μεγάλους όγκους, έκδοση διακομιστή του JpegMini.

ανασκόπηση

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

Η (προφανώς) κλειστή υπηρεσία Google PageSpeed ​​​​Insights είναι ευρέως γνωστή, η οποία σας επιτρέπει να ελέγχετε οποιονδήποτε δημοσιευμένο ιστότοπο για ταχύτητα φόρτωσης και, με βάση τα αποτελέσματα του ελέγχου, να δίνετε βαθμολογία σε κλίμακα εκατό βαθμών και συστάσεις. Συνήθως, οι συστάσεις περιλαμβάνουν τη βελτιστοποίηση και τη μείωση του κώδικα προγράμματος, τη συμπίεση εικόνων, τη ρύθμιση της προσωρινής αποθήκευσης διακομιστή και προγράμματος περιήγησης κ.λπ.

Για τον μέσο πόρο περιεχομένου σε ένα δωρεάν CMS όπως το WordPress (ναι, μιλάω για το δικό μου και για χιλιάδες παρόμοιους ιστότοπους), οι επιλογές βελτιστοποίησης περιορίζονται στην εγκατάσταση προσθηκών προσωρινής αποθήκευσης και στην εργασία με εικόνες. "Συντομεύστε" το θέμα και συντομεύστε HTML, CSS και Κώδικας JavaScriptΔεν μπορούν όλοι, και τέτοιες ενέργειες, κατά κανόνα, οδηγούν σε διάφορα σφάλματα και απώλεια λειτουργικότητας.

Για να εργαστείτε με εικόνες στο WordPress, υπάρχει ένας αριθμός πρόσθετων που μετατρέπουν και συμπιέζουν εικόνες με ή χωρίς απώλεια, εν κινήσει ή κατόπιν αιτήματος. Το καλύτερο, κατά τη γνώμη μου, από αυτά τα πρόσθετα είναι το EWWW Image Optimizer.

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

Όλα αυτά λειτουργούν σε διάφορους βαθμούς, αλλά υπάρχει ένας καθολικός τρόπος για να βελτιστοποιήσετε τις εικόνες για οποιονδήποτε ιστότοπο που εκτελείται όχι μόνο στο WordPress - για να ξεκινήσετε, χρειάζεστε μόνο έναν λογαριασμό Google.

Μιλάμε, παραδόξως, για το Google Photos - μια υπηρεσία που έχει σχεδιαστεί για να αποθηκεύει φωτογραφίες που τραβήχτηκαν σε smartphone Android και να δημιουργεί αντίγραφα ασφαλείας εικόνων και βίντεο χρηστών υπολογιστών που έχουν εγκαταστήσει ένα ειδικό βοηθητικό πρόγραμμα.

Συνιστάται από ειδικούς στη βοήθεια του PageSpeed ​​Insights Διαδικασία GoogleΗ βελτιστοποίηση εικόνας περιγράφεται ως εξής:

Βελτιστοποιήστε τις εικόνες σας

Αυτός ο κανόνας ενεργοποιείται όταν το PageSpeed ​​Insights ανιχνεύσει ότι το μέγεθος των εικόνων στη σελίδα μπορεί να μειωθεί χωρίς μεγάλη απώλεια ποιότητας.

γενικές πληροφορίες

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

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

Χρησιμοποιήστε εργαλεία συμπίεσης εικόνας

Υπάρχουν εργαλεία που εκτελούν πρόσθετη συμπίεση σε αρχεία JPEG και PNG χωρίς απώλεια ή μείωση της ποιότητας. Για αρχεία JPEG, συνιστάται η χρήση jpegtran ή jpegoptim (διαθέσιμο μόνο σε Linux, εκτέλεση με την επιλογή --strip-all). Για PNG είναι καλύτερο να χρησιμοποιήσετε OptiPNG ή PNGOUT.

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

Ας δούμε ένα παράδειγμα. Σήμερα τράβηξα φωτογραφίες για επόμενη δημοσίευσηδιπλώστε το μαχαίρι και περάστε τις φωτογραφίες που προέκυψαν μέσω της εφαρμογής FastStone Image Viewer («καλλιτεχνική» περικοπή + αλλαγή μεγέθους έως και 1280 pixel σε πλάτος). Το αποτέλεσμα ήταν ένας φάκελος με οκτώ αρχεία βάρους άνω των 3 (!) megabyte.

Προφανώς, το πρόσφατα εγκατεστημένο FastStone Image Viewer αποθηκεύει από προεπιλογή τις επεξεργασμένες φωτογραφίες σε σχεδόν μέγιστη ποιότητα, γεγονός που οδηγεί σε αδικαιολόγητα μεγάλο «βάρος» αρχείων. Αλλά μια τέτοια ρύθμιση στην περίπτωσή μας είναι αρκετά δικαιολογημένη, επειδή οι αλγόριθμοι της Google συμπιέζουν φωτογραφίες χωρίς ορατή απώλεια ποιότητας με 100% αναβάθμιση, πράγμα που σημαίνει ότι οι εικόνες καλής ποιότητας θα παραμείνουν έτσι ακόμα και μετά τη μεταφόρτωση στο Google Photos.

Για ευκολία, είναι προτιμότερο να τοποθετήσετε τις φωτογραφίες που έχετε λάβει σε ένα νέο άλμπουμ, το οποίο μπορεί να ληφθεί ολόκληρο σχεδόν αμέσως μετά τη δημιουργία ως αρχείο ZIP:

Εάν συγκρίνετε τις συμπιεσμένες φωτογραφίες στο Google Photos με τις αρχικές, κερδίζετε σημαντική οικονομία.

816 KB έναντι 3,27 MB. Ταυτόχρονα, η ποιότητα των φωτογραφιών, κατά τη γνώμη μου, δεν έπαθε καθόλου. Το Facebook και το VKontakte θα πρέπει να μάθουν από την Google πώς να βελτιστοποιούν τις φωτογραφίες. Επιπλέον, το GPhotos είναι εξοπλισμένο με καλά εργαλεία επεξεργασίας εικόνας - από την εφαρμογή φίλτρων έως τη χειροκίνητη ρύθμιση αντίθεσης, φωτεινότητας, κορεσμού κ.λπ.

Έτσι, το Google Photos δεν είναι μόνο ένα εξαιρετικό σύννεφο για την αποθήκευση και δημοσίευση φωτογραφιών, αλλά και ισχυρό εργαλείοβελτιστοποίηση εικόνων για δημοσίευση στον Ιστό. Μόνο στην περίπτωση του WordPress, μην ξεχάσετε να απενεργοποιήσετε τα πρόσθετα βελτιστοποίησης και την ίδια ενότητα Photon jetpack, διαφορετικά οι φωτογραφίες που έχουν ήδη προετοιμαστεί για δημοσίευση θα υποστούν πρόσθετη συμπίεση, η οποία θα οδηγήσει σε αισθητή απώλειαποιότητα (για παράδειγμα, δείτε στιγμιότυπα οθόνης που έχουν περάσει από το Google Photos και μετά το Photon σε αυτήν την ανάρτηση).

Στην τρέχουσα εποχή της τεχνολογίας κινητής τηλεφωνίας, η βελτιστοποίηση των εικόνων σε μορφές PNG και JPG, JPEG έχει γίνει και πάλι επίκαιρη, όπως ήταν σχετικό εκείνες τις μέρες που το Διαδίκτυο μόλις έμπαινε στη ζωή μας και ήταν παγκοσμίως αργό και dial-up. Το Mobile Internet, φυσικά, δεν είναι απολύτως σωστό για σύγκριση με το dial-up, αλλά σε μέρη όπου η σύνδεση είναι κακή, η ταχύτητα πρόσβασης είναι αρκετά χαμηλή. Και ακόμη και εκείνες τις μέρες, ο χρήστης δεν είχε πού να πάει και έπρεπε να περιμένει να φορτώσει η σελίδα. Τώρα το Διαδίκτυο έχει μεγαλώσει, υπάρχει μια μεγάλη ποικιλία από ιστότοπους. Ο χρήστης έγινε ιδιότροπος και ανυπόμονος και ο μέσος χρόνος φόρτωσης της σελίδας μειώθηκε σημαντικά. Είναι πιο εύκολο για τον χρήστη να βρει έναν άλλο πιο γρήγορο ιστότοπο.
Ναι, και οι γίγαντες αναζήτησης όπως η Google ή η Yandex άρχισαν να δίνουν προσοχή στο πόσο γρήγορα φορτώνονται οι ιστότοποι, δίνοντας προτίμηση στα αποτελέσματα αναζήτησης σε αυτούς που είναι πιο γρήγοροι. Το βάρος της σελίδας παίζει επίσης σημαντικό ρόλο σε αυτό, το οποίο, με τη σειρά του, εξαρτάται σε μεγάλο βαθμό από το βάρος των εικόνων που βρίσκονται σε αυτήν. Είναι προφανές ότι έχοντας συμπαγή συμπιεσμένες εικόνεςωφελεί όλους. Επομένως, εδώ θέλω να μιλήσω για το πώς να προετοιμάσετε τα αρχεία σας PNG και JPG, JPEG για μεταφόρτωση στη φιλοξενία.

Βασική βελτιστοποίηση εικόνας

Αυτό περιλαμβάνει την περικοπή περιττών πεδίων, τη μείωση του βάθους των χρωμάτων, την αφαίρεση σχολίων και την αποθήκευση της εικόνας σε κατάλληλη μορφή. Για να το κάνετε αυτό, μπορείτε να χρησιμοποιήσετε το Adobe Photoshop ή, αν δεν το έχετε, το MS Paint ή το GIMP.
Ακόμη και η βασική περικοπή της εικόνας θα μειώσει αρκετά καλά το βάρος της.

Πώς να κάνετε μια εικόνα μικρότερη στο MS Paint

Χρησιμοποιώντας το MS Paint ως παράδειγμα, θα σας δείξω πώς να μειώσετε μια εικόνα στο απαιτούμενο μέγεθος.
Ας πάρουμε για παράδειγμα το λογότυπο NGINX και την εικόνα του nginx.png με διαστάσεις 2000x417 pixel, το οποίο πρέπει να περικοπεί στα 1024 σε πλάτος, επειδή Αυτό είναι το πλάτος της διάταξης της σελίδας και δεν υπάρχει λόγος να κάνετε περισσότερα.

Η έξοδος είναι μια εικόνα που έχει υποστεί ελάχιστη βασική βελτιστοποίηση. Ήρθε η ώρα να προχωρήσετε στη συμπίεση του βάρους της.

File Optimizer για συμπίεση PNG και JPG, JPEG

Το πιο απλό και γρήγορος τρόποςεπιτύχετε βέλτιστη συμπίεση εικόνας χωρίς απώλεια ποιότητας - χρησιμοποιήστε το πρόγραμμα File Optimizer

Επίσημος ιστότοπος και περιγραφή προγράμματος :

Λήψη του File Optimizerμπορείς με

Περιγραφή . Είναι αποτελεσματικός βελτιστοποιητήςόχι μόνο για εικόνες, αλλά και για αρχεία .pdf, .docx, txt και άλλα αρχεία κειμένου, ήχου και βίντεο, καθώς και αρχεία. Μπορείτε να βρείτε μια πλήρη λίστα με τις υποστηριζόμενες επεκτάσεις στη διεύθυνση Επίσημη Σελίδαέργο.
Εδώ είναι μερικά από τα βοηθητικά προγράμματα που χρησιμοποιούνται στην εργασία: AdvanceCOMP, APNG Optimizer, CSSTidy, DeflOpt, defluff, Gifsicle, Ghostcript, jhead, jpegoptim, jpegtran, Leanify, mozjpeg, MP3packer, mp4v2, OptiPNG, PngOptimizer, PNGOUT,Pwong,pworit,pngout b, zΕπανσυμπίεση. Νομίζω ότι ακόμη και αυτή η μερική λίστα είναι αρκετά εντυπωσιακή.

Εγκατάσταση και χρήση του File Optimizer

Πρώτη λήψη τελευταία έκδοσηπρογράμματα είτε με τη μορφή προγράμματος εγκατάστασης είτε αρχείου με αρχεία. Παρεμπιπτόντως, το αρχείο έχει μια έκδοση για εκδόσεις 32-bit και 64-bit των Windows.

Η διεπαφή είναι αρκετά απλή και διαισθητική.
Δεν χρειάζεται ρυθμίσεις, αλλά μπορείτε να προσαρμόσετε ορισμένες μορφές για τον εαυτό σας χρησιμοποιώντας το κουμπί Επιλογές...
Χρήση . Είτε σύρετε και αποθέτετε τα απαιτούμενα αρχεία και ακόμη και φακέλους (καταλόγους) στο παράθυρο του προγράμματος, είτε επιλέγετε αυτά που χρειάζεστε από το μενού Προσθήκη αρχείων....
Για βελτιστοποίηση αρχείων, κάντε κλικ στην επιλογή Βελτιστοποίηση όλων των αρχείων

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

Κατά τη γνώμη μου, το File Optimizer κάνει πολύ καλά τη δουλειά του.
Το μόνο αρνητικό είναι ότι αν η λίστα των αρχείων είναι μεγάλη, μπορείτε να περιμένετε πολύ για αποτελέσματα, αλλά αξίζει τον κόπο.

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

Συμπιέστε PNG χωρίς απώλεια ποιότητας

Ας δούμε 3 προγράμματα για βελτιστοποίηση PNG:

• Adobe Photoshop
• OptiPNG
• PNGOUT

Ας τα συγκρίνουμε ως προς την ποιότητα συμπίεσης εικόνας. Θα συμπιέσουμε το nginx.png από την προηγούμενη ενότητα. Το αρχικό βάρος είναι 27,5 KB.

Συμπιέστε το PNG χρησιμοποιώντας το Adobe Photoshop

Το πρώτο στη λίστα είναι το Photoshop, το οποίο είναι πολύ γνωστό σε όλους. Ένας πολυλειτουργικός επεξεργαστής για έναν σχεδιαστή που μπορεί να κάνει σχεδόν τα πάντα, συμπεριλαμβανομένης της συμπίεσης εικόνων.
Άνοιγμα στο Photoshop Αρχείο-Αποθήκευση για Webή χρησιμοποιήστε έναν συνδυασμό Alt+Shift+Ctrl+S

Ως αποτέλεσμα, παίρνουμε 22,7 KB, δηλ. συρρικνώθηκε κατά 17,5%

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

Χρήση OptiPNG για συμπίεση PNG

Πώς να εγκαταστήσετε και να χρησιμοποιήσετε το OptiPNG

Κατεβάσαμε το .exe, το ανεβάσαμε στο C:\Windows, πήραμε το επιθυμητό αρχείο PNG και το βάλαμε σε κάποιο φάκελο. Τώρα, χρησιμοποιώντας το FAR Manager ή άλλο διαχειριστή αρχείων με υποστήριξη κονσόλας, μεταβείτε σε αυτόν τον φάκελο και εισαγάγετε την εντολή στην κονσόλα

Optipng -o7 nginx.png

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

18,8 KB, δηλ. συρρικνώθηκε κατά 31,6%, σχεδόν το ένα τρίτο. Καθόλου άσχημα, έτσι δεν είναι; Το Photoshop αποδείχθηκε πολύ χειρότερο.

Χρήση PNGOUT για συμπίεση PNG

Πώς να εγκαταστήσετε και να χρησιμοποιήσετε το PNGOUT

Όλα είναι ακριβώς τα ίδια όπως για το OptiPNG. Κατεβάστε το PNGOUT.exe, αποθέστε το στο C:\Windows, ανοίξτε σε έναν διαχειριστή αρχείων, για παράδειγμα, Far φάκελο διαχειριστήμε PNG και μέσα γραμμή εντολώνγράφω

Pngout nginx.png

Το αποτέλεσμα είναι παρακάτω

Το αποτέλεσμα είναι 23,4 KB, δηλ. κατάφερε να συμπιεστεί κατά 15%. Πολύ καλά.

Γενικά, θα πω αμέσως ότι είχα διαφορετικά αποτελέσματα διαφορετικά αρχεία, σε ορισμένα μέρη το PNGOUT λειτούργησε πιο αποτελεσματικά, σε άλλα το OptiPNG, γι' αυτό σας συμβουλεύω να εκτελέσετε τις εικόνες μία προς μία και στα δύο βοηθητικά προγράμματα.

Πώς να συμπιέσετε γρήγορα το PNG σε OptiPNG και PNGOUT

Δημιουργήστε ένα αρχείο png.reg και γράψτε εκεί τα δεδομένα μητρώου

Windows Registry Editor Έκδοση 5.00 @="Εκτέλεση OptiPNG σε φάκελο" @="cmd.exe /c \"TITLE Εκτέλεση OptiPNG στο %1 && FOR /r \"%1\" %%f IN (*.png) DO optipng -o7 \"%%f\" \"" @="Εκτέλεση PNGOUT σε φάκελο" @="cmd.exe /c \"TITLE Εκτέλεση PNGOUT σε %1 && FOR /r \"%1\" %%f IN (*.png) DO pngout \"%%f\" \""

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

Για να αφαιρέσετε τα πάντα από το μενού περιβάλλοντος, γράψτε τον ακόλουθο κώδικα στο png.reg και εκτελέστε τον

Επεξεργαστής Μητρώου των Windows Έκδοση 5.00 [-HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\OptiPNG] [-HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\OptiPNG\Command\ESOFT\ESOFT\ESOFT\ESOFT_INTERNATIONAL] PNGOUT] [ -HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\PNGOUT\command]

JPG, JPEG συμπίεση χωρίς απώλεια ποιότητας

Για τη βελτιστοποίηση των JPG, JPEG, κατ' αναλογία με το PNG, υπάρχουν βοηθητικά προγράμματα: jpegtran και jpegoptim. Φυσικά, μπορείτε να χρησιμοποιήσετε το Photoshop, αλλά για συμπίεση JPG και JPEG συνιστώ ανεπιφύλακτα τη χρήση τους.

Πώς να εγκαταστήσετε, να ρυθμίσετε και να χρησιμοποιήσετε το jpegtran

jpegtran - ισχυρό βοηθητικό πρόγραμμα, που σας επιτρέπει να εκτελείτε τόσο απλή συμπίεση JPG χωρίς απώλεια ποιότητας, όσο και συμπίεση με ένα ορισμένο επίπεδο anti-aliasing, ακόμη και μετατροπή σε Progressive JPEG.
Μπορείτε να κάνετε λήψη του jpegtran εδώ http://jpegclub.org/jpegtran/ (αναζητήστε και κατεβάστε το jpegtran.exe).

Πώς να συμπιέσετε JPG, JPEG χρησιμοποιώντας jpegtran

Ανεβάστε το jpegtran.exe στο C:\Windows
Στη συνέχεια, ανοίξτε το φάκελο με το JPEG που θέλετε στο Far Manager και εισάγετε στην κονσόλα

Jpegtran -copy none -optimize -outfile min.1.jpg 1.jpg # Βασική βελτιστοποίηση 1.jpg # -copy none αφαιρεί μεταδεδομένα από JPG # -optimize βελτιστοποιεί την εικόνα

Προοδευτικό JPG, JPEG

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

Jpegtran -progressive -outfile 1.jpg 1.jpg # Μετατρέπει τη μορφή 1.jpg σε Προοδευτική

Πώς να ελέγξετε εάν μια εικόνα είναι προοδευτική JPEG

Προηγμένες δυνατότητες του jpegtran

Όλα καλύπτονται εδώ πιθανές επιλογέςχρησιμοποιώντας jpegtran

Jpegtran --χρήση βοήθειας: jpegtran inputfile outputfile Διακόπτες (τα ονόματα μπορεί να είναι συντομευμένα): -αντιγραφή κανένας Δεν αντιγράψτε επιπλέον δείκτες από το αρχείο προέλευσης -αντιγραφή σχολίων Αντιγραφή μόνο δεικτών σχολίων (προεπιλογή) -αντιγραφή όλων Αντιγραφή όλων των επιπλέον δεικτών -βελτιστοποίηση πίνακα Βελτιστοποίηση Huffman ( μικρότερο αρχείο, αλλά αργή συμπίεση) -προοδευτική Δημιουργία προοδευτικού αρχείου JPEG Διακόπτες για την τροποποίηση της εικόνας: -περικοπή WxH+X+Y Περικοπή σε ορθογώνια υποπεριοχή -αναστροφή Κατοπτρική εικόνα (αριστερά-δεξιά ή πάνω-κάτω) -Κλίμακα του γκρι Μείωση σε κλίμακα του γκρι ( παράλειψη δεδομένων χρώματος) -τέλεια Αποτυχία εάν υπάρχουν μπλοκ άκρων που δεν μετασχηματίζονται -περιστροφή Περιστροφή εικόνας (μοίρες δεξιόστροφα) -Κλίμακα M/N Κλίμακα εξόδου εικόνας κατά κλάσμα M/N, π.χ., 1/8 -μεταφορά Μεταφορά εικόνας - Εγκάρσια μετάθεση image -trim Απόθεση μπλοκ άκρων που δεν μετασχηματίζονται -wipe WxH+X+Y Σκουπίστε (γκρι έξω) μια ορθογώνια υποπεριοχή Διακόπτες για προχωρημένους χρήστες: -arithmetic Χρήση αριθμητικής κωδικοποίησης -restart N Ορισμός διαστήματος επανεκκίνησης σε σειρές ή σε μπλοκ με B -maxmemory N Μέγιστη μνήμη προς χρήση (σε kbyte) -όνομα αρχείου εξόδου Καθορισμός ονόματος για το αρχείο εξόδου -περισσότερο ή -εντοπισμός σφαλμάτων Έκδοση εξόδου εντοπισμού σφαλμάτων Διακόπτες για οδηγούς: -σάρωση αρχείου Δημιουργία αρχείου JPEG πολλαπλής σάρωσης ανά αρχείο δέσμης ενεργειών

Πώς να συμπιέσετε γρήγορα αυτόματα το JPEG χρησιμοποιώντας το jpegtran στα Windows

Δεν θα μπορείτε να κάνετε συμπίεση μέσω του μενού περιβάλλοντος λόγω του τρόπου λειτουργίας του βοηθητικού προγράμματος, ωστόσο, μπορείτε να ρυθμίσετε τη συμπίεση πολλών JPEG ταυτόχρονα αυτόματα.
Για να γίνει αυτό, πρέπει να δημιουργήσουμε ένα αρχείο με την κατάληξη .bat (για βοήθεια) και να το γράψουμε εκεί

Cd/d. για %%j σε (*.jpg) καλέστε:sheensay "%%~nxj" "%%~nj.jpg" goto:eof:sheensay jpegtran -copy none -optimize -progressive "%~1" "%~2 "

Πώς να εγκαταστήσετε, να ρυθμίσετε και να χρησιμοποιήσετε το jpegoptim

Πώς να συμπιέσετε JPG, JPEG χρησιμοποιώντας jpegoptim

Ανεβάστε το jpegoptim.exe στο C:\Windows. Στη συνέχεια, ανοίξτε το φάκελο με εικόνες JPG με χρησιμοποιώντας το Far Manager και μπείτε στην κονσόλα

Jpegoptim *.jpg --strip-all --all-progressive

Πώς να βελτιστοποιήσετε πολλά JPG, JPEG ταυτόχρονα χρησιμοποιώντας jpegoptim

Σε αντίθεση με το jpegtran, το βοηθητικό πρόγραμμα jpegoptim σάς επιτρέπει να εργάζεστε με αυτό αρκετά καλά από το μενού περιβάλλοντος.
Ας δημιουργήσουμε ένα αρχείο jpegoptim.reg, για παράδειγμα, χρησιμοποιώντας το Far Manager, και ας γράψουμε εκεί

Windows Registry Editor Έκδοση 5.00 @="Εκτέλεση jpegoptim σε φάκελο" @="cmd.exe /c \"TITLE Εκτέλεση jpegoptim στο %1 && FOR /r \"%1\" %%f IN (*.jpg) DO jpegoptim *.jpg --strip-all --all-progressive \"%%f\" \""

Το εκκινήσαμε και καταχωρήσαμε τα δεδομένα στο μητρώο. Τώρα μπορείτε να συμπιέσετε το σετ Αρχεία JPEGχρησιμοποιώντας το μενού περιβάλλοντος, απλώς προσθέστε απαιτούμενες εικόνεςσε έναν φάκελο, RMB και "Run jpegoptim on Folder".

Εάν θέλετε να καταργήσετε το jpegoptim από το μητρώο και το μενού περιβάλλοντος, γράψτε το jpegoptim.reg

Windows Registry Editor Έκδοση 5.00 [-HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\jpegoptim] [-HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\jpegoptim\command]

Αποθηκεύστε, εκτελέστε, κάντε αλλαγές στο μητρώο.

Πόσο καλά συμπιέζουν τα jpegtran και jpegoptim τα jpg, jpeg

Ας περάσουμε στις δοκιμές. Πάρτε, για παράδειγμα, το αρχείο caching.jpg. Στο πρωτότυπο ζυγίζει 29,5 KB

Δοκιμές Jpegtran για ποιότητα συμπίεσης JPG, JPEG

jpegtran -copy none -optimize -progressive caching.jpg caching.jpg

Η έξοδος ήταν 29,1 KB, εξοικονόμηση συμπίεσης 1,36%

Το Jpegoptim δοκιμάζει για ποιότητα συμπίεσης JPG, JPEG

jpegoptim caching.jpg --strip-all

Αυτό δεν είναι ορατό στην Εξερεύνηση των Windows η συμπίεση ήταν αρκετές εκατοντάδες byte.

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

Πώς να ρυθμίσετε αυτόματα τη συμπίεση png και jpg, jpeg

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

Πρέπει να είναι προεγκατεστημένο jpegtran, jpegoptim, επιλογή, pngout Yu
Οι οδηγίες εγκατάστασης είναι παραπάνω.

Επομένως, για αυτό πρέπει να συναρμολογήσουμε σωστά την αρχιτεκτονική του φακέλου. Ας υποθέσουμε ότι έχετε έναν φάκελο εικόνων με τη δική του ιεραρχία υποφακέλων με PNG και JPG που πρέπει να επεξεργαστείτε.
Δημιουργήστε έναν φάκελο optimus και βάλτε τον σε αυτόν φάκελο εικόνωνμε όλους τους υποφακέλους και τα αρχεία.
Ανοίξτε το, ανοίξτε το optimus σε αυτό, δημιουργήστε ένα αρχείο go.bat και γράψτε το εκεί

@ECHO OFF CLS SetLocal EnableExtensions EnableDelayedExpansion σύνολο home_path=%~dp0:: Όνομα του φακέλου όπου βρίσκονται οι ακατέργαστες εικόνες ορίστε folder=images echo Επεξεργασία *. Αρχεία JPGμέσω jpegtran:: Δημιουργήστε έναν φάκελο στον οποίο θα αποθηκεύσετε συμπιεσμένο jpg. Στην περίπτωσή μας, αυτό είναι το jpeg_images xcopy /y /t /c /i "%folder%" "jpg_%folder%" :: Για κάθε .jpg, βελτιστοποιούμε χρησιμοποιώντας jpegtran. Το Output.jpg θα γραφτεί στο jpeg_images για /r %folder% %%a στο (*.jpg) do (set fn=%%a& jpegtran -copy none -optimize -progressive -outfile %home_path%jpg_!fn:%~ dp0 =! %home_path%!fn:%~dp0=!) Η επεξεργασία των αρχείων *.JPG μέσω jpegtran ολοκληρώθηκε:: Υποδεικνύουμε ότι η εκτέλεση πρέπει τώρα να εκτελεστεί σε έναν νέο φάκελο jpeg_images set folder = jpg_%folder% echo Επεξεργασία αρχείων *.JPG μέσω jpegoptim για /r %folder% %%a στο (*.jpg) do (set fn=%%a& jpegoptim %%~a --strip-all) echo Επεξεργασία αρχείων *.JPG μέσω jpegoptim ολοκληρώνεται echo Επεξεργασία του *. Αρχεία PNG via optipng xcopy /y /t /c /i "%folder%" "png_%folder%" for /r %folder% %%a in (*.png) do (set fn=%%a& optipng -o7 %% ~a -out %home_path%png_!fn:%~dp0=!) echo Επεξεργασία *.PNG αρχεία μέσω optipng ολοκληρωμένου set folder=png_%folder% echo Επεξεργασία *.PNG αρχείων μέσω pngout για /r %folder% %%a σε (*.png) do (set fn=%%a& pngout %%~a) echo Επεξεργασία αρχείων *.PNG μέσω pngout ολοκληρώθηκε η παύση

Ο κώδικας σχολιάζεται σε σημαντικά μέρη. Στην πραγματικότητα, τίποτα περίπλοκο, μπορείτε να το καταλάβετε αν το χρειάζεστε.

Τώρα αποθηκεύστε το go.bat και εκτελέστε το.

Εάν υπάρχουν πολλά αρχεία, η συμπίεση της εικόνας θα πάρει κάποιο χρόνο. Περιμένετε έως ότου η κονσόλα σας ειδοποιήσει ότι η διαδικασία έχει ολοκληρωθεί.

Η συμπίεση πραγματοποιείται διαχωρίζοντας τα αρχεία JPG χωριστά, τα οποία βρίσκονται τώρα στο jpg_images, και τα αρχεία PNG ξεχωριστά, τα οποία βρίσκονται στο png_images.

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

Τρόπος βελτιστοποίησης και συμπίεσης GIF

Τελικά

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

Από χρόνο σε χρόνο μηχανές αναζήτησηςΣφίγγουν τις βίδες στην εξωτερική βελτιστοποίηση όλο και πιο σφιχτά. Και όλο και περισσότερη προσοχή δίνεται στους εσωτερικούς παράγοντες του ιστότοπου. Για παράδειγμα, η ταχύτητα φόρτωσης του ιστότοπού σας επηρεάζει επίσης την ανάπτυξη της κατάταξής σας στα αποτελέσματα αναζήτησης.

Φυσικά, υπάρχουν πολλοί τρόποι για να επιταχύνετε τον ιστότοπό σας, αλλά σήμερα θα μιλήσουμε μόνο για έναν από αυτούς - τη βελτιστοποίηση εικόνων για τον ιστότοπο. Όχι, αυτές δεν είναι οι περιβόητες μετα-ετικέτες - ALT και TITLE, θα μιλήσουμε για τεχνικά θέματα.

Κάποτε, δεν σκέφτηκα καν το γεγονός ότι ήταν δυνατό να βελτιστοποιήσω με κάποιο τρόπο τις εικόνες. Και γιατί? Εξάλλου, ευρυζωνικές, απεριόριστες, εικόνες από ιστότοπους φορτώνονται αμέσως. Τι θα δώσει η μείωση του μεγέθους της εικόνας κατά 20 kilobyte; Δεν πειράζει!

Αλλά η τάση της κυκλοφορίας για κινητά μας έκανε να σκεφτούμε τη βελτιστοποίηση. Αν κοιτάξετε το γράφημα ανάπτυξης της επισκεψιμότητας από κινητά, τότε σύμφωνα με στατιστικά στοιχεία, το 2014 κάθε 3 άτομα είχαν πρόσβαση στο Διαδίκτυο από κινητές συσκευές. Αυτό σημαίνει ότι όλο και περισσότεροι άνθρωποι θα επισκέπτονται ιστότοπους και ιστολόγια από gadget.

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

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

Εργαλεία για τη βελτιστοποίηση εικόνων σε έναν ιστότοπο.

Το πιο κοινό και πιο προσιτό για πολλούς είναι το Photoshop. Πιθανότατα, εάν είστε blogger, webmaster ή άτομο που σχετίζεται στενά με τη δημοσίευση άρθρων στους ιστότοπούς σας, τότε αυτό το λογισμικόέχετε εγκαταστήσει.

Για να βελτιστοποιήσετε μια εικόνα στο Photoshop, πρέπει να πραγματοποιήσετε μια σειρά από απλούς χειρισμούς. Μεταβείτε στο μενού Αρχείο -> Αποθήκευση για τον Ιστό.

Μετά από αυτό βλέπουμε ένα παράθυρο με δύο επιλογές εικόνας.

Το επάνω είναι η αρχική εικόνα, το κάτω είναι αυτό που παίρνουμε μετά την επεξεργασία.

Τώρα θα σας δείξω ένα κόλπο. Κοιτάξτε τις εικόνες και τα βέλη πάνω τους.

Η πρώτη εικόνα αποθηκεύεται σε ποιότητα 100%. Το βάρος της μειώθηκε κατά 85%.

Η δεύτερη εικόνα αποθηκεύεται σε ποιότητα 70%. Το βάρος του έχει μειωθεί κατά 95%, ενώ οι εικόνες μοιάζουν πανομοιότυπες.

Τώρα φανταστείτε πόσο χρόνο θα έπρεπε να αφιερώσει ένας χρήστης για τη λήψη μιας εικόνας 2 megabyte σε μια κινητή συσκευή. Τι γίνεται αν υπάρχουν 5–10 τέτοιες εικόνες σε ένα άρθρο; Αυτός είναι ο λόγος για τον οποίο είναι σημαντικό να βελτιστοποιήσετε τις εικόνες για τον ιστότοπό σας.

Αλλά Εργαλείο Photoshopδεν είναι ιδανικό όταν πρόκειται για μαζική βελτιστοποίηση εικόνας. Ας στραφούμε λοιπόν σε πιο εξειδικευμένο λογισμικό.

Το PictureBeaver είναι ένας φίλος για τους χρήστες των Windows.

Έχω αλλάξει σε MacOS εδώ και πολύ καιρό και χρησιμοποιώ τα Windows σε σπάνιες περιπτώσεις. Αυτό είναι κυρίως για τη συλλογή του σημασιολογικού πυρήνα χρησιμοποιώντας το KeyCollector. Επομένως, χρειάστηκε λίγη προσπάθεια για να βρεθεί πραγματικά αξιόλογο πρόγραμμαγια βελτιστοποίηση εικόνων. Και για να λειτουργεί στα Windows.

Όπως αποδεικνύεται, υπάρχει ένα υπέροχο πρόγραμμα που ονομάζεται PictureBeaver, το οποίο δεν ασχολείται με τους πόρους και λειτουργεί εκπληκτικά γρήγορα.

Το πρόγραμμα είναι πολύ εύκολο στην εργασία. Ανοίξτε το φάκελο με το σενάριο λήψης και σύρετε όλες τις εικόνες που σκοπεύετε να βελτιστοποιήσετε στο αρχείο optimize.wsf

Μετά την επεξεργασία των εικόνων, θα εμφανιστεί ένας φάκελος με βελτιστοποιημένες εικόνες και ένα αρχείο αναφοράς για καθεμία από αυτές.

Το ImageOptim είναι φίλος των καλλιεργητών μήλων.

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

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

Η αρχή της λειτουργίας του είναι διαφορετική από το PictureBeaver. Δεν δημιουργεί νέους φακέλους με έτοιμες εικόνες. Απλώς αντικαθιστά τα πρωτότυπα με βελτιστοποιημένες εικόνες.

Αυτή μοιάζει με αυτό:

Το παράθυρο όπου πρέπει να σύρετε την εικόνα.

Παράθυρο μετά τη βελτιστοποίηση.

Όπως μπορείτε να δείτε, το πρόγραμμα κατάφερε να μειώσει το συνολικό βάρος κατά 24,8%

Η πρώτη εικόνα είχε ήδη βελτιστοποιηθεί στο Photoshop. Το δεύτερο δεν είναι.

ΥΣΤΕΡΟΓΡΑΦΟ. Το Mobile Internet αυξάνεται, γι' αυτό σκεφτείτε την ευκολία για τους χρήστες σας.

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

Ισορροπημένη βελτιστοποίηση εικόνας

Το πρόβλημα με τη βελτιστοποίηση εικόνας είναι ότι δεν υπάρχουν κανόνες 100%. Η βελτιστοποίηση εικόνας είναι πάντα μια λεπτή ισορροπία μεταξύ της εμπειρίας χρήστη, της απήχησης και της απόδοσης της σελίδας.

Η Raluca Budiu, διευθύντρια έρευνας στο Nielsen Norman Group, εξηγεί:

"Επειδή κινητές συσκευές μικρή οθόνη, οι εικόνες που είναι πολύ μικρές παρέχουν πολύ λίγες πληροφορίες και οι πολύ μεγάλες εικόνες μπορούν πραγματικά να επιβραδύνουν τη σελίδα. Συνιστούμε να ξεκινήσετε με μια εικόνα ελάχιστου μεγέθους και να επιτρέψετε στους χρήστες να μεγεθύνουν (ή να ανεβάσουν μια μεγαλύτερη εικόνα).

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

Δεν υπάρχουν ακριβείς κανόνες για το πόσο μικρή πρέπει να είναι μια εικόνα για μια φορητή συσκευή - είναι ένας συμβιβασμός μεταξύ ποιότητας και μεγέθους σελίδας. Σύμφωνα με το httpArchive, το μέσο JPG είναι 29 KB και το μέσο PNG είναι 16 KB.

Η μείωση του βάρους μιας εικόνας είναι εν μέρει θέμα διατήρησης της στο κατάλληλο μέγεθος και ανάλυση (αριθμός pixel) και εν μέρει η συμπίεση της εικόνας. Ορισμένα εργαλεία, όπως το Photoshop, επιτρέπουν κάποια συμπίεση, αλλά αυτό συχνά δεν είναι αρκετό, ειδικά με μεγαλύτερους τύπους εικόνας όπως τα PNG.

Ένας αριθμός εργαλείων σάς επιτρέπει να συμπιέσετε αποτελεσματικά τις εικόνες μεμονωμένα ή σε παρτίδες εικόνων. Για παράδειγμα, εικόνα αρχική σελίδα, παραπάνω, συμπιέστηκε χρησιμοποιώντας TinyPNG, με αποτέλεσμα τη μείωση του βάρους κατά 79%.

Χρειάζεται να χρησιμοποιήσω διαφορετικά μεγέθη εικόνας για κινητά, tablet και επιτραπέζιους υπολογιστές;

Κατά την ανάπτυξη ιστοτόπων για κινητές συσκευές, tablet και επιτραπέζιους υπολογιστές, είτε μέσω αποκλειστικών διευθύνσεων URL (site.com και m.site.com) είτε σε διαφορετικούς ιστότοπους μέσω μιας ενιαίας διεύθυνσης URL (responsive web design), το συμπέρασμα είναι ότι οι εικόνες πρέπει να έχουν μέγεθος ώστε να ταιριάζουν στη μεγαλύτερη συσκευή αυτής της κατηγορίας.
Αυτή η θέση δεν είναι απολύτως κατάλληλη για responsive web design (RWD). Η φιλοσοφία της RWD είναι να εξυπηρετεί τον ίδιο ιστότοπο σε πολλές συσκευές, χρησιμοποιώντας CSS για τη μορφοποίηση του περιεχομένου σύμφωνα με τις δυνατότητες και το μέγεθος της οθόνης της συσκευής.

Ωστόσο, αυτό δεν σημαίνει ότι οι ιστότοποι πρέπει να ακολουθούν μια προσέγγιση που ταιριάζει σε όλους στις εικόνες, λέει ο Alex Painter, σύμβουλος απόδοσης ιστού στο NCC Group:

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

Πολλοί ιστότοποι φορτώνουν τις ίδιες εικόνες τόσο σε επιτραπέζιους όσο και σε κινητές συσκευές - και οι εκδόσεις για κινητά απλώς μειώνονται σε μέγεθος. Ένας χρήστης συσκευών υψηλής απόδοσης σε γρήγορα και αξιόπιστα δίκτυα μπορεί να μην το αντιληφθεί αμέσως. Αυτό όμως μπορεί να κάνει τους ιστότοπους εντελώς άχρηστους για άτομα με πιο αδύναμες κινητές συσκευές ή κακές συνδέσεις.
.
Αυτό μεγάλο πρόβλημαυπάρχουν δύο λόγοι. Πρώτον: πάρα πολλά για παράδοση μεγάλη εικόναΜέσω του δικτύου χρειάζεται περισσότερος χρόνος.
Ο δεύτερος λόγος συχνά παραβλέπεται: η κινητή συσκευή πρέπει να εργαστεί σκληρά για να α) αποκωδικοποιήσει και β) να κλιμακώσει την εικόνα. Έχει κόστος όσον αφορά την επεξεργαστική ισχύ και τη μνήμη».

Αλλά δεν χρειάζεται να είναι έτσι. Με την υποστήριξη της Ομάδας Κοινότητας Responsive Images, η προδιαγραφή HTML διευκολύνει τους προγραμματιστές να δημιουργήσουν πολλά εναλλακτικές εικόνεςΓια ΔΙΑΦΟΡΕΤΙΚΟΙ ΤΥΠΟΙσυσκευές - για διαφορετικά μεγέθη οθόνης (προβολή), αναλύσεις (αριθμός pixel) ή δυνατότητες συσκευής.

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

Alex Painter:
«Η επιλογή της σωστής εικόνας για το παράθυρο προβολής είναι πλέον αρκετά απλή. Είχαμε ερωτήματα μέσων CSS για εικόνες φόντουγια κάποιο χρονικό διάστημα, αλλά μέχρι πρόσφατα οι εικόνες που αναφέρονται σε HTML ήταν περισσότερο πρόβλημα.

Τώρα έχουμε ένα χαρακτηριστικό των ευαίσθητων εικόνων: στοιχείο Με το χαρακτηριστικό thesrcset, το οποίο σας επιτρέπει να καθορίσετε ποια εικόνα θα πρέπει να επιλεγεί για ποιο πλάτος θύρας προβολής (ή να επιτρέψετε στο πρόγραμμα περιήγησης να αξιοποιήσει τα μέγιστα κατάλληλη επιλογήαπό ένα σύνολο εικόνων).
Αυτή η δυνατότητα υποστηρίζεται πλέον πολύ καλά από προγράμματα περιήγησης και οι προγραμματιστές θα πρέπει ιδανικά να τη χρησιμοποιούν αντί να χρησιμοποιούν JavaScript για να επιτύχουν τον ίδιο στόχο."

Ποιος χρησιμοποιεί αποκριτικές εικόνες;

Μια γρήγορη ματιά στο πηγήσημαντικοί ιστότοποι όπως το Amazon, το Facebook και το BBC επιβεβαιώνουν ότι κανένας από αυτούς δεν χρησιμοποιεί ακόμη το στοιχείο Για την προβολή απαντήσεων.

Θα ωφεληθούν αν το χρησιμοποιήσουν; Η προβολή διαφορετικών εικόνων σε κάθε πλατφόρμα έχει δυνητικά μια σειρά από πλεονεκτήματα:

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

Εύρεση της καλύτερης μορφής εικόνας

Όπως ήδη γνωρίζουμε, η πιο κοινή μορφή εικόνας που χρησιμοποιείται σε ιστότοπους φιλικούς προς κινητά και κινητά: JPEG 46%, PNG 28%, GIF 23% και SVG 1% σύμφωνα με το httpArchive.

Υπάρχουν δύο τύποι εικόνων web: ράστερ και διανυσματικά. Το πρώτο αποτελείται από τελείες (π.χ. ψηφιακή φωτογραφία), και το δεύτερο αποτελείται από γραμμές και σχήματα. Τα JPEG, PNG και GIF είναι ράστερ. Το SVG είναι ένα διάνυσμα. Το SVG είναι περισσότερο νέα μορφή, το οποίο δεν χρησιμοποιείται τόσο ευρέως (ακόμη), αλλά συνιστάται για responsive web design (RWD).
Υπάρχουν πλεονεκτήματα και μειονεκτήματα για κάθε τύπο εικόνας και κάθε σχεδιαστής ιστοσελίδων έχει τις δικές του απόψεις και τις αγαπημένες του μορφές. Γενικά:

• Το JPEG χρησιμοποιείται συχνότερα για φωτογραφίες web
• Το GIF είναι χαρακτηριστικό για κινούμενα σχέδια, καθώς και για απλά γραφήματα, εικονίδια και λογότυπα
• Το PNG είναι χαρακτηριστικό για γραφικά υψηλότερης ποιότητας, λογότυπα, εικονίδια και άλλες εικόνες και φωτογραφίες με γραφικά εφέ.
• Το SVG είναι καλό για γραφήματα και λογότυπα, κεφαλίδες σελίδας - οτιδήποτε έχει σχεδιαστεί από έναν εικονογράφο.

Εναλλακτικές λύσεις για τις παραδοσιακές εικόνες

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

Υπάρχουν τρεις μέθοδοι που μπορούν να βοηθήσουν στη διατήρηση του μεγέθους σελίδας και των αιτημάτων εικόνας:

• CSS sprites – συνδυάστε μια συλλογή από μικρότερα γραφικά σε ένα μόνο αρχείο CSS. Σημείωση: Η υπερφόρτωση sprites με πάρα πολλά γραφικά ή πολύ μεγάλα δεν θα είναι βέλτιστη.
• Οι γραμματοσειρές εικονιδίων είναι μια βιβλιοθήκη εικονιδίων που αποστέλλονται ως ένα μόνο αρχείο.
• Οι φόρμες CSS είναι φόρμες που δημιουργούνται με χρησιμοποιώντας CSS, παρά ως παραδοσιακή εικόνα.

Mike D'Agruma Επικεφαλής Front-End Web Developer, E-volve Creative Group:

«Για να εξοικονομήσω το μέγεθος του αρχείου, τείνω να αποφεύγω τη φόρτωση μεγαλύτερων, πιο δημοφιλών βιβλιοθηκών εικονιδίων και χρησιμοποιώ το Fontastic για να δημιουργήσω τις δικές μου προσαρμοσμένες γραμματοσειρές εικονιδίων. Αυτή η μέθοδος λειτουργεί πολύ καλά διαφορετικά επίπεδα: 1) Επειδή χρησιμοποιώ μόνο μικρό αριθμό προσαρμοσμένων εικονιδίων, το μέγεθος του αρχείου γραμματοσειράς είναι σημαντικά μικρότερο. 2) Τα εικονίδια δημιουργούνται χρησιμοποιώντας SVG, το οποίο διασφαλίζει ότι θα είναι εξαιρετικά καθαρά στις συσκευές. 3) Δεν μπορείτε να νικήσετε αυτήν την επιλογή για ευελιξία, καθώς τα εικονίδια γραμματοσειράς είναι πολύ εύκολο να προσαρμοστούν χρησιμοποιώντας CSS.

Ένας άλλος πολύ καλός τρόπος για να εξοικονομήσετε χρόνο, μέγεθος αρχείου και αιτήματα διακομιστή είναι να χρησιμοποιήσετε το CSS για τη δημιουργία σχημάτων. Μπορείτε να δημιουργήσετε τα περισσότερα σχήματα και να προσθέσετε όσα εφέ και μεταβάσεις θέλετε χρησιμοποιώντας το CSS.
Πάρτε για παράδειγμα τον ιστότοπο για κινητά Summit County Metro Parks, μόνο στην ενότητα κεφαλίδας μπόρεσα να χρησιμοποιήσω έναν συνδυασμό συμβόλων CSS και εικονιδίων γραμματοσειράς για να δημιουργήσω αυτό που θα μπορούσε να ήταν έξι διαφορετικές εικόνες. Η ενεργοποίηση του μενού για κινητές συσκευές εμφανίζει ένα παράδειγμα κινούμενης εικόνας Φόρμα CSS(μενού στυλ χάμπουργκερ, κλείνει με "Χ") και χρησιμοποιώντας το πρόσθετο εικονίδιο με σωστη πλευραδείχνει τις ανοιχτές και κλειστές καταστάσεις του μενού."

Τεχνικές σχεδίασης ιστοσελίδων για τη βελτίωση των χρόνων φόρτωσης

Τι κάνετε όταν έχετε μειώσει το βάρος, αφαιρέσετε τις περιττές εικόνες και έχετε βελτιστοποιήσει τις υπόλοιπες, αλλά η σελίδα εξακολουθεί να μην φορτώνει αρκετά γρήγορα;

Βεβαιωθείτε ότι το πιο σημαντικό υλικό έχει φορτωθεί πρώτα, λέει ο Raluca Budiu:

«Όταν φορτώνεται η σελίδα, βεβαιωθείτε ότι το κείμενο φορτώνεται πρώτα, ώστε οι χρήστες να αρχίσουν να σαρώνουν το περιεχόμενο. Καθώς φορτώνονται οι εικόνες, μην μετακινείτε το ήδη φορτωμένο περιεχόμενο γύρω τους—αυτό θα έχει ως αποτέλεσμα οι αναγνώστες να χάσουν το σημείο που βρίσκονταν στη σελίδα και μερικές φορές ακόμη και να κάνουν κλικ σε λάθος σύνδεσμο επειδή ο στόχος τους έχει μετακινηθεί ξαφνικά."

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

Υπάρχουν τρεις κοινές μέθοδοι για να γίνει αυτό. Ο Robert Gaines, προγραμματιστής εφαρμογών ιστού στο Κάνσας των ΗΠΑ, εξηγεί:

1. Η καθυστερημένη ή καθυστερημένη φόρτωση χρησιμοποιεί JavaScript για να σταματήσει τη φόρτωση εικόνων και άλλων στοιχείων μέχρι να ολοκληρωθεί η φόρτωση του κύριου περιεχομένου της ιστοσελίδας. Η αργή φόρτωση μειώνει τον χρόνο που αφιερώνεται στο κύριο περιεχόμενο μιας ιστοσελίδας, αλλά μειώνει την ανάγκη περικοπής εικόνων που διαφορετικά θα επιβράδυναν την ιστοσελίδα.
2. Η αργή φόρτωση φορτώνει τα στοιχεία ενεργητικού όπως χρειάζονται. Με αυτόν τον τρόπο, το περιεχόμενο φορτώνεται πάνω από το πάσο πρώτα και μετά κάτω από το πάσο καθώς ο χρήστης κάνει κύλιση. Με γκαλερί εικόνων, όπως αναζητήσεις προϊόντων σε ιστότοπους αγορών, οι μικρογραφίες χρησιμοποιούνται μόνο όταν κάνετε κλικ στο αντίστοιχο εικονίδιο.
3. Η ενεργή φόρτωση εικόνας φορτώνει πρώτα εικόνες χαμηλής ποιότητας κατά την απόδοση της ιστοσελίδας και, στη συνέχεια, τις αντικαθιστά με εικόνες υψηλής ποιότητας μετά τη φόρτωση του κύριου περιεχομένου. Η ενεργή φόρτωση εικόνας εξισορροπεί την απόδοση με την οπτική έλξη. Σε αντίθεση με το lazy loading, δεν αναγκάζει τους χρήστες να περιμένουν τη φόρτωση δευτερευουσών εικόνων μετά το κύριο περιεχόμενο.

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