Ανοίξτε το network tab σε ένα αργό επιχειρηματικό website και συνήθως θα βρείτε τον ίδιο ένοχο: μια φωτογραφία 4,8 MB κατευθείαν από τη μηχανή, που εμφανίζεται σε πλάτος 600 pixel. Η βελτιστοποίηση εικόνων το λύνει σε ένα απόγευμα, και παραμένει η δουλειά ταχύτητας με τη μεγαλύτερη απόδοση για τα περισσότερα sites.
Οι τέσσερις μοχλοί στη βελτιστοποίηση εικόνων
Πρώτα, οι διαστάσεις. Μην σερβίρετε ποτέ εικόνα μεγαλύτερη από τον χώρο που καλύπτει, επί δύο για οθόνες υψηλής πυκνότητας. Ένα hero στα 1600 pixel αρκεί· τα 4000 είναι σπατάλη.
Δεύτερον, η μορφή. Το WebP είναι πλέον η λογική προεπιλογή, αφού το υποστηρίζει κάθε σύγχρονος browser και τα αρχεία βγαίνουν περίπου 25–35% μικρότερα από αντίστοιχο JPEG. Το AVIF συμπιέζει ακόμη πιο δυνατά, ειδικά σε φωτογραφίες, και η υποστήριξη είναι ευρεία — το caniuse δείχνει την τρέχουσα εικόνα. Επομένως, σερβίρετε AVIF με εναλλακτικό WebP όπου το επιτρέπουν τα εργαλεία σας. Παράλληλα, κρατήστε SVG για λογότυπα και εικονίδια.
Τρίτον, η συμπίεση. Ποιότητα γύρω στο 75 με 82 είναι αόρατη για τον επισκέπτη και μισιάζει το αρχείο. Πηγαίνετε πιο κάτω σε υφές φόντου, πιο ψηλά σε κοντινά προϊόντων.
Τέταρτον, η responsive παράδοση. Ένα κινητό δεν πρέπει να κατεβάζει την έκδοση για desktop. Το WordPress παράγει πολλά μεγέθη και γράφει srcset αυτόματα, οπότε βεβαιωθείτε ότι το theme σας το χρησιμοποιεί.
Η σειρά φόρτωσης: εδώ γίνεται το λάθος
Το lazy loading καθυστερεί τις εικόνες μέχρι να χρειαστούν, κάτι που βοηθά πολύ σε μεγάλες σελίδες. Ωστόσο, το lazy loading στην κύρια εικόνα βλάπτει, γιατί αυτή είναι συνήθως το Largest Contentful Paint. Ορίστε λοιπόν την πρώτη ορατή εικόνα ως eager με υψηλή προτεραιότητα, και αφήστε lazy όλες τις υπόλοιπες. Επιπλέον, δηλώνετε πάντα width και height. Χωρίς αυτά το layout αναπηδά, όπως συζητήσαμε στα Core Web Vitals.
Στο WordPress, χωρίς να το σκέφτεστε
Αυτοματοποιήστε το βαρετό μέρος. Ένα plugin βελτιστοποίησης, ή το module εικόνων του caching plugin, μετατρέπει τα uploads σε WebP ή AVIF και αφαιρεί τα metadata. Εναλλακτικά, ένα CDN με image resizing μετατρέπει και αλλάζει μέγεθος κατ’ απαίτηση, κρατώντας καθαρή τη βιβλιοθήκη. Σε κάθε περίπτωση, διορθώστε και τις εικόνες που υπάρχουν ήδη — τα περισσότερα plugins έχουν μαζική επεξεργασία. Έπειτα συμφωνήστε έναν κανόνα με όποιον ανεβάζει περιεχόμενο.
Δύο λεπτομέρειες που φέρνουν επισκέψεις
Γράψτε πραγματικό alt text. Εξυπηρετεί πρώτα όσους χρησιμοποιούν screen reader και δεύτερα τις μηχανές, οπότε περιγράψτε την εικόνα αντί να στοιβάζετε λέξεις-κλειδιά. Επίσης δώστε ουσιαστικά ονόματα στα αρχεία πριν το upload — το keramika-plakidia-mpanio.jpg λέει κάτι στη Google, το IMG_2841.jpg τίποτα. Αν παράγετε εικόνες με AI, ισχύουν τα ίδια, συν οι επιφυλάξεις στο άρθρο για την παραγωγή εικόνων με AI.
Η καλή βελτιστοποίηση εικόνων είναι αντιθεαματική και τρομερά αποτελεσματική: ελαφρύτερες σελίδες, καλύτερες κατατάξεις, πιο ευχαριστημένοι επισκέπτες σε ελληνικό 4G. Ο οδηγός μας για τον χρόνο φόρτωσης και τις μετατροπές βάζει το εμπορικό επιχείρημα σε νούμερα. Και αν η βιβλιοθήκη σας έχει χρόνια ανεπεξέργαστα uploads, η ομάδα μας την καθαρίζει χωρίς να σπάσει σελίδα.
