Ρώτα οποιονδήποτε προγραμματιστή web τι επιβραδύνει τις περισσότερες ιστοσελίδες και η απάντηση είναι σχεδόν πάντα η ίδια. Οι εικόνες. Η βελτιστοποίηση εικόνων για το web είναι η διαδικασία μείωσης του μεγέθους των αρχείων εικόνας χωρίς απώλεια οπτικής ποιότητας, ώστε οι σελίδες να φορτώνουν πιο γρήγορα χωρίς να φαίνονται χειρότερες. Μια μοναδική μη συμπιεσμένη φωτογραφία μπορεί να είναι αρκετά megabytes. Η ίδια εικόνα, με σωστή μορφή και συμπίεση, μπορεί να είναι κάτω από 100 kilobytes χωρίς ορατή διαφορά στην οθόνη. Το άρθρο καλύπτει τις σωστές μορφές αρχείων, πώς λειτουργεί η συμπίεση, πότε να αλλάζεις μέγεθος πριν το ανέβασμα, πώς ταιριάζει το lazy loading και τι κάνει τη μεγαλύτερη πρακτική διαφορά στην ταχύτητα φόρτωσης της σελίδας σου.
Οι εικόνες είναι ο μεγαλύτερος παράγοντας βάρους σελίδας στις περισσότερες ιστοσελίδες. Μια σελίδα με πέντε μη βελτιστοποιημένες φωτογραφίες μπορεί να ζυγίζει δέκα φορές περισσότερο απ' όσο χρειάζεται. Αυτό το βάρος μεταφράζεται άμεσα σε πιο αργή φόρτωση, χειρότερο σκορ Largest Contentful Paint και επισκέπτες που φεύγουν πριν ολοκληρωθεί η εμφάνιση της σελίδας. Για να δεις γιατί η ταχύτητα φόρτωσης επηρεάζει την επιχείρησή σου και τις θέσεις στην αναζήτηση, δες το άρθρο για το γιατί μετράει η ταχύτητα της ιστοσελίδας.
Γιατί οι εικόνες επιβραδύνουν τις ιστοσελίδες;
Όταν ένας επισκέπτης ανοίγει μια σελίδα, ο browser κατεβάζει κάθε πόρο που υπάρχει σε αυτήν πριν την εμφανίσει. Οι εικόνες είναι συνήθως οι μεγαλύτεροι από αυτούς τους πόρους. Κάθε εικόνα απαιτεί δικό της αίτημα, και ο browser πρέπει να περιμένει να ολοκληρωθούν αυτά τα αιτήματα πριν μπορέσει να αποδώσει πλήρως το περιεχόμενο.
Πώς επηρεάζουν οι εικόνες τις μετρήσεις φόρτωσης
- Οι εικόνες επηρεάζουν άμεσα το Largest Contentful Paint (LCP). Αν το μεγαλύτερο ορατό στοιχείο μιας σελίδας είναι μια κύρια εικόνα, το LCP είναι ο χρόνος που χρειάζεται αυτή η εικόνα για να φορτώσει πλήρως
- Οι μη βελτιστοποιημένες εικόνες αυξάνουν το συνολικό βάρος της σελίδας, κάτι που καθυστερεί κάθε άλλη μέτρηση στη χρονογραμμή φόρτωσης
- Στις συνδέσεις κινητού, το αποτέλεσμα ενισχύεται. Μια κύρια εικόνα 3MB που φορτώνει σε δύο δευτερόλεπτα σε ευρυζωνική σύνδεση μπορεί να χρειαστεί οκτώ ή περισσότερα σε ένα μέσο δίκτυο κινητής
- Οι πολλές μεγάλες εικόνες επιδεινώνουν το πρόβλημα. Μια γκαλερί ή μια σελίδα προϊόντων με δέκα μη συμπιεσμένες φωτογραφίες μπορεί να είναι δύσκολη στη χρήση σε πιο αργές συνδέσεις
Ποιες μορφές αρχείων πρέπει να χρησιμοποιείς για εικόνες web;
JPEG
- Η τυπική μορφή για φωτογραφίες και εικόνες με διαβαθμίσεις και πολλά χρώματα
- Υποστηρίζει συμπίεση με απώλειες, που σημαίνει ότι μέρος των δεδομένων της εικόνας αφαιρείται μόνιμα για να μειωθεί το μέγεθος του αρχείου
- Υποστηρίζεται από όλους τους browsers και τις συσκευές χωρίς εξαίρεση
- Μια ρύθμιση ποιότητας 75 έως 85 παράγει αρχεία που είναι 60 έως 80 τοις εκατό μικρότερα από το αρχικό, χωρίς ορατή απώλεια ποιότητας για τις περισσότερες φωτογραφίες
PNG
- Η μορφή για εικόνες που χρειάζονται διαφανές φόντο, όπως λογότυπα, εικονίδια και γραφικά με επίπεδες περιοχές χρώματος
- Χρησιμοποιεί συμπίεση χωρίς απώλειες, που σημαίνει ότι δεν αφαιρούνται δεδομένα και η εικόνα διατηρείται ακριβώς όπως είναι
- Τα αρχεία PNG είναι σημαντικά μεγαλύτερα από τα JPEG για φωτογραφίες. Χρησιμοποίησε PNG μόνο όταν απαιτείται διαφάνεια· χρησιμοποίησε JPEG ή WebP για φωτογραφίες
WebP
- Μια σύγχρονη μορφή που αναπτύχθηκε για να αντικαταστήσει και το JPEG και το PNG, με καλύτερη συμπίεση στην ίδια ποιότητα
- Οι εικόνες WebP είναι συνήθως 25 έως 35 τοις εκατό μικρότερες από τα αντίστοιχα αρχεία JPEG
- Υποστηρίζει και συμπίεση με απώλειες και χωρίς απώλειες, και υποστηρίζει διαφάνεια
- Υποστηρίζεται από όλους τους μεγάλους browsers. Αν ο δημιουργός ιστοσελίδων σου δεν μετατρέπει αυτόματα τις εικόνες σε WebP, μετάτρεψέ τες χειροκίνητα πριν ανεβάσεις
AVIF
- Μια νεότερη μορφή που προσφέρει καλύτερη συμπίεση από το WebP, συχνά 50 τοις εκατό μικρότερη από το JPEG σε συγκρίσιμη ποιότητα
- Η υποστήριξη από τους browsers μεγαλώνει αλλά δεν είναι ακόμη καθολική. Χρησιμοποίησε AVIF όπου υποστηρίζεται, με αυτόματη εναλλακτική σε WebP ή JPEG για browsers που δεν το υποστηρίζουν
Τι είναι η συμπίεση εικόνων και πώς λειτουργεί;
Η συμπίεση μειώνει το μέγεθος του αρχείου αφαιρώντας ή απλοποιώντας δεδομένα της εικόνας. Υπάρχουν δύο τύποι, και η διαφορά καθορίζει πότε να χρησιμοποιήσεις τον καθένα.
Συμπίεση με απώλειες
- Αφαιρεί μόνιμα μέρος των δεδομένων της εικόνας για να πετύχει μικρότερο αρχείο
- Τα δεδομένα που αφαιρούνται επιλέγονται με βάση το τι είναι λιγότερο πιθανό να προσέξει το ανθρώπινο μάτι, συνήθως λεπτές διαφορές χρώματος και λεπτομέρειες υφής
- Χρησιμοποιείται στο JPEG και στο WebP με απώλειες
- Μια ρύθμιση ποιότητας 75 έως 85 παράγει δραματικά μικρότερα αρχεία με εικόνες που μοιάζουν ίδιες με το μη συμπιεσμένο πρωτότυπο για τις περισσότερες πρακτικές χρήσεις
- Απόφυγε να ξαναποθηκεύεις ένα ήδη συμπιεσμένο JPEG σε χαμηλότερη ποιότητα. Αυτό στοιβάζει ατέλειες συμπίεσης και υποβαθμίζει την εικόνα περαιτέρω σε κάθε αποθήκευση
Συμπίεση χωρίς απώλειες
- Μειώνει το μέγεθος του αρχείου χωρίς να αφαιρεί δεδομένα της εικόνας. Κάθε pixel διατηρείται ακριβώς
- Χρησιμοποιείται στο PNG και στο WebP χωρίς απώλειες
- Μικρότερη εξοικονόμηση μεγέθους από τη συμπίεση με απώλειες, αλλά χωρίς καμία απώλεια ποιότητας
- Ταιριάζει καλύτερα σε διαγράμματα προϊόντων, στιγμιότυπα οθόνης, γραφικά με πολύ κείμενο ή οποιαδήποτε εικόνα όπου οι ατέλειες συμπίεσης θα ήταν ορατές ή απαράδεκτες
Χρειάζεται να αλλάζεις μέγεθος στις εικόνες πριν τις ανεβάσεις;
Το μέγεθος αρχείου και οι διαστάσεις σε pixel είναι ξεχωριστά ζητήματα, και τα δύο επηρεάζουν την ταχύτητα φόρτωσης. Η συμπίεση μιας εικόνας πλάτους 4,000 pixel δεν βοηθά αν ο browser χρειάζεται να την εμφανίσει μόνο σε πλάτος 800 pixel. Ο browser κατεβάζει ολόκληρη την εικόνα των 4,000 pixel και τη μικραίνει στο παράθυρο προβολής, σπαταλώντας εύρος ζώνης και επιβραδύνοντας τη σελίδα για κάθε επισκέπτη.
Πώς να ορίζεις σωστά το μέγεθος των εικόνων πριν το ανέβασμα
- Βρες το μέγιστο πλάτος με το οποίο θα εμφανίζεται ποτέ η εικόνα. Για εικόνες πλήρους πλάτους στον υπολογιστή, αυτό είναι συνήθως 1,440 έως 1,920 pixel
- Για εικόνες σε στήλες ή κάρτες, το πλάτος εμφάνισης είναι μικρότερο, συχνά 400 έως 800 pixel
- Άλλαξε το μέγεθος της εικόνας στο μέγιστο μέγεθος εμφάνισής της πριν την ανεβάσεις
- Για οθόνες retina και υψηλής πυκνότητας, πολλαπλασίασε το πλάτος εμφάνισης επί 1.5 έως 2. Μια εικόνα κάρτας πλάτους 400 pixel ωφελείται από αρχείο πηγής 600 έως 800 pixel για να φαίνεται καθαρή σε οθόνες retina
Τι είναι το lazy loading και πώς επηρεάζει τη βελτιστοποίηση εικόνων;
Το lazy loading καθυστερεί το κατέβασμα εικόνων που δεν είναι ακόμη ορατές στο παράθυρο προβολής. Αντί να φορτώνει όλες τις εικόνες της σελίδας ταυτόχρονα, ο browser φορτώνει εικόνες μόνο καθώς οι επισκέπτες κυλούν κοντά σε αυτές. Σε σελίδες με πολλές εικόνες, αυτό μειώνει σημαντικά το αρχικό βάρος της σελίδας και βελτιώνει το Time to Interactive για το περιεχόμενο που φαίνεται χωρίς κύλιση.
- Το lazy loading υποστηρίζεται εγγενώς σε όλους τους μεγάλους browsers με το attribute
loading="lazy"στα tags εικόνων - Μην εφαρμόζεις lazy loading σε εικόνες above the fold. Η κύρια εικόνα και κάθε περιεχόμενο που φαίνεται χωρίς κύλιση πρέπει να φορτώνει αμέσως
- Εφάρμοσε lazy loading σε όλες τις εικόνες κάτω από τη γραμμή, συμπεριλαμβανομένων γκαλερί προϊόντων, μικρογραφιών blog και ενοτήτων με πολλές εικόνες πιο κάτω στη σελίδα
Για μια πλήρη ανάλυση του πώς λειτουργεί το lazy loading και πότε να το χρησιμοποιείς, δες το άρθρο για το τι είναι το lazy loading και πώς λειτουργεί.
Τι είναι οι responsive εικόνες και γιατί μετράνε;
Μια responsive εικόνα είναι αυτή που σερβίρει διαφορετικό μέγεθος αρχείου ανάλογα με το μέγεθος της οθόνης του επισκέπτη. Αντί να στέλνεται μια εικόνα 1,920 pixel σε κάθε συσκευή, συμπεριλαμβανομένου ενός επισκέπτη σε οθόνη κινητού πλάτους 375 pixel, οι responsive εικόνες αφήνουν τον browser να ζητά μόνο ό,τι χρειάζεται.
Πώς μειώνουν οι responsive εικόνες τον χρόνο φόρτωσης στο κινητό
- Ένας επισκέπτης κινητού λαμβάνει εκδοχή 400 pixel της εικόνας αντί για το πλήρες αρχείο υπολογιστή, μειώνοντας δραματικά το μέγεθος του κατεβάσματος
- Οι responsive εικόνες χρησιμοποιούν το attribute
srcsetγια να ορίσουν πολλά αρχεία πηγής σε διαφορετικά πλάτη ώστε ο browser να διαλέξει το κατάλληλο - Οι δημιουργοί ιστοσελίδων που το χειρίζονται αυτόματα σε απαλλάσσουν από το να φτιάχνεις χειροκίνητα πολλά μεγέθη εικόνων
- Οι responsive εικόνες βελτιώνουν άμεσα τα Core Web Vitals στο κινητό, όπου η βελτιστοποίηση εικόνων έχει τη μεγαλύτερη επίδραση στο LCP
Για μια ανάλυση των Core Web Vitals και του πώς βαθμολογείται το LCP, δες το άρθρο για το τι είναι τα Core Web Vitals.
Πώς βελτιστοποιείς τις εικόνες βήμα βήμα;
Πριν το ανέβασμα
- Άλλαξε το μέγεθος της εικόνας στις σωστές διαστάσεις εμφάνισης
- Διάλεξε τη σωστή μορφή: WebP για φωτογραφίες και γενικά γραφικά, PNG μόνο όταν απαιτείται διαφάνεια
- Συμπίεσε με ρύθμιση ποιότητας 75 έως 85 για μορφές με απώλειες
- Έλεγξε το μέγεθος αρχείου. Μια τυπική εικόνα web πρέπει να είναι κάτω από 200KB. Οι κύριες εικόνες στον υπολογιστή μπορούν να φτάσουν τα 400KB· οτιδήποτε πάνω από αυτό αξίζει να ξαναδωθεί πριν το ανέβασμα
Μετά το ανέβασμα
- Πρόσθεσε περιγραφικό alt text σε κάθε εικόνα. Αυτό είναι σημαντικό για την προσβασιμότητα και συμβάλλει στην ορατότητα στην αναζήτηση. Για πλήρη οδηγό, δες το άρθρο για το πώς να χρησιμοποιείς εικόνες στην ιστοσελίδα σου
- Εφάρμοσε lazy loading σε όλες τις εικόνες κάτω από τη γραμμή
- Τρέξε τεστ ταχύτητας σελίδας αφού προσθέσεις νέες εικόνες. Μία μη βελτιστοποιημένη εικόνα μπορεί να ακυρώσει όλες τις άλλες βελτιώσεις ταχύτητας στη σελίδα
Σε συνεχή βάση
- Έλεγχε τις νέες εικόνες πριν από κάθε ανέβασμα. Οι μη βελτιστοποιημένες εικόνες περνούν εύκολα όταν δουλεύεις γρήγορα
- Τρέξε τεστ ταχύτητας μετά από κάθε σημαντική δέσμη νέων εικόνων που δημοσιεύεται
- Ξαναδές τις παλιότερες εικόνες αν το site προηγείται των σημερινών πρακτικών βελτιστοποίησης. Οι παλιές βιβλιοθήκες εικόνων είναι συχνή και παραβλεπόμενη πηγή προβλημάτων ταχύτητας
Για οδηγό δοκιμής της απόδοσης ολόκληρου του site σου, δες το άρθρο για το πώς να δοκιμάσεις την ταχύτητα της ιστοσελίδας σου.
Πώς το WEMASY διαχειρίζεται τη βελτιστοποίηση εικόνων
Ο δημιουργός ιστοσελίδων του WEMASY συμπιέζει και μετατρέπει αυτόματα τις εικόνες όταν ανεβαίνουν. Οι εικόνες σερβίρονται σε μορφή WebP όπου το υποστηρίζει ο browser, με εναλλακτικές μορφές για παλαιότερες συσκευές. Δημιουργούνται πολλά μεγέθη κατά το ανέβασμα, ώστε οι επισκέπτες κινητού να λαμβάνουν αρχεία κατάλληλου μεγέθους χωρίς καμία χειροκίνητη ρύθμιση.
Το lazy loading εφαρμόζεται από προεπιλογή σε εικόνες κάτω από τη γραμμή σε όλες τις σελίδες που φτιάχνονται με το WEMASY. Το alt text μπορεί να προστεθεί στον editor εικόνων μέσα στην πλατφόρμα. Τα σκορ ταχύτητας σελίδας, συμπεριλαμβανομένου του LCP, φαίνονται στο dashboard στατιστικών του WEMASY, με προβλήματα που σχετίζονται με εικόνες να επισημαίνονται ανά σελίδα μαζί με συγκεκριμένες προτάσεις.
Δες τι περιλαμβάνεται στον δημιουργό ιστοσελίδων του WEMASY ή δες τις επιλογές πακέτων στη σελίδα τιμών.
Συχνές ερωτήσεις
Τι είναι η βελτιστοποίηση εικόνων για το web;
Η βελτιστοποίηση εικόνων για το web είναι η διαδικασία μείωσης του μεγέθους αρχείου μιας εικόνας ενώ διατηρείται αποδεκτή η οπτική ποιότητα για εμφάνιση σε οθόνη. Περιλαμβάνει την επιλογή της σωστής μορφής αρχείου, τη συμπίεση της εικόνας σε κατάλληλο επίπεδο ποιότητας, την αλλαγή μεγέθους στις πραγματικές διαστάσεις εμφάνισης και την εφαρμογή τεχνικών όπως το lazy loading και οι responsive εικόνες, ώστε οι επισκέπτες να κατεβάζουν μόνο την εκδοχή του αρχείου που χρειάζονται η συσκευή και η σύνδεσή τους. Με τον δημιουργό ιστοσελίδων του WEMASY, μπορείς να το στήσεις απευθείας στην ιστοσελίδα σου.
Ποια είναι η καλύτερη μορφή εικόνας για μια ιστοσελίδα;
Το WebP είναι η καλύτερη μορφή για τις περισσότερες εικόνες web. Προσφέρει σημαντικά καλύτερη συμπίεση από το JPEG σε συγκρίσιμη οπτική ποιότητα, υποστηρίζει διαφάνεια όπως το PNG και υποστηρίζεται από όλους τους μεγάλους browsers. Για εικόνες που απαιτούν διαφανές φόντο και ακρίβεια pixel, το PNG είναι η σωστή επιλογή. Το AVIF προσφέρει ακόμη καλύτερη συμπίεση από το WebP αλλά έχει πιο περιορισμένη υποστήριξη από browsers και δουλεύει καλύτερα όταν χρησιμοποιείται με αυτόματη εναλλακτική μορφή.
Πόσο μπορεί η συμπίεση εικόνων να μειώσει το μέγεθος αρχείου;
Η συμπίεση με απώλειες σε ρύθμιση ποιότητας 75 έως 85 μειώνει συνήθως το μέγεθος ενός JPEG κατά 60 έως 80 τοις εκατό χωρίς ορατή διαφορά ποιότητας για τις περισσότερες φωτογραφίες. Η μετατροπή από JPEG σε WebP στο ίδιο επίπεδο ποιότητας μειώνει το μέγεθος του αρχείου κατά επιπλέον 25 έως 35 τοις εκατό. Μια φωτογραφία που ξεκινά από 4MB μπορεί συχνά να μειωθεί κάτω από 150KB με συνδυασμό σωστής αλλαγής μεγέθους, μετατροπής μορφής και ρυθμίσεων συμπίεσης.
Επηρεάζει η βελτιστοποίηση εικόνων το SEO;
Ναι. Οι μη βελτιστοποιημένες εικόνες είναι από τις πιο συχνές αιτίες αργού σκορ Largest Contentful Paint, που είναι Core Web Vital και χρησιμοποιείται ως σήμα κατάταξης από τις μηχανές αναζήτησης. Οι σελίδες με μεγάλες μη συμπιεσμένες εικόνες συχνά βαθμολογούνται άσχημα στο LCP σε σύγκριση με σελίδες που έχουν το ίδιο περιεχόμενο σε βελτιστοποιημένη μορφή. Επιπλέον, το περιγραφικό alt text στις εικόνες συμβάλλει στην ορατότητα στην αναζήτηση εικόνων και στη συνολική προσβασιμότητα της σελίδας.
Πρέπει να χρησιμοποιείς lazy loading σε όλες τις εικόνες;
Όχι. Το lazy loading πρέπει να εφαρμόζεται μόνο σε εικόνες που εμφανίζονται κάτω από τη γραμμή, δηλαδή περιεχόμενο που δεν φαίνεται όταν ανοίγει πρώτη φορά η σελίδα. Οι εικόνες above the fold, συμπεριλαμβανομένης της κύριας εικόνας ή οποιουδήποτε προβεβλημένου οπτικού στοιχείου κοντά στην κορυφή, πρέπει να φορτώνουν αμέσως. Η εφαρμογή lazy loading σε εικόνες above the fold καθυστερεί το LCP, κάτι που χειροτερεύει τα σκορ Core Web Vitals και την εμπειρία των επισκεπτών.
Πόσο μεγάλες πρέπει να είναι οι εικόνες μιας ιστοσελίδας;
Μια τυπική εικόνα web πρέπει να είναι κάτω από 200KB. Οι κύριες εικόνες και οι εικόνες πλήρους πλάτους στον υπολογιστή μπορούν να φτάσουν τα 400KB χωρίς σημαντική επίδραση στον χρόνο φόρτωσης, αρκεί να είναι σε μορφή WebP και σωστά συμπιεσμένες. Οι εικόνες που χρησιμοποιούνται σε κάρτες, μικρογραφίες και μικρότερα πλαίσια πρέπει να έχουν μέγεθος ανάλογο με το πραγματικό πλάτος εμφάνισής τους. Το να σερβίρεις μια εικόνα 1,920 pixel σε πλαίσιο 400 pixel σπαταλά εύρος ζώνης για κάθε επισκέπτη σε κάθε συσκευή.