Δεν σας αρέσουν οι εικόνες;

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

Και ξέρετε κάτι; Είμαστε προδιαγεγραμμένοι να ανταποκρινόμαστε στις εικόνες. Γι' αυτό η ενσωμάτωση εικόνων στο περιεχόμενό σας είναι ένα ισχυρό εργαλείο που μπορείτε να χρησιμοποιήσετε κατά την προώθηση του ιστολογίου σας.

Αλλά, αν δεν είστε προσεκτικοί, οι εικόνες μπορεί να αντιπροσωπεύουν πάνω από το μισό (ή και περισσότερο) του συνολικού μεγέθους της ιστοσελίδας σας. Πριν από λίγα χρόνια, το μέσο μέγεθος μιας ιστοσελίδας ήταν 600-700K. Τώρα, ο μέσος όρος είναι 2MB και αυξάνεται κάθε χρόνο.

Αυτό είναι τεράστιο!

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

Οι περισσότεροι από εμάς, όμως, αφήνουμε τη βελτιστοποίηση των εικόνων ως μια δεύτερη σκέψη και προτιμάμε να απολαμβάνουμε τα διασκεδαστικά πράγματα, όπως τη δημιουργία μιας επικής ανάρτησης ή τη δικτύωση με άλλους bloggers της ειδικότητάς μας.

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

Γιατί πρέπει να βελτιστοποιήσετε τις εικόνες

Δουλεύετε σκληρά για τη δημιουργία εξαιρετικού περιεχομένου και ξοδεύετε αμέτρητες ώρες για την προώθηση του ιστολογίου σας και τη δικτύωση με άλλους bloggers, οπότε το τελευταίο πράγμα που θέλετε είναι οι πιθανοί επισκέπτες να εγκαταλείψουν τον ιστότοπό σας πριν καν φορτώσει!

Μελέτες δείχνουν ότι έως και το 40% των επισκεπτών κάνουν κλικ στο κουμπί επιστροφής, εάν η φόρτωση ενός ιστότοπου διαρκεί περισσότερο από τρία δευτερόλεπτα.

Ξέρω, τρία δευτερόλεπτα δεν είναι τόσο πολύ, αλλά όταν είστε σε σύνδεση κινητής τηλεφωνίας και περιμένετε να φορτώσει ένας ιστότοπος, το ένα δευτερόλεπτο μπορεί να σας φανεί αιώνιο.

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

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

Πώς μπορείτε λοιπόν να διαπιστώσετε αν οι εικόνες σας επιβραδύνουν τον ιστότοπό σας; Ελέγξτε την ταχύτητα του ιστότοπού σας με το Google PageSpeed Insights.

Αν η Google αναφέρει ως πρόβλημα τις μη βελτιστοποιημένες εικόνες, δείτε τι πρέπει να ξέρετε για να το διορθώσετε.

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

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

Ας ρίξουμε μια πιο προσεκτική ματιά σε κάθε έναν από αυτούς τους τομείς.

Τύπος αρχείου

Οι εικόνες στο διαδίκτυο αποθηκεύονται συνήθως σε μορφή αρχείου PNG ή JPEG - ή GIF για κινούμενα σχέδια. Ποιος δεν αγαπάει αυτά τα ξεκαρδιστικά κινούμενα GIF που κυκλοφορούν στο διαδίκτυο!

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

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

Γιατί λοιπόν υπάρχουν διαφορετικές μορφές;

Λοιπόν, το PNG χρησιμοποιείται παραδοσιακά για την αποθήκευση λογότυπων και γραφικών, επειδή διατηρεί την αρχική ποιότητα της εικόνας - κανείς δεν θέλει θολό κείμενο και pixelated σχήματα. Αλλά, αν προσπαθήσετε να αποθηκεύσετε μια φωτογραφία ως PNG, θα φαίνεται καταπληκτική, αλλά το μέγεθος του αρχείου που θα προκύψει θα είναι, λιγότερο από καταπληκτικό.

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

Θα αναφερθούμε σε περισσότερες λεπτομέρειες σχετικά με τη συμπίεση αργότερα, αλλά προς το παρόν, αν θυμάστε μόνο δύο πράγματα, θυμηθείτε: JPEG για φωτογραφίες και PNG για κείμενο/γραφικά.

Διαστάσεις εικόνας

Έχετε ποτέ φορτώσει μια ιστοσελίδα και παρατηρήσατε ότι μια μικροσκοπική εικόνα (ίσως μια φωτογραφία κεφαλής, για παράδειγμα) χρειάζεται f-o-r-e-v-e-r για να κατέβει; Όπως, τόσο αργά που μπορείτε να δείτε κάθε γραμμή να έρχεται; Σκέφτεστε στον εαυτό σας, πώς μπορεί μια τόσο μικρή εικόνα να χρειάζεται τόσο πολύ χρόνο για να κατέβει;

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

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

Και αυτό είναι ένα τεράστιο αρχείο!

Βλέπετε, ένα πρόγραμμα περιήγησης στον ιστό θα κλιμακώσει (συνήθως) μια εικόνα από τις αρχικές της διαστάσεις, ώστε να χωρέσει καλά στη θέση της σε μια ιστοσελίδα. Αυτό που φαίνεται να είναι μια μικρή εικόνα στην οθόνη μπορεί στην πραγματικότητα να είναι μια τεράστια φωτογραφία 10 megapixel, που κλιμακώνεται σε πραγματικό χρόνο από το πρόγραμμα περιήγησης.

Τώρα, ορισμένες πλατφόρμες δημοσίευσης στο διαδίκτυο θα δημιουργήσουν αυτόματα πολλαπλές παραλλαγές της εικόνας πλήρους ανάλυσης σε διαφορετικά μεγέθη, αλλά αν όχι, θα πρέπει να αλλάξετε το μέγεθος των εικόνων σας εκ των προτέρων σε ένα πρόγραμμα επεξεργασίας εικόνας, όπως το Photoshop, το Lightroom, το Pixlr - ή ακόμη και το MS Paint. Μπορεί να σημαίνει τη διαφορά μεταξύ ενός αρχείου 50K και ενός αρχείου 5MB.

Το WordPress, για παράδειγμα, θα δημιουργήσει αυτόματα τρία (ή περισσότερα, ανάλογα με το θέμα σας) αντίγραφα της εικόνας που έχετε ανεβάσει - όλα με διαφορετικές διαστάσεις - τα οποία μπορείτε να χρησιμοποιήσετε σε αναρτήσεις ιστολογίου, αντί να χρησιμοποιείτε πάντα την εικόνα πλήρους μεγέθους.

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

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

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

Εξυπηρέτηση των εικόνων σας

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

Οι περισσότεροι bloggers σερβίρουν τις εικόνες τους απευθείας από το λογαριασμό φιλοξενίας τους και αυτό είναι συνήθως καλό, αλλά αν θέλετε πραγματικά να αποσπάσετε κάθε ίχνος απόδοσης από τον ιστότοπό σας, τότε η φιλοξενία των εικόνων σας σε ένα Δίκτυο Παράδοσης Περιεχομένου (CDN) μπορεί να κάνει μεγάλη διαφορά.

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

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

Το Blogging Wizard χρησιμοποιεί το Sucuri (περιλαμβάνει ένα τείχος προστασίας για ασφάλεια καθώς και ένα CDN), αλλά υπάρχουν και άλλοι ποιοτικοί πάροχοι όπως το Cloudfront της Amazon ή το KeyCDN. Ακόμη και το δημοφιλές CloudFlare, το οποίο δεν είναι αυστηρά CDN, προσφέρει δωρεάν CDN και είναι εύκολο να ρυθμιστεί στα περισσότερα πακέτα κοινής φιλοξενίας.

Συμπίεση εικόνας

Όταν πρόκειται για τη βελτιστοποίηση των εικόνων σας, τίποτα δεν μειώνει το μέγεθος του αρχείου σας περισσότερο από την προηγμένη συμπίεση εικόνας με απώλειες.

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

Είμαι σίγουρος ότι πολλοί που χρησιμοποιούν το Photoshop μπορεί να δουν το Αποθήκευση για Web Και ακόμη και διαδικτυακά εργαλεία επεξεργασίας εικόνων, όπως το PicMonkey ή το Visme, βελτιστοποιούν επίσης τις εικόνες σας.

Γνωρίζατε όμως ότι υπάρχουν εργαλεία που μπορούν να πάρουν τη "βελτιστοποιημένη" εικόνα σας από το Photoshop ή άλλα εργαλεία επεξεργασίας, να τη συνθλίψουν και να τη συμπιέσουν κατά 40% (ή και περισσότερο), και ακόμα να φαίνεται σχεδόν πανομοιότυπο με το ανθρώπινο μάτι;

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

Εργαλεία επιφάνειας εργασίας

ImageAlpha / ImageOptim

Για τους χρήστες Mac, το ImageOptim είναι ένα δωρεάν εργαλείο επιφάνειας εργασίας που χρησιμοποιώ καθημερινά για να βελτιστοποιώ εικόνες PNG - κυρίως στιγμιότυπα οθόνης - πριν τις ανεβάσω. Αυτά τα εργαλεία είναι εύκολα στη χρήση, απλά σέρνετε και αφήνετε τα αρχεία σας, αλλά πρέπει να κάνετε μία εικόνα κάθε φορά.

Συμβουλή επαγγελματία : Για τους τεχνικά καταρτισμένους υπάρχει το ImageOptim-CLI, όπου μπορείτε να βελτιστοποιήσετε έναν ολόκληρο φάκελο εικόνων ταυτόχρονα.

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

Για τις εικόνες μου PNG, τις περνάω πρώτα από το ImageAlpha:

Εδώ, μείωσε την εικόνα του στιγμιότυπου οθόνης μου από 103K σε 28K.

Στη συνέχεια το έτρεξα μέσω του ImageOptim και εξοικονόμησα ένα επιπλέον 10%.

JPEGmini

Για τα αρχεία JPEG, τα βελτιστοποιώ με την εφαρμογή JPEGmini για την επιφάνεια εργασίας, η οποία είναι διαθέσιμη τόσο για Mac όσο και για Windows.

Η έκδοση Lite σας επιτρέπει να βελτιστοποιήσετε έως και 20 εικόνες την ημέρα δωρεάν και κοστίζει 19,99 δολάρια για να καταργήσετε το όριο.

Συμβουλή επαγγελματία : Οι προχωρημένοι χρήστες που θέλουν να ενσωματώσουν το JPEGmini στο Photoshop ή το Lightroom μέσω ενός plugin μπορούν να αγοράσουν την έκδοση Pro για $99.99.

Εργαλεία σε απευθείας σύνδεση / Cloud / SaaS

TinyPNG

Αν ψάχνετε για ένα υψηλής ποιότητας διαδικτυακό εργαλείο συμπίεσης εικόνων, το TinyPNG (βελτιστοποιεί και αρχεία JPEG παρά το όνομα) είναι μια διαδικτυακή εφαρμογή που σας επιτρέπει να σύρετε έως και 20 εικόνες 5MB ή μικρότερες στο πρόγραμμα περιήγησής σας και να τις βελτιστοποιήσετε όλες ταυτόχρονα.

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

Το TinyPNG σας παρέχει 500 δωρεάν βελτιστοποιήσεις εικόνων ανά μήνα και μετά χρεώνει από 0,002-0,009 δολάρια ανά εικόνα, ανάλογα με τον όγκο.

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

EWWW Image Optimizer

Αν δεν είστε έτοιμοι να ξοδέψετε χρήματα και δεν θέλετε να ασχοληθείτε με τη βελτιστοποίηση των εικόνων σας χειροκίνητα, το δωρεάν πρόσθετο EWWW Image Optimizer για το WordPress μπορεί να βελτιστοποιήσει αυτόματα τις εικόνες που ανεβάζετε.

Μπορείτε να επιλέξετε μια συνδρομή premium που εκτελεί συμπίεση με απώλειες, αλλά η δωρεάν έκδοση εκτελεί μόνο συμπίεση χωρίς απώλειες, οπότε η εξοικονόμηση δεν είναι σχεδόν τόσο σημαντική.

Σημείωση: Για μια πλήρη παρουσίαση, δείτε την ανάρτησή μας σχετικά με τα εργαλεία συμπίεσης εικόνας.

Ανακεφαλαιώνοντας

Καθώς ορισμένοι προβλέπουν ότι το μέσο μέγεθος της ιστοσελίδας θα πλησιάσει τα 3MB μέχρι το 2017, είναι η κατάλληλη στιγμή να αρχίσετε να βελτιστοποιείτε τις εικόνες σας.

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

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

Στη συνέχεια, επωφεληθείτε από τη σύγχρονη συμπίεση εικόνων με εφαρμογές γραφείου όπως το JPEGmini, ή εργαλεία cloud όπως το TinyPNG ή το Kraken - ενσωματώνοντάς τα στο WordPress με ένα πρόσθετο αν είναι δυνατόν.

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

Σχετική ανάγνωση: 7 τρόποι για να μειώσετε το μέγεθος των αρχείων PDF.