Βελτιστοποίηση εικόνων
Πως μπορώ να βελτιστοποιήσω τις εικόνες μου στον ιστότοπο.
Η βελτιστοποίηση εικόνων αφορά δύο μέρη.
- Βελτιστοποίηση ως προς τα δεδομένα (data) που συνοδεύουν την εικόνα. Απαραίτητα για SEO.
- Βελτιστοποίηση ως προ την ταχύτητα λήψης (άρα και καλύτερο SEO)
1. Βελτιστοποίηση ως προς τα δεδομένα
Η εικόνα έχει δύο βασικά πληροφοριακά χαρακτηριστικά: την ιδιότητα alt (από το alternate) και το όνομα. Και τα δύο πρέπει να προσεχθούν.
Επιπλέον μπορεί να προστεθούν η λεζάντα (caption) και η επεξήγηση ή tooltip η οποία καταχωρείται μέσα στον κώδικα με την ιδιότητ title.
Η ιδιότητα alt
Η ιδιότητα alt περιέχει κείμενο σχετικό με την εικόνα το οποίο βρίσκεται στον κώδικα και χρησιμοποιείται όταν η εικόνα για κάποιο λόγο δεν είναι προσβάσιμη ή ορατή.
Το κείμενο στην ιδιότητα alt (αλλά και το όνομα) λαμβάνεται υπόψη από τις μηχανές όχι μόνο για την ποιότητα της σελίδας αλλά για στην αναζήτηση εικόνων από τις μηχανές αναζήτησης.
Καλές πρακτικές
Είναι καλό να έχετε τις εικόνες σε ξεχωριστό φάκελο ή φακέλους και γενικά να είναι σωστά οργανωμένες.
Καταχωρήστε την alt ιδιαίτερα όταν η εικόνα είναι λινκ
Αν πρόκειται να χρησιμοποιήσετε εικόνες ή εικονίδια ως λινκ, τότε θα πρέπει να προσθέσετε την alt διότι έτσι θα βοηθήσετε τις μηχανές.
Να περιέχει τη λέξη-κλειδί. Είναι καλό η alt να περιέχει τη λέξη-κλειδί που στοχεύουμε ή κάποια παραλλαγή.
Να αποφεύγετε μακρυά κείμενα για την alt. Μπορεί να θεωρηθεί spammy
Περιεκτικό περιεχόμενο.
Κακή: <img src="views/pancakes.png" alt="">
Μέτρια: <img src="views/pancakes.png" alt="pancakes">
Καλή: <img src="views/pancakes.png" alt="Stack of blueberry pancakes with powdered sugar">
Για εικόνες μορφής svg μπορείτε να χρησιμοποιήσετε την ετικέτα title αντί της alt.
<svg> <title>Τηγανίτα (pancake). Ένα έδεσμα το οποίο παρασκευάζεται κυρίως από αλεύρι και νερό</title> </svg>
Εικόνες περασμένες σε ιστοσελίδα ως εικόνες φόντου (background images) μέσω css, δεν έχουν alt και επομένως δεν ευρετηριάζοναι από τις μηχανές.
Χρησιμοποιούμε εικόνες φόντου μόνο για διακοσμητικούς λόγους.
Όνομα εικόνας
Χρησιμοποιήστε περιεκτικά ονόματα για τις εικόνες. Είναι γενικότερος κανόνας ότι η χρήση περιεκτικού κειμένου είναι στοιχείο ποιοτικού περιεχομένου.
Καλές πρακτικές
Να αποφεύγετε:
- Γενικά ονόματα όπως: "image1.jpg", "pic.gif", "1.jpg".
- Μακρυά ονόματα
- Παραγέμισμα με λέξεις κλειδιά
- Τη χρήση μόνο εικόνων για λινκ και πλοήγηση
Η ετικέτα figcaption (λεζάντα)
Με την ετικέτα figcaption μπορείτε να προσθέσετε λεζάντα σε μια εικόνα και έτσι να προσθέσετε πληροφορίες χρήσιμες για τους χρήστες και τις μηχανές.
<figure> <img src="images/pancakes.jpg" alt="Η τηγανίτα (pancake) είναι ένα έδεσμα"> <figcaption>Η τηγανίτα (pancake) είναι ένα έδεσμα το οποίο παρασκευάζεται κυρίως από αλεύρι και νερό</figcaption> </figure>
Tooltip (επεξήγηση)
Είναι πληροφορία που αφορά την εικόνα και εμφανίζεται όταν ο δείκτης μετακινηθεί επάνω στην εικόνα.
Βελτιστοποίηση ως προ την ταχύτητα λήψης
Οι εικόνες επηρεάζουν δραματικά την ταχύτητα λήψης (download) μιας σελίδας.
Μορφές εικόνων (format)
Οι μορφές (filetypes) των αρχείων να είναι κοινές όπως: jpg, jpeg, gif, png.
Επίσης η νέα μορφή webp κερδίζει τις προτιμήσεις.
Η μορφή JPEG 2000 δεν έχει ακόμα ευρεία υποστήριξη.
Μπορείτε να δείτε και το https://caniuse.com/ για περισσότερες λεπτομέρειες.
Προσοχή να ταιριάζει η μορφή της εικόνας με την προέκταση.
Ανάλυση ή διαστάσεις
Επειδή η ταχύτητα λήψης μιας σελίδας μετράει στο SEO και επειδή οι εικόνες που συνοδεύουν μια σελίδα καθυστερούν τη λήψη, θα πρέπει οι εικόνες να είναι βελτιστοποιημένες ως προς το μέγεθος (size) και τις διαστάσεις.
Για το μέγεθος μπορείτε να χρησιμοποιήσετε εργαλεία συμπίεσης αλλά και νέες μορφές εικόνων όπως: WebP, JPEG 2000, JPEG XR
Επίσης οι διαστάσεις μπορούν να ρυθμιστούν με ένα πρόγραμμα επεξεργασίας εικόνων ή με τη χρήση κατάλληλων πρόσθετων στην πλατφόρμα που δουλεύετε.
Τεχνικές για γρήγορη λήψη εικόνων.
CDN
Ένας τρόπος για να αυξήσετε ταχύτητες είναι η χρήση της προσωρινής μνήμης (μνήμης cache) ή κάποιας υπηρεσίας CDN.
Lazy loading
Μια νέα ιδιότητα για εικόνες και iframes για να γίνεται η λήψη τους όταν και εάν χρειάζεται εξετάζοντας κατά πόσο αυτές βρίσκονται στο viewport.
Υποστηρίζεται ήδη από το chrome και wordpress. Διαφορετικά θα πρέπει να χρησιμοποιηθεί κάποιο πρόσθετο.
<img src="views/celebration.jpg" loading="lazy" alt="celebration" /> <iframe src="video-player.html" loading="lazy"></iframe>
Εικόνα από πρόσθετο για Lazy loading.
Άλλα θέματα σχετικά με εικόνες
Αρχείο Image Sitemap
Προσθέστε ένα αρχείο Image Sitemap. Θα βοηθήσει πολύ τα bots. Η δομή του είναι ανάλογη αυτής του XML Sitemaps. Και εδώ θα χρειαστείτε κάποιο πρόσθετο.
<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"> <url> <loc>http://example.com/sample.html</loc> <image:image> <image:loc>http://example.com/image.jpg</image:loc> </image:image> <image:image> <image:loc>http://example.com/photo.jpg</image:loc> </image:image> </url> </urlset>
Για περισσότερες πληροφορίες: support.google.com/webmasters
Η ιδιότητα longdesc (long description)
Καταχωρείται ως ιδιότητα σε εικόνες και παραπέμπουν σε κάποιο αρχείο με πληροφορίες.
<img src="views/apple.jpg" alt="nice apple" longdesc="http://example.com/product/apple.html">
Reverse Image Search
Όπως ακριβώς και στο κείμενο έτσι και στα Images η Google μπορεί να εντοπίσει αν αυτά είναι πρωτότυπα ή όχι, μέσω του reverse image search. Αν αυτά είναι πρωτότυπα τότε ενισχύεται η ποιοτική διάσταση της σελίδας σας. Προσοχή λοιπόν θα πρέπει να δώσετε αν χρησιμοποιείτε φωτογραφίες ή εικόνες που βρήκατε σε άλλες ιστοσελίδες, ακόμα και αν αλλάξετε το όνομα του αρχείου τους ή το μέγεθος τους η Google θα το καταλάβει.
Να αποφεύγετε
Κείμενα σε εικόνες. Δεν προτείνεται η γραφή κειμένου (αν πρόκειται για κείμενο ευρετηρίασης) επάνω στην εικόνα.
Χαμηλής ποιότητας παράνομες εικόνες από το Google images
Εργαλεία
Πρόσθετο για Photoshop
Με αυτό το πρόσθετο μπορείτε να μετατρέπετε διαφορετικές μορφές εικόνων σε webp.
Image sitemap generator
Δωρεάν εργαλείο για παραγωγή sitemap εικόνων online
sitemap.xml plugin για wordpress
Εργαλείο για την παραγωγή sitemap.xml για το wordpress
Smart JPEG and PNG compression
Δωρεάν on-line εργαλείο για παραγωγή βελτιστοποιημένων εικόνων.
squoosh
Ελεύθερο on-line εργαλείο από το development team της google για συμπίεση εικόνων.
compress jpeg
on-line εργαλείο για συμπίεση εικόνων.
compressor.io
on-line εργαλείο για συμπίεση εικόνων.
Smush Image Compression and Optimization
plugin για wordpress