Βελτιστοποίηση Εικόνων: Τι Είναι και Πώς Ωφελεί το SEO

Σε μια καθημερινότητα όπου όλα κινούνται γρήγορα, πόσο θα  περιμένατε μέχρι να φορτώσει μια σελίδα προτού την κλείσετε; Σίγουρα δεν θα δίνατε πάνω από 3-4 δευτερόλεπτα, εκτός κι αν θέλατε να δείτε κάτι διακαώς. Η ταχύτητα είναι ένα από τα πολλά στοιχεία, που η λανθασμένη χρήση εικόνων μπορεί να επηρεάσει σε μια ιστοσελίδα. Για αυτόν τον λόγο, η βελτιστοποίηση των εικόνων που «ανεβαίνουν» είναι απαραίτητη. Ας δούμε τι είναι και γιατί έχει τόση σημασία.

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

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

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

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

O όγκος του αρχείου, δηλαδή, τα MB ή τα ΚΒ και η διάσταση των εικόνων που ανεβαίνουν σε μια ιστοσελίδα μπορεί να αλλάξει δραματικά την ταχύτητα φόρτωσης. Λέγοντας εικόνες, εννοούμε φωτογραφίες, λογότυπα, εικονίδια και οτιδήποτε ανεβαίνει σε μορφή JPEG ή PNG, άρα μιλάμε για ένα πολύ μεγάλο σύνολο εικόνων. Αρχίζει να γίνεται προφανές γιατί η κάθε εικόνα πρέπει να είναι όσο το δυνατόν μικρότερη, ιδανικά κάτω από 100KB.

Εάν δεν θέλετε να χάνετε επισκεψιμότητα λόγω αργής ταχύτητας, θα χρειαστεί κάθε εικόνα να σώζεται για χρήση στο web (“save for web”), επιλογή που υπάρχει σε εργαλεία όπως το Adobe Photoshop και εξασφαλίζει το μικρότερο δυνατό όγκο. Υπάρχουν, όμως, και πιο απλά, δωρεάν εργαλεία για το ίδιο αποτέλεσμα, όπως Canva, PicMonkey και PIXLR.

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

Αυτό, με απλά λόγια, σημαίνει πως αν μια εικόνα έχει μεταφορτωθεί με τίτλο «εικονα259-2020.jpg» είναι δύσκολο να εμφανιστεί στα αποτελέσματα μιας αναζήτησης στο Google, γιατί (μάλλον) κανένας δεν θα κάνει αναζήτηση γράφοντας αυτό. Από την άλλη, αν τα αρχεία σας περιλαμβάνουν στον τίτλο τους, π.χ. το όνομα του ιστοτόπου σας και κάποιες λέξεις κλειδιά σχετικές με το προϊόν ή την υπηρεσία σας ή, ακόμα καλύτερα, μια πραγματική περιγραφή σχετικά με το θέμα της εικόνας, οι πιθανότητες να εμφανιστεί η φωτογραφία που υπάρχει στην ιστοσελίδα είναι πολύ αυξημένες και αυτό σημαίνει μόνο ένα πράγμα: επισκεψιμότητα.

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

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

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