Πώς να φορτώνουν πιο γρήγορα οι εικόνες σε έναν ιστότοπο
Οι πέντε αλλαγές που μειώνουν το βάρος των εικόνων σε κάθε ιστότοπο, με σειρά επίδρασης.
Στους περισσότερους ιστότοπους, οι εικόνες αποτελούν το μεγαλύτερο μέρος όσων κατεβάζει ένας επισκέπτης. Μία μόνο μη βελτιστοποιημένη φωτογραφία από κινητό μπορεί να ζυγίζει περισσότερο από όλη την υπόλοιπη σελίδα μαζί. Η διόρθωση των εικόνων είναι συνήθως η μεγαλύτερη και φθηνότερη βελτίωση ταχύτητας που υπάρχει, και οι πιο γρήγορες σελίδες κατατάσσονται καλύτερα, κρατούν τους επισκέπτες περισσότερο και φέρνουν περισσότερες πωλήσεις.
1. Ανεβάστε τις εικόνες στο μέγεθος που εμφανίζονται
Μια φωτογραφία κατευθείαν από το κινητό έχει πλάτος 4000 pixel ή περισσότερο. Μια στήλη περιεχομένου σε έναν ιστότοπο σπάνια ξεπερνά τα 1200 pixel, και μια κάρτα ή μικρογραφία είναι πολύ μικρότερη. Κάθε επιπλέον pixel κατεβαίνει και μετά πετιέται από το πρόγραμμα περιήγησης. Αλλάξτε το μέγεθος πριν από τη μεταφόρτωση σε διακομιστή: περίπου 2000 pixel πλάτος για banner πλήρους πλάτους (ώστε να μένουν καθαρά σε οθόνες υψηλής πυκνότητας), 1200 έως 1600 για εικόνες περιεχομένου και 600 έως 800 για κάρτες. Το εργαλείο αλλαγής μεγέθους επεξεργάζεται έναν ολόκληρο φάκελο μονομιάς.
2. Συμπιέστε
Με τις σωστές διαστάσεις, τα υπόλοιπα τα κάνει η συμπίεση. Μια φωτογραφία αποθηκευμένη σε ποιότητα 80 φαίνεται ίδια με μια σε ποιότητα 100 σε μια ιστοσελίδα και συχνά έχει το ένα τρίτο του μεγέθους. Ο συμπιεστής εικόνων δουλεύει με πολλά αρχεία μαζί και δείχνει την εξοικονόμηση για το καθένα.
3. Χρησιμοποιήστε WebP
Το WebP υποστηρίζεται από κάθε σύγχρονο πρόγραμμα περιήγησης και είναι συνήθως 25 έως 35 τοις εκατό μικρότερο από το JPG στην ίδια ορατή ποιότητα, ενώ η υποστήριξη διαφάνειας το κάνει κατάλληλο αντικαταστάτη και για πολλά PNG. Μετατρέψτε με το JPG σε WebP ή το PNG σε WebP. Το AVIF είναι ακόμη μικρότερο, αλλά η κωδικοποίησή του είναι πιο αργή και τα συστήματα μεταφόρτωσης δεν το υποστηρίζουν παντού, οπότε το WebP είναι η πρακτική προεπιλογή.
4. Διαλέξτε τη σωστή μορφή για το περιεχόμενο
| Περιεχόμενο | Καλύτερη μορφή |
|---|---|
| Φωτογραφίες | WebP, ή JPG όπου το WebP δεν γίνεται δεκτό |
| Λογότυπα και εικονίδια | SVG αν το έχετε, διαφορετικά PNG ή WebP |
| Στιγμιότυπα οθόνης με κείμενο | PNG ή WebP χωρίς απώλειες |
| Απλά κινούμενα γραφικά | Ένα σύντομο βίντεο αντί για GIF |
5. Βοηθήστε το πρόγραμμα περιήγησης να τις φορτώνει έξυπνα
- Καθυστερημένη φόρτωση (lazy loading). Οι εικόνες κάτω από την πρώτη οθόνη πρέπει να φορτώνουν μόνο όταν ο επισκέπτης κυλήσει κοντά τους. Οι περισσότερες πλατφόρμες το κάνουν αυτόματα· σε σκέτη HTML, προσθέστε loading="lazy" στις ετικέτες img που δεν φαίνονται αρχικά.
- Διαστάσεις. Δώστε σε κάθε εικόνα πλάτος και ύψος, ώστε η σελίδα να μην πηδάει καθώς φτάνουν οι εικόνες. Η μετατόπιση διάταξης είναι ένα από τα Core Web Vitals της Google.
- Πρώτα η κύρια εικόνα. Η μεγάλη εικόνα στην κορυφή μιας σελίδας, συνήθως αυτή που μετράει ως Largest Contentful Paint, δεν πρέπει ποτέ να φορτώνει καθυστερημένα. Πρέπει να φορτώνει όσο το δυνατόν νωρίτερα.
Πόση διαφορά κάνει
Μια τυπική σελίδα με δέκα φωτογραφίες κατευθείαν από το κινητό μπορεί να ζυγίζει 30 MB. Με αλλαγή μεγέθους σε λογικά πλάτη και συμπίεση, η ίδια σελίδα πέφτει συνήθως γύρω στα 2 MB. Με μετατροπή σε WebP, πλησιάζει τα 1,4 MB. Σε σύνδεση κινητού, αυτή είναι η διαφορά ανάμεσα σε μια σελίδα που εμφανίζεται σε ένα δευτερόλεπτο και σε μια σελίδα που πολλοί επισκέπτες εγκαταλείπουν.
Έλεγχος των αποτελεσμάτων σας
Το PageSpeed Insights της Google και ο πίνακας Lighthouse στα εργαλεία προγραμματιστή του Chrome απαριθμούν τις υπερμεγέθεις εικόνες, τις εικόνες που θα έπρεπε να είναι WebP και το στοιχείο Largest Contentful Paint. Τρέξτε τα πριν και μετά, και εστιάστε πρώτα στις σελίδες με τη μεγαλύτερη επισκεψιμότητα.