Βελτιστοποίηση φωτογραφιών προϊόντων: WebP, AVIF, μεγέθη και lazy loading

Σε σχεδόν κάθε e-shop που ελέγχουμε, οι φωτογραφίες είναι το μεγαλύτερο μέρος του βάρους της σελίδας. Και είναι λογικό: ένα κατάστημα πουλάει με εικόνες. Το πρόβλημα δεν είναι ότι έχετε πολλές φωτογραφίες, αλλά ότι συχνά σερβίρονται σε λάθος μέγεθος, σε παλιό format και τη λάθος στιγμή. Τα καλά νέα: αυτό είναι από τα πιο εύκολα πράγματα να διορθωθούν, με ορατό αποτέλεσμα στην ταχύτητα.

Τα τρία ερωτήματα για κάθε εικόνα

Για να σερβιριστεί σωστά μια εικόνα, πρέπει να απαντηθούν τρία πράγματα:

1. Σε ποιο format; JPEG/PNG ή WebP/AVIF;
2. Σε ποιο μέγεθος; Τόσα pixels όσα χρειάζεται η οθόνη — όχι περισσότερα.
3. Πότε; Αμέσως ή όταν ο χρήστης κάνει scroll κοντά της;

Formats: WebP και AVIF

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

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

Η πρακτική μας σύσταση:

• Παράγετε WebP για όλες τις εικόνες.
• Προσθέστε AVIF αν το εργαλείο σας το υποστηρίζει αξιόπιστα, με WebP ή JPEG ως fallback.
• Κρατήστε τα πρωτότυπα σε υψηλή ποιότητα σε ασφαλές σημείο — μην τα αντικαθιστάτε με τα συμπιεσμένα.
• PNG μόνο για γραφικά με διαφάνεια ή έντονες άκρες (λογότυπα, εικονίδια). Για λογότυπα και εικονίδια ακόμη καλύτερα SVG.

Πολλά CDN και plugins κάνουν αυτόματα τη μετατροπή και σερβίρουν το καλύτερο format ανάλογα με τον browser. Είναι συνήθως ο πιο ανώδυνος δρόμος.

Μεγέθη: σταματήστε να σερβίρετε 3000 pixels σε κινητό

Η πιο συχνή σπατάλη: η φωτογραφία ανεβαίνει απευθείας από τη μηχανή ή τον προμηθευτή σε 3000–5000 pixels και σερβίρεται έτσι σε μια οθόνη κινητού.

Τι να κάνετε

• Ορίστε ένα μέγιστο μέγεθος upload, π.χ. 2000 pixels στη μεγάλη πλευρά. Αρκεί για zoom και για τα feeds.
• Παράγετε πολλαπλά μεγέθη (thumbnail, κατηγορία, προϊόν, zoom). Το WordPress/WooCommerce το κάνει αυτόματα — βεβαιωθείτε ότι τα μεγέθη ταιριάζουν στο θέμα σας.
• Χρησιμοποιήστε srcset και sizes ώστε ο browser να διαλέγει το κατάλληλο μέγεθος για κάθε οθόνη. Τα περισσότερα σύγχρονα θέματα το κάνουν· ελέγξτε ότι το sizes αντιστοιχεί στην πραγματική διάταξη, γιατί ένα λάθος sizes κάνει τον browser να κατεβάζει μεγαλύτερη εικόνα απ' ό,τι χρειάζεται.
• Μετά από αλλαγή θέματος, ξαναπαράγετε τα thumbnails. Αλλιώς μπορεί να σερβίρονται λάθος μεγέθη.

Πόσο «βαριά» πρέπει να είναι;

Δεν υπάρχει μαγικός αριθμός, αλλά ως κανόνας: ένα thumbnail κατηγορίας δεν πρέπει να είναι εκατοντάδες KB και η κύρια φωτογραφία προϊόντος σε κινητό συνήθως χωράει άνετα σε κλάσμα του μεγέθους του πρωτοτύπου. Αν βλέπετε εικόνες του ενός και των δύο MB στο PageSpeed Insights, εκεί είναι η πρώτη σας νίκη.

Lazy loading: ναι, αλλά όχι παντού

Το lazy loading σημαίνει ότι οι εικόνες φορτώνουν μόνο όταν ο χρήστης πλησιάσει με το scroll. Στα σύγχρονα browsers αρκεί το attribute loading="lazy", χωρίς JavaScript.

Το πιο συχνό λάθος: lazy loading και στην κύρια εικόνα της σελίδας. Η κύρια φωτογραφία προϊόντος ή το hero της αρχικής είναι συνήθως το στοιχείο LCP. Αν το καθυστερήσετε, χαλάτε το LCP. Γι' αυτό:

• Η κύρια εικόνα: χωρίς lazy loading, ιδανικά με fetchpriority="high".
• Οι πρώτες 2–4 εικόνες προϊόντων σε μια σελίδα κατηγορίας στο κινητό: επίσης χωρίς lazy loading.
• Όλες οι υπόλοιπες: loading="lazy".

Για περισσότερα για τη σχέση εικόνων και LCP, δείτε το άρθρο μας για τα Core Web Vitals στα e-shops.

Διαστάσεις: το μυστικό για μηδενικό CLS

Κάθε εικόνα πρέπει να έχει δηλωμένο width και height (ή aspect-ratio στο CSS). Έτσι ο browser κρατάει τον σωστό χώρο πριν φορτώσει η εικόνα και η σελίδα δεν «πηδάει». Κρατήστε επίσης σταθερή αναλογία στις φωτογραφίες προϊόντων (π.χ. όλες τετράγωνες ή όλες 4:5): το grid των κατηγοριών φαίνεται πιο προσεγμένο και αποφεύγετε άνισα ύψη.

SEO εικόνων: τα βασικά

• Ονόματα αρχείων περιγραφικά: mpoti-dermatini-mavri.webp αντί για IMG_4521.webp.
• Alt text που περιγράφει πραγματικά την εικόνα: «Μαύρη δερμάτινη μπότα με κορδόνια, πλάγια όψη». Όχι λίστα από keywords.
• Μη βάζετε κείμενο πάνω στις φωτογραφίες προϊόντων. Δεν διαβάζεται από μηχανές αναζήτησης και συχνά απορρίπτεται από Google Shopping και συγκριτικές πλατφόρμες.
• Οι εικόνες στα feeds (Skroutz, Google) πρέπει να είναι προσβάσιμες χωρίς hotlink protection.

Ροή εργασίας για νέα προϊόντα

1. Φωτογράφιση με σταθερό φόντο και αναλογία.
2. Επεξεργασία και εξαγωγή σε έως 2000 pixels, υψηλή ποιότητα JPEG.
3. Ονομασία αρχείου περιγραφική.
4. Upload — το σύστημα παράγει μεγέθη και WebP/AVIF αυτόματα.
5. Συμπλήρωση alt text.
6. Γρήγορος έλεγχος της σελίδας στο κινητό.

Checklist ελέγχου για υπάρχον κατάστημα

• [ ] Οι εικόνες σερβίρονται σε WebP ή AVIF;
• [ ] Υπάρχουν εικόνες άνω του 1 MB στις βασικές σελίδες;
• [ ] Το srcset και το sizes υπάρχουν και είναι σωστά;
• [ ] Η κύρια εικόνα δεν έχει lazy loading;
• [ ] Οι υπόλοιπες έχουν;
• [ ] Όλες οι εικόνες έχουν διαστάσεις;
• [ ] Τα thumbnails έχουν ξαναπαραχθεί μετά την τελευταία αλλαγή θέματος;
• [ ] Τα alt texts είναι συμπληρωμένα;

Τι γίνεται με τον υπάρχοντα κατάλογο;

Αν έχετε ήδη χιλιάδες φωτογραφίες, δεν χρειάζεται να τις ξαναφτιάξετε μία-μία. Τα περισσότερα εργαλεία βελτιστοποίησης κάνουν μαζική επεξεργασία της βιβλιοθήκης πολυμέσων. Τρέξτε την πρώτα σε staging ή σε μικρή παρτίδα, ελέγξτε την ποιότητα σε προϊόντα με λεπτομέρειες (υφάσματα, κοσμήματα) και μετά προχωρήστε στο σύνολο.

Συμπέρασμα

Η βελτιστοποίηση εικόνων είναι από τις λίγες τεχνικές δουλειές με σχεδόν εγγυημένο αποτέλεσμα: πιο γρήγορες σελίδες, καλύτερο LCP και λιγότερη κατανάλωση δεδομένων για τους πελάτες σας στο κινητό.

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