Δεν έχει σημασία τι τύπο ιστότοπου έχετε – οι εικόνες είναι κρίσιμες για τη βελτίωση της ταχύτητας και της απόδοσης του ιστότοπου, ενώ παράλληλα προσφέρουν ένα ωραίο αισθητικό αποτέλεσμα που με τη σειρά τους κεντρίζουν το ενδιαφέρον του επισκέπτη.
Ωστόσο, οι μη βελτιστοποιημένες εικόνες έχουν την αρνητική ιδιότητα να καταναλώνουν πολύτιμους πόρους από τον αποθηκευτικό χώρο στο διακομιστή και να μειώσουν την ταχύτητα φόρτωσης των σελιδών. Στην πραγματικότητα, περίπου το 39% των επισκεπτών πιθανότατα θα εγκαταλείψουν έναν ιστότοπο λόγω αργού χρόνου φόρτωσης εικόνων. Για να βελτιώσετε τη συνολική απόδοση του ιστότοπου σας και να παρέχετε καλύτερη εμπειρία στους επισκέπτες σας, το Image Optimization είναι το κλειδί.
Ο στόχος του Image Optimization είναι η μείωση του μεγέθους του αρχείου χωρίς να θυσιάζεται η ποιότητα της. Κατά συνέπεια, καταναλώνοντας λιγότερους πόρους, γίνεται ταχύτερη φόρτωση και παράλληλα επηρεάζει θετικά το SEO του site σας.
Σε αυτόν τον οδηγό, θα καλύψουμε όλα όσα πρέπει να γνωρίζετε σχετικά με το Image Optimization, ενώ συνάμα θα σας παρέχουμε συμβουλές για το πως να το πράξετε με τον καλύτερο δυνατό τρόπο, όπως και προτάσεις για διάφορα εργαλεία που προορίζονται για τούτο το σκοπό.
Τι είναι το Image Optimization;
Η βελτιστοποίηση εικόνας είναι η διαδικασία προσαρμογής εικόνων προκειμένου να έχουν υψηλή ποιότητα και καλή απόδοση στο χρόνο φόρτωσης στο site, και αυτό επιτυγχάνεται επιλέγοντας την κατάλληλη μορφή, διάσταση και ανάλυση, διατηρώντας παράλληλα τα αρχεία όσο το δυνατόν μικρότερα σε μέγεθος, δηλαδή σε μερικά megabyte ή kilobyte. Επιπλέον περιλαμβάνει τη βελτιστοποίηση του μεγέθους του αρχείου εικόνας, της αναλογίας διαστάσεων, της μορφής και πολλά άλλα. Η βελτιστοποίηση και η προσαρμογή των εικόνων βελτιώνει την απόδοση και την κατάταξη ενός ιστότοπου στα αποτελέσματα αναζήτησης της Google.
Γιατί είναι σημαντικό το Image Optimization;
Όπως εξηγήσαμε στις παραπάνω ενότητες, οι βελτιστοποιημένες εικόνες συμβάλλουν στη βελτίωση της ταχύτητας και της συνολικής απόδοσης του ιστότοπoυ σας, συμπεριλαμβανομένης της ενίσχυσης του SEO για την απόκτηση περαιτέρω επισκεπτών από τα οργανικά αποτελέσματα των μηχανών αναζήτησης και της εμπειρίας χρήστη (user experience).
Ας δούμε μερικά ακόμη οφέλη της βελτιστοποίησης εικόνας λεπτομερώς.
Mικρότερη χρήση των πόρων
Οι μεγάλες εικόνες καταναλώνουν περισσότερο χώρο αποθήκευσης και απαιτούν περισσότερο εύρος ζώνης για να μεταφερθούν με επιτυχία τα αρχεία στα προγράμματα περιήγησης των χρηστών.
Εάν διαχειρίζεστε έναν ιστότοπο με περιορισμένους πόρους, θα πρέπει να βρείτε έναν τρόπο να αξιοποιήσετε στο έπακρο τον περιορισμένο χώρο στο δίσκο.
Με τη βελτιστοποίηση φωτογραφιών και εικόνων, οι ιδιοκτήτες μικρών ιστότοπων και ιστολογίων μπορούν να μειώσουν σημαντικά το εύρος ζώνης (Bandwidth) που καταναλώνεται προκειμένου να εμφανιστούν στον επισκέπτη, όπως και να μειωθεί δραστικά ο χώρος που καταλαμβάνουν στον σκληρό δίσκο του server. Οι επισκέπτες του ιστότοπου θα επωφεληθούν επίσης από αυτή τη διαδικασία, καθώς οι βελτιστοποιημένες εικόνες συμβάλουν άμεσα στη μείωση του χρόνου φόρτωσης της εκάστοτε σελίδας ή άρθρου.
Ένα άλλο πλεονέκτημα του να έχετε έναν πιο ελαφρύ ιστότοπο είναι ότι θα χρειαστεί πολύ λιγότερος χρόνος για τη δημιουργία αντιγράφων ασφαλείας (backup).
Kαλύτερη κατάταξη του περιεχομένου στα αποτελέσματα αναζήτησης
Η Google έχει ανακοινώσει επίσημα ότι η ταχύτητα της σελίδας και γενικότερα των άρθρων είναι ένα κρίσιμο στοιχείο για την υψηλότερη κατάταξη του περιεχομένου στα αποτελέσματα αναζήτησης, ευνοώντας τους ιστότοπους που φορτώνουν πιο γρήγορα το περιεχόμενό τους, ενώ τιμωρεί εκείνους αυτούς που αργούν να φορτώσουν, για παράδειγμα πάνω από δύο με δυόμισι δευτερόλεπτα.
Οι ιστότοποι με βελτιστοποιημένα αρχεία πολυμέσων θα φορτώνουν τις σελίδες γρηγορότερα – δίνοντας τους μια καλύτερη ευκαιρία να αναρριχηθούν στις πρώτες θέσεις στην «Αναζήτηση Εικόνων της Google» που συνεπάγεται με επιπλέον επισκεψιμότητα για τα sites και τα blogs. Για να ελέγξετε την ταχύτητα του ιστότοπου σας χρησιμοποιήστε δωρεάν εργαλεία, όπως το PageSpeed Insights της Google.
Συμβουλές Image Optimization για τη βελτίωση της ταχύτητας του ιστότοπου
Σε αυτήν την ενότητα, θα εξετάσουμε διάφορες πτυχές που πρέπει να λάβετε υπόψη για τη βελτιστοποίηση της εικόνας, όπως ποια μορφή εικόνας ή φωτογραφίας ενδείκνυται για κάθε σκοπό, ποιο μέγεθος αρχείου να χρησιμοποιήσετε, ποια ανάλυση και άλλα πολλά.
Επιλέξτε τη σωστή μορφή αρχείου
Η μορφή εικόνας και φωτογραφίας είναι η πρώτη πτυχή που πρέπει να ληφθεί υπόψη στη στο image optimization. Πριν αναλύσουμε τις διαφορετικές μορφές εικόνας, είναι σημαντικό να σημειωθεί ότι η ταξινόμηση που θα κάνουμε χωρίζεται σε διανυσματικές και ράστερ εικόνες.
Οι διανυσματικές μορφές αρχείων περιλαμβάνουν SVG, PDF, EPS και AI. Οι διανυσματικές εικόνες συνήθως λειτουργούν καλά για την απεικόνιση εικόνων που είναι συνδυασμός γραμμών, σημείων και χρωμάτων, όπως λογότυπα και εικονίδια. Το κύριο πλεονέκτημα των διανυσματικών εικόνων είναι ότι μπορείτε να τις επεξεργαστείτε στο έπακρο, χωρίς συμβιβασμούς στην ποιότητα.
Εν τω μεταξύ, οι εικόνες ράστερ βασίζονται κατά κύριο λόγο στην πυκνότητα και την εμφάνιση των pixel, γεγονός που τις καθιστά εξαρτώμενες από την ανάλυση που απεικονίζονται. Σημαίνει ότι οι εικόνες ράστερ χάνουν την ποιότητα και γίνονται θολές, όταν αλλάζει το μέγεθος, δηλαδή όταν μετατρέπονται σε μεγαλύτερες από το αρχικό μέγεθος τους. Οι μορφές αρχείων εικόνας στην κατηγορία ράστερ περιλαμβάνουν JPEG, PNG, GIF και RAW.
Ας ρίξουμε μια ματιά στις πιο κοινές μορφές αρχείων που λειτουργούν καλά σε όλα σχεδόν τα προγράμματα περιήγησης και μπορούν να επεξεργαστούν στα περισσότερα λογισμικά επεξεργασίας εικόνων.
JPEG
Θεωρείται η πιο δημοφιλής μορφή αρχείου εικόνας. Τα JPEG υποστηρίζονται από όλες σχεδόν τις κινητές συσκευές και τα λειτουργικά συστήματα. Δεδομένου ότι οι εικόνες JPEG είναι σχετικά μικρές, δεν επιβραδύνουν τους χρόνους φόρτωσης των ιστοσελίδων και μεταφορτώνονται ή μεταφέρονται πιο γρήγορα.
Τα αρχεία JPEG είναι επίσης εξαιρετικά στη διατήρηση του χρώματος. Ωστόσο, δεδομένου ότι τα JPEG χρησιμοποιούν συμπίεση με απώλειες, όσο μικρότερο είναι το μέγεθος του αρχείου, τόσο χαμηλότερη είναι η ποιότητα της εικόνας, και αυτό συμβαίνει επειδή κάθε φορά που επεξεργαζόμαστε μια αρχείο JPEG, εξαλείφονται όλο και περισσότερα δεδομένα.
Επομένως, αυτή η μορφή δεν θα λειτουργεί καλά σε εικόνες που απαιτούν συνεχείς προσαρμογές και περιέχουν κείμενο – θα είναι δύσκολο να το διαβάσετε μετά τη μείωση του μεγέθους του αρχείου.
GIF
Τα αρχεία GIF είναι εικόνες 8-bit που εμφανίζουν το πολύ 256 χρώματα. Αυτό σημαίνει ότι οι εικόνες GIF δεν είναι τόσο ευκρινείς σε ποιότητα, όσο άλλες μορφές ράστερ. Παρόλο που τα GIF δεν είναι η κατάλληλη μορφή για εικόνες με υψηλή ποιότητα και με μεγάλη γκάμα χρωμάτων, εν ούτοις υποστηρίζουν διαφάνεια (transparency), απλά γραμμικά σχέδια και κείμενο, ιδίως όταν πρόκειται για μικρά μεγέθη αρχείων.
Το GIF είναι η καλύτερη μορφή για τη δημιουργία κινούμενων εικόνων, η οποία είναι ένας εξαιρετικός τρόπος δημιουργίας ελκυστικού περιεχομένου.
Οι εικόνες σε αυτήν τη μορφή φορτώνουν γρήγορα και καταναλώνουν λιγότερο εύρος ζώνης, επομένως είναι μια εξαιρετική εναλλακτική λύση για την κοινή χρήση απλών εικόνων, όπως και για διαφημίσεις banner σε ιστολόγια και μέσα κοινωνικής δικτύωσης.
Δημοφιλείς ιστότοποι όπως το Make A Gif και το Giphy σας επιτρέπουν να δημιουργείτε εύκολα GIF και να τα αποθηκεύετε όλα σε ένα μέρος.
PNG
Μια άλλη δημοφιλής μορφή αρχείου για εικόνες ιστότοπου είναι το PNG. Τα αρχεία PNG μπορούν να έχουν έως και 256 χρώματα και έχουν την ικανότητα να υποστηρίζουν μερικώς διαφανείς εικόνες, καταγράφοντας έγχρωμες πληροφορίες πιο αποτελεσματικά από τα GIF και εμφανίζοντας υψηλότερη ποιότητα από τις εικόνες JPEG.
Εάν χρειάζεται να δημιουργήσετε ή να αποθηκεύσετε εικόνες όπως λογότυπα, icons, απλές εικόνες ή οποιαδήποτε άλλη που απαιτεί ομαλή μετάβαση μεταξύ των χρωμάτων, οι εικόνες PNG είναι μια εξαιρετική επιλογή.
Επιπλέον, η μορφή PNG λειτουργεί καλά για εικόνες με πολύ κείμενο, όπως στιγμιότυπα οθόνης, infographics και banner. Ωστόσο, επειδή αυτή η μορφή αρχείου είναι μεγαλύτερη από το JPEG, η χρήση πάρα πολλών αρχείων PNG θα επιβραδύνει τον χρόνο φόρτωσης της σελίδας σας.
WebP
Θεωρείται η κορυφαία λύση για τη βελτίωση της συμπίεσης εικόνας χωρίς απώλειες, και μάλιστα η Google ανέπτυξε αυτήν τη μορφή εικόνας, προκειμένου να φορτώνονται γρηγορότερα σε κινητές συσκευές που έχουν αργή ταχύτητα του διαδικτύου. Το WebP συνδυάζει χαρακτηριστικά άλλων δημοφιλών μορφών εικόνας ιστού, όπως η αντικατάσταση των GIF για κινούμενα σχέδια και των PNG για διαφάνεια.
Δυστυχώς, πολλές πλατφόρμες CMS (συστήματα διαχείρισης περιεχομένου) δεν υποστηρίζουν τη μορφή WebP. Ωστόσο, για χρήστες που εκτελούν ιστότοπο WordPress που χρησιμοποιούν WordPress 5.8 ή νεότερες εκδόσεις, θα είναι δυνατή η μεταφόρτωση εικόνων WebP στη βιβλιοθήκη πολυμέσων τους.
Για να μετατρέψετε αυτόματα τις εικόνες στη βιβλιοθήκη πολυμέσων σας σε μορφή WebP, θα πρέπει να εγκαταστήσετε μια προσθήκη όπως το ShortPixel ή το Optimole.
Συμπιέστε τα αρχεία εικόνας
Κατά τη συμπίεση αρχείων εικόνας και φωτογραφίας, ένα κρίσιμο σημείο που πρέπει να θυμάστε είναι ότι τα μικρότερα μεγέθη αρχείων γενικά οδηγούν σε χαμηλότερη ποιότητα εικόνας.
Η συμπίεση εικόνας δεν μειώνει μόνο τη χρήση του χώρου αποθήκευσης και του εύρους ζώνης, αλλά παρέχει επίσης ταχύτερους χρόνους φόρτωσης και εμφάνισης σελίδων για τους επισκέπτες του ιστότοπου.
Επιπρόσθετα, θα πρέπει να έχετε στην άκρη του μυαλού σας πως υποβαθμίζεται η ποιότητα του περιεχομένου της εικόνας, οι χρωματικές διαβαθμίσεις και η πολυπλοκότητα των λεπτομερειών όταν επιλέγετε κάποιο τρόπο συμπίεσης εικόνων για τον ιστότοπο σας.
Ένα πλεονέκτημα της επιλογής αρχείων ράστερ αντί για διανυσματικές εικόνες είναι ότι μπορείτε να χρησιμοποιήσετε τεχνικές συμπίεσης, είτε με απώλειες είτε χωρίς απώλειες, δηλαδή μία σημαντική δυνατότητα που λύνει τα χέρια των webmaster, παρέχοντας τους περισσότερες επιλογές για να ενεργήσουν όπως αυτοί νομίζουν.
Όταν χρησιμοποιείτε συμπίεση με απώλειες, ορισμένα δεδομένα αφαιρούνται από την εικόνα, προκειμένου να γίνει σμίκρυνση του αρχείου.
Από την άλλη πλευρά, η συμπίεση χωρίς απώλειες δεν επηρεάζει την ποιότητα ή τη σαφήνεια της εικόνας, καθώς αφαιρεί μόνο μη βασικά δεδομένα. Εάν πρέπει να χρησιμοποιήσετε φωτογραφίες υψηλής ποιότητας στον ιστότοπο, η συμπίεση χωρίς απώλειες είναι πιθανώς η καλύτερη επιλογή, ακόμα κι αν σημαίνει λίγο μεγαλύτερο χρόνο φόρτωσης.
Πολλά προγράμματα επεξεργασίας εικόνας, συμπεριλαμβανομένου του Adobe Photoshop, συνοδεύονται από εργαλεία συμπίεσης εικόνας. Κατά τη συμπίεση των εικόνων σας, βεβαιωθείτε ότι εφαρμόζετε τις ακόλουθες βέλτιστες πρακτικές:
- Συμπιέστε τις εικόνες πριν από τη μεταφόρτωση. Είναι καλύτερο να συμπιέσετε τις εικόνες πριν τις ανεβάσετε στον ιστότοπο σας. Σας βοηθά να εξοικονομήσετε χώρο στο σκληρό δίσκο του διακομιστή και να επιταχύνετε τη διαδικασία μεταφόρτωσης.
- Αυτοματοποιήστε τη διαδικασία συμπίεσης εικόνας. Εάν έχετε να κάνετε με μεμονωμένες φωτογραφίες, η αυτόματη συμπίεση μπορεί να μην αποτελεί σωστή πρακτική. Ωστόσο, είναι μια εξαιρετική εναλλακτική λύση όταν χρειάζεται να συμπιέσετε μεγάλο αριθμό εικόνων ταυτόχρονα – εξοικονομώντας σας πολύ χρόνο. Ο αυτοματισμός είναι επίσης χρήσιμος για τη συμπίεση εικόνων σε διαφορετικές μορφές και την μετονομασία των αρχείων.
- Προσαρμόστε τη συμπίεση εικόνας στη συσκευή. Βεβαιωθείτε ότι χρησιμοποιείτε τις κατάλληλες μορφές συμπίεσης με βάση τη στοχευμένη συσκευή. Για παράδειγμα, οι εικόνες με χαμηλότερη ανάλυση μπορεί να εξακολουθούν να φαίνονται υπέροχες σε κινητές συσκευές και συμβάλλουν στη βελτίωση της εμπειρίας χρήστη στον ιστότοπο σας.
Για υπάρχουσες εικόνες στον ιστότοπό σας, εργαλεία δοκιμών όπως το GTMetrix θα σας βοηθήσουν να προσδιορίσετε ποιες εικόνες χρειάζονται βελτιστοποίηση.
Επαγγελματική συμβουλή
Για να εξοικονομήσετε ακόμη περισσότερο χώρο αποθήκευσης, ελέγξτε τη βιβλιοθήκη πολυμέσων του ιστότοπου σας για να αφαιρέσετε τις αχρησιμοποίητες εικόνες. Εάν χρησιμοποιείτε WordPress, πρόσθετα όπως το Media Cleaner μπορούν να σας βοηθήσουν να κάνετε τη διαδικασία πιο αποτελεσματική.
Χρησιμοποιήστε κατάλληλες διαστάσεις εικόνας
Το μέγεθος και η διάσταση της εικόνας είναι δύο διαφορετικά πράγματα. Το πρώτο αναφέρεται στον αποθηκευτικό χώρο που καταλαμβάνει μια εικόνα στον ιστότοπό σας – ένα μέγεθος αρχείου εικόνας συνήθως μετριέται σε KB (kilobyte) ή MB (megabyte).
Από την άλλη πλευρά, η διάσταση της εικόνας αναφέρεται στο πλάτος και το ύψος της εικόνας με βάση τα pixel.
Η χρήση εικόνων με εσφαλμένες διαστάσεις είναι μια αναποτελεσματική διαδικασία και θα επιβραδύνει την ταχύτητα φόρτωσης του ιστότοπου.
Για παράδειγμα, εάν χρησιμοποιείτε μια εικόνα 500 x 500 px για μια μικρογραφία 50 x 50 px, το πρόγραμμα περιήγησης θα πρέπει να πραγματοποιήσει λήψη και να κλιμακώσει σωστά την εικόνα πριν την εμφανίσει στους επισκέπτες του ιστότοπου.
Ο καλύτερος τρόπος για να το αποφύγετε αυτό είναι να προβάλλετε εικόνες σε κλίμακα (scaled images). Οι εικόνες σε κλίμακα προσαρμόζονται στις ακριβείς διαστάσεις που απαιτούνται από τον ιστότοπο, είτε πρόκειται για εικόνα πλήρους πλάτους είτε για μικρή μικρογραφία (thumbnail).
Για να αλλάξετε το μέγεθος των εικόνων ώστε να ταιριάζουν καλύτερα στον ιστότοπο, μπορείτε να χρησιμοποιήσετε εργαλεία που δεν χρειάζεται χρήση του διαδικτύου, όπως το Adobe Photoshop και το GIMP ή διαδικτυακούς επεξεργαστές εικόνων όπως το PicResize.
Αν και είναι δυνατή η περικοπή εικόνων χρησιμοποιώντας τη βιβλιοθήκη πολυμέσων του WordPress ή άλλα ενσωματωμένα εργαλεία, εάν το κάνετε πριν τις ανεβάσετε στον ιστότοπο, θα αποφύγετε τη δημιουργία πολλών εκδόσεων της αρχικής εικόνας και την κατανάλωση πρόσθετου χώρου στο δίσκο.
Μπορείτε να χρησιμοποιήσετε το εργαλείο Inspect στο πρόγραμμα περιήγησης σας για να ανακαλύψετε το μέγιστο μέγεθος εμφάνισης μιας εικόνας. Εναλλακτικά, υπάρχουν πολλές επεκτάσεις (browser extensions) που μπορείτε να εγκαταστήσετε για να μετρήσετε διαφορετικά στοιχεία σε μια ιστοσελίδα.
Ωστόσο, η χρήση μιας προσθήκης μπορεί να είναι μια καλύτερη εναλλακτική λύση για ιστότοπους με μεγάλο αριθμό εικόνων – στο τέλος του άρθρου θα παραθέσουμε τα καλύτερα εργαλεία συμπίεσης και βελτιστοποίησης εικόνας. Εάν είστε χρήστης με γνώσεις τεχνολογίας, επωφεληθείτε από τα ενσωματωμένα εργαλεία προγραμματιστών του Google Chrome.
Εξετάστε το ενδεχόμενο προβολής εικόνων μέσω CDN
Η χρήση ενός δικτύου παράδοσης περιεχομένου (CDN) για την υποστήριξη εμφάνισης στατικού περιεχομένου μπορεί να βελτιώσει σημαντικά την απόδοση του ιστότοπου σας. Αντί να βασίζεται σε έναν μόνο διακομιστή για τη μεταφορά πολλών megabyte δεδομένων για κάθε επισκέπτη, ένα CDN βασίζεται παράλληλα σε δεκάδες ή εκατοντάδες διακομιστές ταυτόχρονα, και χρησιμοποιεί εκείνο το server που είναι πιο κοντά στον εκάστοτε επισκέπτη, προκειμένου να εμφανιστεί γρηγορότερα το περιεχόμενο.
Ένα CDN αποθηκεύει προσωρινά το ζητούμενο περιεχόμενο και στη συνέχεια το παραδίδει από μια γεωγραφική τοποθεσία που είναι πιο κοντά στον χρήστη του site. Αυτό σημαίνει ότι τα δεδομένα διανύουν μια συντομότερη διαδρομή, η οποία οδηγεί σε ταχύτερους χρόνους φόρτωσης των αρχείων και των πολυμέσων του ιστότοπου.
Χωρίς να βελτιστοποιήσετε τις εικόνες σας, ένα CDN επιταχύνει από μόνο τους χρόνους φόρτωσης της σελίδας.
Εκτός από το κανονικό CDN, μπορείτε επίσης να χρησιμοποιήσετε ένα image CDN. Μπορεί να μειώσει το ωφέλιμο φορτίο εικόνων του ιστότοπου σας έως και 80%, με αποτέλεσμα σημαντική βελτίωση στην ταχύτητα φόρτωσης και χωρίς αισθητή μείωση στην ποιότητα της εικόνας.
Ένα image CDN μπορεί να λειτουργήσει καλά εάν διαχειρίζεστε έναν δυναμικό ιστότοπο όπως ένα κατάστημα ηλεκτρονικού εμπορίου ή αν ανεβάζετε συχνά νέες εικόνες. Μερικοί από τους πιο δημοφιλείς παρόχους image CDN περιλαμβάνουν το Cloudflare, το Fastly CDN και το ImageKit.
Εκτός από τη μεγαλύτερη επεκτασιμότητα και αποτελεσματικότητα, ας δούμε περισσότερα οφέλη από τη χρήση ενός image CDN:
- Βελτιωμένη εμπειρία χρήστη. Τα image CDN συρρικνώνουν αυτόματα τις εικόνες, μετατρέποντας τη μορφή τους ανάλογα με τη συσκευή του χρήστη και το περιεχόμενο της εικόνας. Αυτό είναι ιδιαίτερα χρήσιμο όταν έχετε πρόσβαση σε ιστότοπους όπως σε καταστήματα ηλεκτρονικού εμπορίου, τα οποία μπορούν να εμφανίζουν ταυτόχρονα πολλά μικρογραφίες (thumbnail images) σε κάθε ιστοσελίδα.
- Καλύτερη ταχύτητα χρησιμοποιώντας την κοντινότερη τοποθεσία για τον επισκέπτη. Εφόσον οι εικόνες ιστού σας αποθηκεύονται σε ένα image CDN, δεν χρειάζεται να βελτιστοποιούνται κάθε φορά που μια νέα συσκευή ζητά τη φόρτωση τους. Αυτό συμβαίνει επειδή ένας διακομιστής CDN χρησιμοποιεί προσωρινή αποθήκευση, επιταχύνοντας το χρόνο που χρειάζεται για την παράδοση εικόνων.
- Φιλικό προς το κινητό. Τα προηγμένα image CDN διασφαλίζουν ότι οι εικόνες σας εμφανίζονται σωστά σε όλες τις συσκευές. Για τη βελτίωση της ποιότητας της εικόνας, ένα image CDN προσαρμόζει και συμπιέζει τις εικόνες σύμφωνα με τις συνθήκες της συσκευής και του δικτύου του χρήστη.
- Σταθερός χρόνος λειτουργίας. Τα αιτήματα εικόνας εξυπηρετούνται συνήθως από τα πιο πρόσφατα αποθηκευμένα δεδομένα στην κρυφή μνήμη. Εάν ο διακομιστής CDN είναι εκτός λειτουργίας, η σελίδα θα συνεχίσει να φορτώνει κανονικά.
Παρόλο που όντως υπάρχουν πολλά πλεονεκτήματα της προβολής εικόνων μέσω ενός κανονικού CDN ή ενός image CDN, ωστόσο έχει την αρνητική ιδιότητα να βλάπτει το SEO.
Εάν χρησιμοποιείτε ένα CDN, από την πλευρά της μηχανής αναζήτησης, η εικόνα δεν αποτελεί τεχνικά μέρος του ιστότοπου σας, καθώς βρίσκεται κάπου αλλού. Για να το αποφύγετε, ενεργοποιήστε το CDN σε έναν υποτομέα (subdomain). Με αυτόν τον τρόπο, δεν πλήττεται το SEO, αφού οι φωτογραφίες εξακολουθούν να φιλοξενούνται διαδικτυακή τοποθεσία σας και σημαίνει ότι είναι δικές σας.
Πως να ωφεληθείτε από το Image Optimization για να ενισχύσετε το SEO σας
Οι καλά βελτιστοποιημένες εικόνες στο website ή το blog σας βοηθούν να καταταχθεί καλύτερα το οπτικό υλικό στα αποτελέσματα των μηχανών αναζήτησης, όπως για παράδειγμα στο google images ή στο bing images. Η χρήση του κατάλληλου συνδυασμού μορφής, εναλλακτικού κειμένου και τίτλων μπορεί να συμβάλει στη βελτιωμένη απόδοση SEO γενικά για ολόκληρο τον ιστότοπο σας.
Δεν χρειάζεται να ξοδεύετε πολλές ώρες για τη διαμόρφωση και την εκτέλεση σύνθετων στρατηγικών SEO για τη βελτιστοποίηση των εικόνων. Η ενίσχυση της απόδοσης SEO μέσω Image Optimization περιλαμβάνει μερικά εύκολα βήματα.
Ας δούμε διάφορους παράγοντες του SEO Image στους οποίους πρέπει να εστιάσουμε, ώστε οι μηχανές αναζήτησης να μπορούν να ανιχνεύουν, να ευρετηριάζουν και να ταξινομούν τις φωτογραφίες σας πιο αποτελεσματικά.
Γράψτε τα σωστά ονόματα αρχείων εικόνας
Τα περιγραφικά ονόματα αρχείων βοηθούν τους χρήστες και τις μηχανές αναζήτησης όπως η Google να εντοπίζουν γρήγορα και σωστά τις φωτογραφίες. Αυτό συμβαίνει επειδή τα σωστά ονομασμένα αρχεία παρέχουν τις απαιτούμενες πληροφορίες στον Web crawler (ανιχνευτής Ιστού) για να καταλάβει περί τίνος πρόκειται.
Η χρήση των προεπιλεγμένων ονομάτων που εκχωρεί η κάμερα σας σε κάθε φωτογραφία δεν είναι καλή πρακτική. Τα ρομπότ της Google δεν θα μπορούν να διακρίνουν και να κατανοήσουν από μια εικόνα που φέρει το όνομα shoes-image-01 . Ένα πιο κατάλληλο και περιγραφικό όνομα αρχείου θα ήταν nike-tanjun-shoes-pink-white.
Ανάλογα με το είδος των εικόνων που δημιουργείτε ή αποθηκεύετε, φροντίστε να γράψετε το όνομα του προϊόντος και να συμπεριλάβετε περιγραφικές λέξεις όπως η επωνυμία ή το χρώμα του. Επιπλέον, χρησιμοποιήστε παύλες αντί για υπογράμμιση για να ονομάσετε τα αρχεία σας. Για παράδειγμα, χρησιμοποιήστε white-shirt.jpeg αντί white_shirt.jpeg .
Εάν απευθύνεστε σε ένα διεθνές κοινό και μεταφράζετε τις φωτογραφίες του ιστότοπου, μην ξεχάσετε να μεταφράσετε και τα ονόματα των αρχείων.
Όταν πρόκειται για λέξεις-κλειδιά, χρησιμοποιήστε ένα εργαλείο όπως το Google Search Console για να ελέγξετε το Search Analytics και τα ερωτήματα που περιλαμβάνουν τα προϊόντα σας.
Αυτό θα σας βοηθήσει να βρείτε τι θα πληκτρολογούσαν οι πελάτες σε μια μηχανή αναζήτησης εάν αναζητούσαν τον τύπο των αγαθών που προσφέρετε. Ωστόσο, προσέξτε να μην το παραγεμίσετε με λέξεις-κλειδιά. Χρησιμοποιήστε μόνο αυτά που ταιριάζουν και περιγράφουν φυσικά την εικόνα.
Γράψτε και συμπληρώστε το εναλλακτικό κείμενο
Η προσθήκη εναλλακτικού κειμένου (alt text) είναι μια άλλη τεχνική για τη βελτιστοποίηση των εικόνων σας και την ενίσχυση του SEO. Ουσιαστικά, το εναλλακτικό κείμενο είναι μια περιγραφή του περιεχομένου μιας φωτογραφίας. Είναι αυτό που διαβάζουν οι αναγνώστες όταν βάζουν το δείκτη του ποντικιού επάνω στην εικόνα, όπως και τι θα εμφανιστεί στη σελίδα σε περίπτωση που δεν μπορεί να φορτωθεί μια εικόνα.
Το 2021, το 26% όλων των εικόνων στο 1 εκατομμύριο κορυφαίους ιστότοπους δεν είχαν εναλλακτικό κείμενο. Εκτός από τις βελτιώσεις προσβασιμότητας για τους χρήστες και το SEO, αυτή η προσθήκη θα σας δώσει επίσης ένα ισχυρό πλεονέκτημα έναντι των ανταγωνιστών σας, που δεν φέρονται επαγγελματικά πάνω σε τούτο το ζήτημα.
Υπάρχουν ορισμένες πρακτικές που πρέπει να ακολουθήσετε για να γράψετε καλό εναλλακτικό κείμενο:
- Να είστε πολύ συγκεκριμένοι. Βεβαιωθείτε ότι η περιγραφή σας είναι όσο το δυνατόν πιο συγκεκριμένη, συμπεριλαμβανομένου του μηνύματος της εικόνας, του περιβάλλοντος κ.λπ. Ωστόσο, σημειώστε ότι δεν χρειάζεται να περιγράφετε εικόνες που χρησιμοποιούνται για διακοσμητικούς σκοπούς.
- Το alt text να είναι σύντομο. Προσπαθήστε να διατηρήσετε τις περιγραφές σας εντός των 125 χαρακτήρων. Λάβετε υπόψη ότι δεν χρειάζεται να αναφέρετε “η εικόνα του”, “η φωτογραφία του” ή κάτι παρόμοιο στο alt text, καθώς ο κώδικας HTML το καλύπτει.
- Χρησιμοποιήστε λέξεις-κλειδιά . Εάν είναι δυνατόν, συμπεριλάβετε μια λέξη-κλειδί-στόχο στο εναλλακτικό κείμενο. Ωστόσο, προσέξτε να μην το παρακάνετε.
Χρησιμοποιήστε δομημένα δεδομένα για τις εικόνες σας
Μια άλλη στρατηγική για τη μεγιστοποίηση του αντίκτυπου των προσπαθειών SEO σας είναι να αξιοποιήσετε τα δομημένα δεδομένα (structured data) ή τη σήμανση σχήματος (schema markup) για τον ιστότοπό σας στο WordPress .
Ουσιαστικά, προσφέρει σαφείς πληροφορίες σχετικά με τη σελίδα σας για να βοηθήσει τις μηχανές αναζήτησης να κατανοήσουν πλήρως τον σκοπό και το πλαίσιο της, βελτιώνοντας τις διαδικασίες ανίχνευσης και δημιουργίας ευρετηρίασης.
Αυτό συμβαίνει επειδή τα δομημένα δεδομένα παρέχουν πρόσθετες πληροφορίες σχετικά με τις εικόνες, βοηθώντας τις μηχανές αναζήτησης να τις συσχετίσουν με συγκεκριμένα ερωτήματα αναζήτησης, όπως λεπτομέρειες προϊόντων ή ακόμα και με τις τιμές. Χρησιμοποιώντας δομημένα δεδομένα στις εικόνες σας, αυξάνετε τις πιθανότητες να εμφανιστούν ψηλά στα αποτελέσματα αναζήτησης, λόγω καλύτερης συνάφειας με το εκάστοτε ερώτημά του χρήστη.
Μπορείτε να χρησιμοποιήσετε το Schema.org για τη δομή δεδομένων για τη βελτίωση της απόδοσης SEO του ιστότοπου. Αυτό η πλατφόρμα σας βοηθά να βρείτε συγκεκριμένες σημάνσεις για τη σελίδα σας και να την κωδικοποιήσετε σωστά.
Εάν είστε χρήστης του WordPress, προσθήκες όπως τα All In One Schema Rich Snippets και το Schema απλοποιούν τη διαδικασία προσθήκης δομημένων δεδομένων.
Επιπλέον, είναι σημαντικό για τους κατόχους ιστοτόπων να ακολουθούν όλες τις γενικές οδηγίες δομημένων δεδομένων που έχει ορίσει η Google. Εάν αποτύχετε να εφαρμόσετε αυτά τα πρότυπα, μπορεί να τιμωρηθείτε με κακή κατάταξη ή οι σελίδες σας δεν θα είναι κατάλληλες για να συμπεριληφθούν στα πλούσια αποτελέσματα.
Εργαλεία όπως το Rich Results Test και το URL Inspection Tool σας βοηθούν να ελέγξετε εάν υπάρχουν προβλήματα με τα δομημένα δεδομένα.
Εκτός από εικόνες, τα δομημένα δεδομένα μπορούν να χρησιμοποιηθούν για διάφορους σκοπούς, όπως:
- Google’s Knowledge Graph. Όταν κάνετε αναζήτηση για ένα άτομο ή μια επιχείρηση, η Google συλλέγει πληροφορίες από διαφορετικούς ιστότοπους και πηγές για να εμφανίσει πιο σχετικά και χρήσιμα αποτελέσματα. Προσθέστε πληροφορίες σχετικά με τον ιστότοπο σας για σωστό Google’s Knowledge Graph μέσω δομημένων δεδομένων.
- Πλούσια αποτελέσματα. Εάν ο ιστότοπος σας περιέχει πολλά στοιχεία που αντιστοιχούν σε ένα συγκεκριμένο ερώτημα αναζήτησης, η Google μπορεί να εμφανίσει πιο πλούσια αποτελέσματα προεπισκόπησης εμφανίζοντας κριτικές προϊόντων, αξιολογήσεις με αστέρια ή βίντεο. Τα πλούσια αποτελέσματα είναι μια εξαιρετική ευκαιρία να προσελκύσετε περισσότερους στοχευμένους χρήστες στη σελίδα σας.
- Accelerated Mobile Pages. Ο κύριος σκοπός του έργου AMP της Google είναι να βελτιώσει την εμπειρία του χρήστη σε κινητές συσκευές, όπως η παροχή σελίδων γρήγορης φόρτωσης. Η χρήση δομημένων δεδομένων σε AMP μπορεί να οδηγήσει τον ιστότοπο σας να εμφανίζεται στην αναζήτηση για κινητά ως μέρος εμπλουτισμένων αποτελεσμάτων.
Βελτιστοποιήστε τον τίτλο και την περιγραφή της σελίδας
Κατά την κατάταξη των εικόνων, η Google λαμβάνει επίσης υπόψη στοιχεία όπως ο τίτλος της σελίδας, η μετα-περιγραφή, οι κεφαλίδες και το περιεχόμενο.
Επομένως, ένας βελτιστοποιημένος τίτλος και περιγραφή σελίδας μπορεί να σας βοηθήσει να καταταχθεί το οπτικό υλικό στις πρώτες θέσεις στην αναζήτηση εικόνων (image search). Η διεξαγωγή έρευνας λέξεων-κλειδιών είναι ένα καλό τρόπος για να ξεκινήσετε.
Εργαλεία όπως το Ahrefs, το Ubersuggest και το Semrush μπορούν να σας βοηθήσουν να προσδιορίσετε τα πιο σχετικά ερωτήματα αναζήτησης, τον όγκο αναζήτησης τους και τη δυσκολία λέξεων-κλειδιών.
Στη συνέχεια, συμπεριλάβετε τις σχετικές λέξεις-κλειδιά στον τίτλο της σελίδας σας, τη μετα-περιγραφή και τη σωστή διεύθυνση URL. Σε συνδυασμό με άλλες στρατηγικές Image Optimization, θα αυξήσει τις πιθανότητες του ιστότοπου σας να καταταχθεί ψηλά στα αποτελέσματα αναζήτησης.
Τοποθετήστε σωστά τις εικόνες στι σελίδα
Μια άλλη σημαντική πτυχή του Image Optimization είναι το που θα τοποθετήσετε τις εικόνες στον ιστότοπο. Η τυχαία προσθήκη εικόνων μπορεί να έχει κακή επιρροή στο περιβάλλον και τη συνάφεια της σελίδας σας.
Αν και δεν είναι ασυνήθιστο να χρησιμοποιείτε εικόνες για να σπάσετε τα μεγάλα κείμενα, η εικόνα πρέπει να συνδέεται απευθείας με το γραπτό περιεχόμενο. Λάβετε υπόψη ότι τα προγράμματα ανάγνωσης οθόνης δεν μπορούν να έχουν πρόσβαση σε κείμενα εντός των εικόνων, επομένως φροντίστε να παρέχετε σχετικά εναλλακτικά κείμενα και να συμπεριλάβετε βασικές πληροφορίες μόνο στην εικόνα.
Εκτός από τη βελτίωση της προσβασιμότητας, συμβάλλει επίσης στην ενίσχυση της ορατότητας της σελίδας στην αναζήτηση εικόνων Google.
Βελτιστοποίηση για φορητές συσκευές
Δεδομένου ότι περισσότερο από το ήμισυ της επισκεψιμότητας ιστού προέρχεται από κινητές συσκευές, είναι εύκολο να αντιληφθεί κανείς τη σημασία της διασφάλισης ότι οι επισκέπτες μπορούν να έχουν ομαλή πρόσβαση σε όλες τις σελίδες και τις εικόνες από όλες τις συσκευές, όπως smartphone, tablet, laptop, notebook.
Το εργαλείο δοκιμής Google’s Mobile-Friendly Test Tool σαρώνει τον ιστότοπο σας και αξιολογεί εάν θα φαίνεται καλά στις οθόνες των κινητών συσκευών. Επιπλέον, το εργαλείο θα παρέχει μια αναφορά για τη συνολική χρηστικότητα του site σας.
Για παράδειγμα, εάν η σελίδα φορτώνεται μόνο μερικώς σε μια κινητή συσκευή, θα σας ενημερώσει ποια στοιχεία, συμπεριλαμβανομένων των εικόνων, έχουν προβλήματα και πρέπει να επιδιορθωθούν.
Χρησιμοποιήστε εικόνες χωρίς πνευματικά δικαιώματα και με καλή ποιότητα
Όλες οι εικόνες που ανεβαίνουν στον ιστότοπο σας πρέπει να είναι απαλλαγμένες από πνευματικά δικαιώματα για να αποφευχθεί ο κίνδυνος αγωγών, οι οποίες όχι μόνο θα έβλαπταν τη διαδικτυακή σας φήμη, αλλά και την κατάταξη του ιστότοπου στα αποτελέσματα αναζήτησης.
Το Shutterstock, το Unsplash και το Getty Images είναι από τους πιο σημαντικούς παρόχους δωρεάν εικόνων που δεν προστατεύονται από πνευματικά δικαιώματα και είναι ελεύθερα προς χρήση. Αυτοί οι ιστότοποι περιέχουν εκατοντάδες χιλιάδες φωτογραφίες για διαφορετικούς σκοπούς, καλύπτοντας ένα ευρύ φάσμα κατηγοριών και θεμάτων.
Εναλλακτικά, μεταβείτε στην ενότητα Σύνθετη αναζήτηση του Google Images και βρείτε εικόνες που δεν έχουν την σήμανση ότι υπόκεινται σε πνευματικά δικαιώματα.
Ως μέρος της ροής των εργασιών σας στο Image Optimization, σκεφτείτε να δημιουργήσετε πρωτότυπες και μοναδικές φωτογραφίες που θα είναι αποκλειστικά δικές σας.
Ειδικά αν διαχειρίζεστε ένα κατάστημα ηλεκτρονικού εμπορίου, οι φωτογραφίες προϊόντων υψηλής ποιότητας δημιουργούν μεγαλύτερη αφοσίωση χρηστών και συμβάλλουν στην αύξηση των πωλήσεων.
5 καλύτερα εργαλεία για Image Optimization
Η μη αυτόματη βελτιστοποίηση μεγάλου αριθμού εικόνων από τη συλλογή πολυμέσων σας μπορεί να είναι μια χρονοβόρα διαδικασία. Ευτυχώς, πολλά διαδικτυακά εργαλεία είναι διαθέσιμα για το Image Optimization σας και τη βελτίωση της ταχύτητας του ιστότοπου.
Ας ρίξουμε μια ματιά σε πέντε επιλογές που αξίζει την προσοχή σας:
ImageRecycle
Αυτό το εργαλείο βελτιστοποίησης εικόνας υποστηρίζει διάφορες μορφές εικόνας, όπως αρχεία JPEG, PNG, GIF, ακόμη και αρχεία PDF.
Με βάση το μέγεθος και τη διάσταση της εικόνας, το ImageRecycle μπορεί να καθορίσει ποιες εικόνες στο site σας χρειάζονται προσαρμογές. Το μόνο που έχετε να κάνετε είναι να εισαγάγετε τη διεύθυνση URL του site σας και το εργαλείο θα στείλει μια δωρεάν αναφορά στο email σας.
Kraken.io
Αυτό το εργαλείο παρέχει πολλούς τρόπους για τη βελτιστοποίηση των εικόνων, όπως η μείωση του μεγέθους του αρχείου εικόνας και η χρήση έξυπνων τεχνικών συμπίεσης με ελάχιστες απώλειες.
Ωστόσο, η δωρεάν έκδοση του Kraken έχει όριο μεγέθους εικόνας 1 MB. Για μεγαλύτερο όριο και πιο προηγμένες δυνατότητες, μπορείτε να επιλέξετε ένα από τα premium προγράμματα της πλατφόρμας .
Εναλλακτικά, οι χρήστες του WordPress μπορούν να επωφεληθούν από το plugin Kraken.io Image Optimizer.
iLoveIMG
Αυτό το δωρεάν ηλεκτρονικό εργαλείο για Image Optimization προσφέρει πολλές δυνατότητες επεξεργασίας φωτογραφιών. Μπορείτε να μετατρέψετε μορφές αρχείων, να προσαρμόσετε το μέγεθος αρχείου εικόνας, να προσθέσετε ένα υδατογράφημα και πολλά άλλα.
Επιπλέον το iLoveIMG σας επιτρέπει να βελτιστοποιήσετε τις εικόνες από τον υπολογιστή σας, το Google Drive ή το Dropbox.
Optimizilla
Αυτό το εργαλείο συρρικνώνει τις εικόνες στο ελάχιστο δυνατό μέγεθος χωρίς να θέτει σε κίνδυνο την ποιότητα τους. Υποστηρίζει μορφές JPEG, JPG, GIF και PNG και σας επιτρέπει να αλλάξετε το μέγεθος έως και 20 αρχείων ταυτόχρονα.
Επιπλέον, έχετε την επιλογή να ελέγχετε τον βαθμό συμπίεσης που εφαρμόζεται στις εικόνες.
Smush
Με τη δυνατότητα Bulk Smush, αυτό το wordpress plugin για συμπίεση εικόνας μπορεί να βελτιστοποιήσει έως και 50 εικόνες με ένα κλικ.
Το Smush σας επιτρέπει να ορίσετε τη μέγιστη ανάλυση εικόνας για μορφές αρχείων όπως PNG, JPEG και GIF και συνοδεύεται από μια λειτουργία lazy-load για τη βελτίωση της απόδοσης του ιστότοπου.
Επιλέγοντας την premium έκδοση αυτής της προσθήκης WordPress, μπορείτε να μετατρέψετε εικόνες σε WebP και να αποκτήσετε πρόσβαση σε πρόσθετα εργαλεία Image Optimization.
Συμπέρασμα
Όλοι οι κάτοχοι ιστότοπων που σέβονται τον εαυτό τους είναι υποχρεωμένοι να προσαρμοστούν στις αλλαγές των αλγορίθμων των μηχανών αναζήτησης, στις τεχνολογικές εξελίξεις και στις εξελισσόμενες προσδοκίες των χρηστών. Αυτό ισχύει επίσης για όλες τις εικόνες που αναρτώνται στον ιστότοπΟ σας.
Δεδομένου ότι οι σύγχρονοι χρήστες του διαδικτύου προσελκύονται γρήγορα από το οπτικό περιεχόμενο, είναι εύκολο να καταλάβουμε γιατί το Image Optimization είναι μία από τις βασικές μεταβλητές που συμβάλλουν στη συνολική απόδοση του site σας.
Η μειωμένη ικανοποίηση των χρηστών, οι αργοί χρόνοι φόρτωσης της σελίδας, τα μεγάλα ποσοστά εγκατάλειψης και οι λιγότεροι υποψήφιοι πελάτες είναι όλα πιθανές συνέπειες της μη βελτιστοποίησης των εικόνων του site σας. Η βελτιστοποίηση εικόνας υψηλής ποιότητας δεν συμβάλλει μόνο στην οικοδόμηση της αυθεντίας στο εμπορικό σας σήμα στο διαδίκτυο, αλλά βελτιώνει επίσης τη θέση της στις κατατάξεις των μηχανών αναζήτησης.
Είτε με wordpress plugins, είτε με διαδικτυακά εργαλεία, μπορείτε εύκολα να βελτιστοποιήσετε τις εικόνες σας με λίγα μόνο κλικ. Μπορείτε να μειώσετε σημαντικά τα μεγάλα αρχεία εικόνας, χωρίς να διακυβεύσετε την ποιότητα τους.
Λάβετε υπόψη ότι το Image Optimization είναι μόνο ένα στοιχείο της παροχής εξαιρετικής εμπειρίας στους χρήστες σας. Μπορείτε να βελτιώσετε περαιτέρω τη συνολική ποιότητα του website σας μέσω διαφόρων παραγόντων, όπως η ασφάλεια, η αξιοπιστία και η προσβασιμότητα.
Ελπίζουμε ότι οι συμβουλές που παρέχονται σε αυτόν τον οδηγό μπορούν να σας βοηθήσουν να επωφεληθείτε από τα οφέλη της βελτιστοποίησης, τόσο για την ταχύτητα φόρτωσης της σελίδας σας, όσο και για την απόδοση του SEO σας. Καλή τύχη!
