Γιατί οι Εικόνες του Ιστότοπού Σας Χρειάζονται Συμπίεση | Bulk Image Compressor
Αν ο ιστότοπός σας χρειάζεται περισσότερα από λίγα δευτερόλεπτα για να φορτώσει, οι άνθρωποι φεύγουν. Αυτό δεν είναι γνώμη. Η ίδια η έρευνα της Google δείχνει ότι τα ποσοστά εγκατάλειψης αυξάνονται κατά 32% όταν η φόρτωση σελίδας πάει από ένα δευτερόλεπτο σε τρία. Και οι εικόνες είναι σχεδόν πάντα ο μεγαλύτερος λόγος που οι σελίδες φορτώνουν αργά.
Οι περισσότεροι ιστότοποι εξυπηρετούν εικόνες που είναι πολύ μεγαλύτερες από όσο χρειάζεται. Μία μόνο hero εικόνα απευθείας από κάμερα ή ιστότοπο stock φωτογραφιών μπορεί εύκολα να είναι 5MB ή περισσότερο. Σε μια αξιοπρεπή ευρυζωνική σύνδεση, αυτό το αρχείο από μόνο του χρειάζεται μερικά δευτερόλεπτα για να φορτωθεί. Σε μια σύνδεση 3G κινητού, μιλάμε για περίπου 15 δευτερόλεπτα μόνο για μία εικόνα. Τώρα φανταστείτε μια σελίδα με πέντε ή έξι εικόνες σαν αυτή.
Πόσο μεγάλες είναι πραγματικά οι εικόνες σας;
Ορίστε ένας γρήγορος έλεγχος πραγματικότητας. Ανοίξτε τα εργαλεία προγραμματιστή του προγράμματος περιήγησής σας (F12), πηγαίνετε στην καρτέλα Network, φορτώστε ξανά τη σελίδα σας και φιλτράρετε με “Img.” Κοιτάξτε τα μεγέθη. Πιθανότατα θα βρείτε τουλάχιστον μερικές εικόνες πάνω από 1MB.
Για αναφορά, ορίστε πώς μοιάζουν οι τυπικές ασυμπίεστες εικόνες:
- Μια φωτογραφία DSLR που χρησιμοποιείται ως hero banner: 4 έως 8MB
- Μια φωτογραφία προϊόντος από smartphone: 2 έως 5MB
- Μια stock φωτογραφία που κατεβάστηκε σε πλήρη ανάλυση: 3 έως 10MB
- Μια infographic ή εικονογράφηση αποθηκευμένη ως PNG: 1 έως 4MB
Μετά από σωστή συμπίεση, αυτές οι ίδιες εικόνες μπορούν να είναι 100KB έως 300KB χωρίς ορατή απώλεια ποιότητας. Αυτή είναι μείωση 90% ή μεγαλύτερη στο μέγεθος αρχείου.
Ταχύτητα σελίδας και Core Web Vitals
Η Google χρησιμοποιεί τα Core Web Vitals ως σήμα κατάταξης και οι εικόνες επηρεάζουν άμεσα δύο από τις τρεις μετρήσεις.
Largest Contentful Paint (LCP) μετρά πόσο χρόνο χρειάζεται για να φορτωθεί το μεγαλύτερο ορατό στοιχείο. Στις περισσότερες σελίδες, αυτό το μεγαλύτερο στοιχείο είναι μια εικόνα. Αν η hero εικόνα σας είναι 5MB, το LCP σας θα είναι τρομερό. Η Google θεωρεί οτιδήποτε πάνω από 2,5 δευτερόλεπτα ως κακή βαθμολογία LCP. Οι συμπιεσμένες εικόνες φέρνουν συνήθως το LCP κάτω από αυτό το όριο.
Cumulative Layout Shift (CLS) μετρά την οπτική σταθερότητα. Οι εικόνες χωρίς καθορισμένες διαστάσεις προκαλούν μετατοπίσεις διάταξης καθώς φορτώνονται. Αυτό αφορά περισσότερο τα χαρακτηριστικά HTML παρά τη συμπίεση, αλλά οι υπερμεγέθεις εικόνες που φορτώνουν αργά κάνουν το πρόβλημα χειρότερο επειδή η σελίδα αποδίδει περιεχόμενο γύρω από έναν κενό χώρο που μπορεί να μην ταιριάζει με το τελικό μέγεθος εικόνας.
Μπορείτε να ελέγξετε τις τρέχουσες βαθμολογίες σας με το Google PageSpeed Insights. Εκτελέστε την αρχική σας σελίδα και μερικές εσωτερικές σελίδες. Αν η βαθμολογία απόδοσής σας είναι κάτω από 90, οι εικόνες είναι πιθανότατα μεγάλο μέρος του προβλήματος.
Η σύνδεση με το SEO
Η ταχύτητα σελίδας είναι ένα επιβεβαιωμένο σήμα κατάταξης της Google. Είναι από το 2010 για επιτραπέζιους υπολογιστές και από το 2018 για κινητά. Η εισαγωγή των Core Web Vitals το 2021 το έκανε ακόμα πιο άμεσο.
Αλλά ο αντίκτυπος υπερβαίνει το απλό σήμα ταχύτητας. Οι αργές σελίδες σαρώνονται λιγότερο συχνά από το Googlebot. Η Google κατανέμει ένα “crawl budget” σε κάθε ιστότοπο και αν οι σελίδες σας είναι αργές, το bot ξοδεύει τον προϋπολογισμό του περιμένοντας απαντήσεις αντί να ευρετηριάζει περισσότερο από το περιεχόμενό σας. Για μεγαλύτερους ιστότοπους με εκατοντάδες ή χιλιάδες σελίδες, αυτό έχει μεγάλη σημασία.
Υπάρχει επίσης ένα έμμεσο αποτέλεσμα μέσω της συμπεριφοράς χρήστη. Όταν οι άνθρωποι εγκαταλείπουν αργές σελίδες, η Google το παρατηρεί. Τα υψηλά ποσοστά εγκατάλειψης και ο χαμηλός χρόνος στη σελίδα στέλνουν αρνητικά σήματα αφοσίωσης που μπορούν να επηρεάσουν τις κατατάξεις σας με την πάροδο του χρόνου.
Εμπειρία χρήστη και ποσοστά εγκατάλειψης
Οι άνθρωποι είναι ανυπόμονοι στο διαδίκτυο. Μια μελέτη από την Portent διαπίστωσε ότι τα ποσοστά μετατροπών μειώνονται κατά μέσο όρο 4,42% για κάθε επιπλέον δευτερόλεπτο χρόνου φόρτωσης. Αν ο ιστότοπος ηλεκτρονικού εμπορίου σας χρειάζεται πέντε δευτερόλεπτα για να φορτωθεί αντί για δύο, μπορεί να χάνετε ένα σημαντικό ποσοστό πωλήσεων.
Οι χρήστες κινητών είναι ακόμα λιγότερο υπομονετικοί. Περισσότερο από το μισό της διαδικτυακής κίνησης προέρχεται από κινητές συσκευές και οι κινητές συνδέσεις είναι συνήθως πιο αργές από τις επιτραπέζιες. Οι εικόνες σας πρέπει να είναι αρκετά μικρές για να φορτώνουν γρήγορα σε ένα τηλέφωνο που χρησιμοποιεί δίκτυο κινητής τηλεφωνίας.
Υπάρχει επίσης ο παράγοντας αντίληψης. Ένας γρήγορος ιστότοπος αισθάνεται πιο επαγγελματικός και αξιόπιστος. Ένας αργός ιστότοπος αισθάνεται χαλασμένος, ακόμα κι αν όλα φορτώνουν τελικά. Οι πρώτες εντυπώσεις γίνονται σε χιλιοστά του δευτερολέπτου.
Το κόστος εύρους ζώνης προστίθεται
Αν είστε σε κοινόχρηστη φιλοξενία ή βασικό πρόγραμμα, το εύρος ζώνης μπορεί να μην είναι κάτι που σκέφτεστε. Αλλά για ιστότοπους με πραγματική κίνηση, το εύρος ζώνης κοστίζει χρήματα.
Ας κάνουμε μερικά μαθηματικά. Ας πούμε ότι η μέση σελίδα σας έχει 3MB εικόνων και έχετε 100.000 προβολές σελίδας ανά μήνα. Αυτό είναι 300GB δεδομένων εικόνας που μεταφέρονται μηνιαίως. Μετά από συμπίεση, αυτές οι ίδιες σελίδες μπορεί να έχουν 400KB εικόνων, φέρνοντας τη μεταφορά στα 40GB. Αυτή είναι μια σημαντική μείωση στο κόστος φιλοξενίας και CDN.
Για ιστότοπους υψηλής κίνησης, εταιρείες πολυμέσων ή καταστήματα ηλεκτρονικού εμπορίου με μεγάλους καταλόγους προϊόντων, αυτή η διαφορά μπορεί να εξοικονομήσει εκατοντάδες ή χιλιάδες δολάρια ανά μήνα.
Πώς να συμπιέσετε μαζικά τις εικόνες του ιστότοπού σας
Θα μπορούσατε να συμπιέσετε εικόνες μία προς μία στο Photoshop ή το GIMP, αλλά αν έχετε δεκάδες ή εκατοντάδες εικόνες, αυτό δεν είναι πρακτικό. Η μαζική συμπίεση είναι ο δρόμος.
Με το Bulk Image Compressor, μπορείτε να σύρετε όλες τις εικόνες του ιστότοπού σας ταυτόχρονα και να τις συμπιέσετε μαζί. Ορίστε μια πρακτική ροή εργασίας:
-
Εξάγετε τις τρέχουσες εικόνες σας. Αν είναι ήδη στον ιστότοπό σας, κατεβάστε τις. Αν χτίζετε έναν νέο ιστότοπο, συγκεντρώστε όλες τις εικόνες που σκοπεύετε να χρησιμοποιήσετε.
-
Επιλέξτε τη μορφή σας. Για φωτογραφίες, τα JPEG ή WebP λειτουργούν καλύτερα. Για γραφικά με διαφάνεια, χρησιμοποιήστε PNG ή WebP. Αν δεν είστε σίγουροι ποια μορφή να επιλέξετε, δείτε τον οδηγό μας για μορφές εικόνας για απόδοση ιστού.
-
Ορίστε το επίπεδο ποιότητάς σας. Για τις περισσότερες εικόνες ιστότοπου, μια ρύθμιση ποιότητας 75 έως 85% σας δίνει καλή ισορροπία μεταξύ μεγέθους αρχείου και οπτικής ποιότητας. Μπορείτε να πάτε χαμηλότερα για μικρογραφίες ή εικόνες φόντου. Για περισσότερες λεπτομέρειες σχετικά με αυτή την αντιστάθμιση, δείτε το άρθρο μας για τη μείωση μεγέθους αρχείου χωρίς απώλεια ποιότητας.
-
Συμπιέστε και κατεβάστε. Το εργαλείο επεξεργάζεται τα πάντα στο πρόγραμμα περιήγησής σας, οπότε οι εικόνες σας δεν φεύγουν ποτέ από τον υπολογιστή σας. Αντικαταστήστε τα πρωτότυπα στον διακομιστή σας με τις συμπιεσμένες εκδόσεις.
-
Ορίστε και διαστάσεις. Μην εξυπηρετείτε μια εικόνα πλάτους 4000px σε ένα πλαίσιο που είναι μόνο 800px. Αλλάξτε το μέγεθος των εικόνων σας για να ταιριάζουν με το μέγεθος προβολής τους πριν ή κατά τη διάρκεια της συμπίεσης. Αυτό από μόνο του μπορεί να μειώσει δραματικά τα μεγέθη αρχείων.
Ένα γρήγορο παράδειγμα πριν και μετά
Ορίστε πώς φαίνεται η συμπίεση στην πράξη για έναν τυπικό ιστότοπο:
| Εικόνα | Πριν | Μετά | Εξοικονόμηση |
|---|---|---|---|
| Hero banner (JPEG) | 4,2MB | 210KB | 95% |
| Φωτογραφία ομάδας (JPEG) | 3,1MB | 185KB | 94% |
| Λογότυπο (PNG) | 890KB | 95KB | 89% |
| Μικρογραφία ιστολογίου (JPEG) | 1,8MB | 120KB | 93% |
| Σύνολο | 10MB | 610KB | 94% |
Αυτή είναι η διαφορά μεταξύ μιας σελίδας που φορτώνει σε ένα δευτερόλεπτο και μιας που φορτώνει σε οκτώ.
Μην ξεχνάτε το νέο περιεχόμενο
Η συμπίεση των υπαρχουσών εικόνων σας είναι μια εφάπαξ λύση, αλλά χρειάζεστε μια διαδικασία και για το συνεχές περιεχόμενο. Κάθε φορά που εσείς ή η ομάδα σας προσθέτετε μια νέα ανάρτηση ιστολογίου, σελίδα προϊόντος ή σελίδα προορισμού, αυτές οι εικόνες πρέπει να συμπιέζονται πριν δημοσιευτούν.
Κάντε τη συμπίεση εικόνων μέρος της ροής εργασίας δημοσίευσης περιεχομένου σας. Χρειάζεται μερικά λεπτά και ο αντίκτυπος στην ταχύτητα και το SEO του ιστότοπού σας είναι πραγματικός και μετρήσιμος.
Οι εικόνες του ιστότοπού σας είναι πιθανότατα η μεγαλύτερη μεμονωμένη βελτίωση απόδοσης που μπορείτε να κάνετε. Τα εργαλεία είναι δωρεάν, η διαδικασία είναι γρήγορη και τα αποτελέσματα εμφανίζονται άμεσα στις βαθμολογίες ταχύτητας σελίδας σας.
Ready to compress your images?
Bulk compress JPEG, PNG, WebP, and AVIF images right in your browser. No uploads, no sign-ups.
Try Bulk Image Compressor