Βελτιστοποίηση εικόνων

Τόσο οι άνθρωποι όσο και οι μηχανές αναζήτησης προτιμούν τους γρήγορους ιστότοπους. Σκεφτείτε για παράδειγμα τον εαυτό σας όταν ψωνίζετε online. Ακόμα και μια καθυστέρηση 8 δευτερολέπτων σε μια σελίδα μπορεί να είναι απογοητευτική και να σας αποθαρρύνει από την αγορά σας. Πως λοιπόν θα κάνετε το ηλεκτρονικό σας κατάστημα ταχύτερο; Ένας βασικός και σχετικά εύκολος τρόπος είναι να βελτιστοποιήσετε τις εικόνες που εμφανίζονται στην σελίδα σας.

Γιατί όμως είναι τόσο σημαντική η ταχύτητα του e-shop σας; Σύμφωνα με online έρευνες το 79% των αγοραστών που έρχονται αντιμέτωποι με αργές σελίδες, ισχυρίζονται ότι δε θα επέστρεφαν σε αυτές για δεύτερη αγορά. Τις περισσότερες φορές μάλιστα, δεν ολοκληρώνουν καν την αγορά τους. Επιπρόσθετα, οι ίδιες οι μηχανές αναζήτησης ‘τιμωρούν’ σελίδες με μεγάλο χρόνο απόκρισης, εμφανίζοντάς τες χαμηλά στα αποτελέσματα αναζήτησης (SEO rankings). Επομένως, αν το e-shop σας δε "φορτώνει" ταχύτατα, είναι βέβαιο ότι θα χάσετε πωλήσεις και δε θα έχετε το επιθυμητό customer retention.

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

1. Ελαχιστοποιήστε το μέγεθος του αρχείου διατηρώντας την ποιότητα εικόνας

Τα αρχεία εικόνας με υψηλή ανάλυση που προορίζονται για χρήση σε έντυπα μέσα, έχουν πολύ μεγάλο μέγεθος για να χρησιμοποιηθούν ως εικόνες web. Οι εικόνες αυτές έχουν ανάλυση περίπου 300+ dpi. Αντίθετα, οι εικόνες που έχουν βελτιστοποιηθεί για χρήση στο διαδίκτυο θα πρέπει να έχουν χαμηλή έως μέτρια ανάλυση στα 72 με 200 dpi (εξαίρεση φυσικά αποτελούν οι φωτογραφείες προϊόντων που εμφανίζονται με zoom). Κατά προσέγγιση, τα banners πρέπει να καταλαμβάνουν λιγότερο από 180kb, ενώ οι μικρότερες εικόνες, οι photos και τα widgets λιγότερο απο 90kb. Μπορείτε να μειώσετε το μέγεθος αρχείου μιας εικόνας, αξιοποιώντας εφαρμογές συμπίεσης εικόνων. Τέτοιες εφαρμογές μπορούν να απαλλάξουν τα αρχεία σας από περιττές πληροφορίες, όπως τις λεπτομέρειες αναφορικά με την κάμερα, τα metadata κ.λπ. Με αυτόν τον τρόπο θα μειώσετε το μέγεθος αρχείου, χωρίς να επηρεάσετε την ανάλυση της εικόνας. Εάν χρησιμοποιήσετε πολύ μεγάλες σε μέγεθος εικόνες, θα αυξήσετε τον χρόνο φόρτωσης του e-shop σας, ειδικά στις κινητές συσκευές. Ως αποτέλεσμα η εμπειρία χρήστη θα είναι αρνητική και θα αυξήσετε την πιθανότητα εγκατάλειψης. 

2. Εφαρμόστε ALT tags

Ως alt tag, ή αλλιώς alt text, ορίζεται το εναλλακτικό κείμενο που βρίσκεται στη θέση μιας εικόνας, όταν αυτή δεν εμφανίζεται σωστά ή και καθόλου. Αυτό μπορεί να συμβεί είτε γιατί οι ίδιοι οι χρήστες έχουν επιλέξει το browser τους να μην εμφανίζει εικόνες, είτε γιατί η σύνδεσή τους είναι αργή. Τα alt tags λοιπόν μας δίνουν τη δυνατότητα να έχουμε μια περιγραφή της εκάστοτε εικόνας και σε μη ιδανικές συνθήκες. Πιο σημαντικό όμως είναι ότι, αν το κείμενο της εικόνας περιλαμβάνει λέξεις-κλειδιά και εάν αυτές οι λέξεις είναι σχετικές με τα συμφραζόμενα, η ετικέτα θα συμβάλει στο SEO, καθώς οι μηχανές αναζήτησης κρίνουν ότι οι περιεκτικές ετικέτες αφορούν ουσιώδες και χρήσιμο περιεχόμενο.

3. Αποθηκεύστε τις εικόνες στο σωστό τύπο αρχείου - WEBP

Μέχρι πρόσφατα, οι πιο κοινοί τύποι αρχείων για εικόνες είναι Portable Network Graphics (PNG) και Joint Photographic Experts Group (JPEG ή JPG). Τα αρχεία PNG τείνουν να έχουν καλύτερη ποιότητα και να είναι μεγαλύτερα από τα JPEG. Κατά κύριο λόγο, θα πρέπει να χρησιμοποιήσετε αρχεία JPEG, καθώς είναι ένας καλός συμβιβασμός μεταξύ των δύο επιλογών και δεν επιβαρύνουν πολύ το site σας. Εξαίρεση αποτελούν περιπτώσεις όπου θα χρειαστεί να έχετε εικόνες με διάφανο background, τα logos, εικόνες με κείμενο και εικόνες στις οποίες επιθυμείτε να διατηρήσετε ξεκάθαρη ακόμα και την πιο μικρή λεπτομέρεια.

WEBP Google image next gen format

Στο σημείο αυτό θα πρέπει να επισημάνουμε ένα νεότερο τύπο αρχείων εικόνας, τις εικόνες webp. Ο συγκεκριμένος τύπος αρχείου, που ανέπτυξε η Google με σκοπό να αντικαταστήσει τους παραπάνω, έχει αρχίσει τα τελευταία χρόνια να κερδίζει όλο και περισσότερο έδαφος. Το webp format εξασφαλίζει καλύτερης ποιότητας εικόνες, σε πολύ μικρότερο μέγεθος, ιδανικές για χρήση σε ιστοσελίδες. Mε την εισαγωγή των PageSpeed Insights η Google προτείνει και επιβραβεύει την χρήση των εικόνων webp για καλύτερη βαθμολογία (PageSpeed score) και συνεπώς καλύτερο SEO. 

4. Αλλάξτε τις διαστάσεις των εικόνων

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

Στους ιστότοπους ηλεκτρονικού εμπορίου, όλες οι προϊοντικές εικόνες θα πρέπει να έχουν σταθερές διαστάσεις και να διασφαλίζεται ότι δεν εμφανίζονται στη σελίδα σας με παραμορφώσεις ή κακή ανάλυση. Οι πλατφόρμες ηλεκτρονικού εμπορίου, όπως το Woocommerce του Wordpress και το Prestashop, εμφανίζουν τις εικόνες προϊόντων στο ίδιο μέγεθος. Ωστόσο, εάν η μεταφορτωμένη εικόνα είναι πολύ μικρή ή με σημαντικά διαφορετικές διαστάσεις, μπορεί να εμφανίζεται ως κακής ποιότητας. Επιπλέον, η προσαρμογή των διαστάσεων των εικόνων στο κατάλληλο μέγεθος ώστε να είναι ίδιες μεταξύ τους, αλλά και να ταιριάζουν στη σελίδα σας, θα βελτιώσει και την ταχύτητα φόρτωσης, καθώς ο browser δεν θα χρειάζεται επιπλέον επεξεργασία για να τις αναπροσαρμόζει κάθε φορά.

Εφόσον θέλετε ένα κερδοφόρο e-shop, οφείλετε να δώσετε προσοχή στις εικόνες που χρησιμοποιείτε για να το εμπλουτίσετε. Είναι σημαντικό να βρείτε μια ισορροπία ανάμεσα στην ποιότητα και το μέγεθος των αρχείων κατά την κατασκευή του eshop σε worpdress ή prestashop, προκειμένου να προβάλετε τα προϊόντα και τις υπηρεσίες σας, χωρίς να θυσιάσετε την ταχύτητα απόκρισης.