Πώς να συμπιέσετε εικόνες για ιστότοπο

Σύμφωνα με το Web Almanac 2025 του HTTP Archive, η διάμεση αρχική σελίδα σε κινητό ζύγιζε 2,56 MB, και τα 911 KB από αυτά ήταν εικόνες. Σε υπολογιστή, η διάμεση σελίδα περιείχε 1.058 KB εικόνων. Οι εικόνες είναι επίσης αυτό που περιμένουν οι επισκέπτες: το μεγαλύτερο στοιχείο στην οθόνη κατά τη φόρτωση μιας σελίδας, το Largest Contentful Paint (LCP), ήταν εικόνα στο 76% των σελίδων σε κινητά.

Οι ελαφρύτερες εικόνες φορτώνουν νωρίτερα σε αργές συνδέσεις, καταναλώνουν λιγότερα δεδομένα κινητής από τους επισκέπτες σας και σας κοστίζουν λιγότερο εύρος ζώνης. Το LCP είναι ένα από τα Core Web Vitals της Google, τις μετρήσεις με τις οποίες η Google αξιολογεί την εμπειρία σελίδας, οπότε οι βαριές εικόνες μπορεί να κοστίσουν περισσότερα από λίγα δευτερόλεπτα υπομονής.

Η συμπίεση δεν μπορεί να σώσει μια εικόνα που είναι πολύ μεγαλύτερη από τον χώρο που καταλαμβάνει. Μια φωτογραφία κάμερας πλάτους 4000 pixel, που εμφανίζεται σε στήλη 800 pixel, έχει 25 φορές περισσότερα pixel από όσα μπορεί να αξιοποιήσει η σελίδα. Το web.dev επισημαίνει ότι, αν στέλνετε σε κινητά εικόνες σε μέγεθος για υπολογιστή, μπορεί να καταναλώνονται 2–4 φορές περισσότερα δεδομένα από όσα χρειάζονται.

• Banner πλήρους πλάτους: για τις περισσότερες διατάξεις αρκεί πλάτος περίπου 1600–2000 pixel.
• Εικόνες σε στήλη άρθρου: περίπου το διπλάσιο του πλάτους της στήλης, ώστε να μένουν ευκρινείς σε οθόνες υψηλής πυκνότητας (για παράδειγμα, 1400 pixel για στήλη 700 pixel).
• Μικρογραφίες και εικόνες προφίλ: το διπλάσιο του μεγέθους στο οποίο εμφανίζονται, συχνά 200–400 pixel.

Η μορφή καθορίζει πόσο αποδοτικά μπορεί να αποθηκευτεί μια εικόνα. Με λίγα λόγια: στις φωτογραφίες ταιριάζει το JPG ή το WebP· στα λογότυπα, στα στιγμιότυπα οθόνης και σε ό,τι έχει διαφάνεια ταιριάζει το PNG ή το WebP. Η σύγκριση JPG, PNG και WebP εξηγεί πότε υπερέχει η καθεμία.

Περίπου το 97% των προγραμμάτων περιήγησης που χρησιμοποιούνται σήμερα εμφανίζει εικόνες WebP, και η μορφή αυτή είναι συχνά αισθητά μικρότερη. Για να τη δοκιμάσετε, χρησιμοποιήστε τη Μετατροπή JPG σε WebP ή τη Μετατροπή PNG σε WebP και συγκρίνετε το αποτέλεσμα με το πρωτότυπο: ένα αρχείο που μετατράπηκε δεν είναι πάντα μικρότερο, ειδικά στα απλά γραφικά.

Η συμπίεση αφαιρεί δεδομένα που το μάτι δύσκολα θα αντιληφθεί ότι λείπουν. Στο εργαλείο συμπίεσης εικόνων του Bitinz μπορείτε να αφήσετε μια παρτίδα αρχείων JPG, PNG ή WebP και να επιλέξετε ένα από τρία επίπεδα:

• Γρήγορο: πρώτα η ταχύτητα, για μεγάλες παρτίδες.
• Ισορροπημένο: η προεπιλογή και καλή επιλογή για τις περισσότερες εικόνες ιστότοπων.
• Μέγιστο: θέλει λίγο περισσότερο χρόνο για μικρότερα αρχεία· αξίζει για εικόνες που εμφανίζονται σε κάθε σελίδα, όπως banner και φόντα.

Όταν διατηρείτε τη μορφή, το Bitinz δεν σας επιστρέφει ποτέ αρχείο μεγαλύτερο από αυτό που μεταφορτώσατε. Συγκρίνετε το αποτέλεσμα με το πρωτότυπο σε πλήρες μέγεθος, ειδικά στις εικόνες με μικρό κείμενο ή ομαλές διαβαθμίσεις χρωμάτων, και μετά κατεβάστε όσες σας ικανοποιούν.

Ακόμη και μια καλά συμπιεσμένη εικόνα μπορεί να καθυστερήσει μια σελίδα αν φορτώνει τη λάθος στιγμή ή σε λάθος μέγεθος. Μερικά χαρακτηριστικά (attributes) της HTML κάνουν το μεγαλύτερο μέρος της δουλειάς:

• Ορίστε width και height σε κάθε εικόνα, ώστε το πρόγραμμα περιήγησης να κρατά τον χώρο της και η διάταξη να μη μετακινείται όσο φορτώνει.
• Προσθέστε loading="lazy" στις εικόνες που βρίσκονται πιο κάτω στη σελίδα, ώστε να φορτώνουν μόνο όταν ο επισκέπτης κάνει κύλιση κοντά τους.
• Μην εφαρμόζετε ποτέ καθυστερημένη φόρτωση (lazy loading) στην κύρια εικόνα στο πάνω μέρος της σελίδας. Για αυτή την εικόνα, το web.dev συνιστά αντίθετα fetchpriority="high", σε μία ή δύο εικόνες το πολύ.
• Χρησιμοποιήστε srcset και sizes για να προσφέρετε την ίδια εικόνα σε μερικά διαφορετικά πλάτη, ώστε τα κινητά να κατεβάζουν μικρότερο αρχείο από τις μεγάλες οθόνες.
• Παρέχετε τις εικόνες με μεγάλη διάρκεια προσωρινής αποθήκευσης (cache), μέσω CDN αν διαθέτετε, ώστε οι επισκέπτες που επιστρέφουν να μην τις κατεβάζουν ξανά.

Ελέγξτε τη σελίδα με το PageSpeed Insights ή με τον πίνακα Lighthouse στο Chrome. Από το Lighthouse 13, οι έλεγχοι εικόνων συγκεντρώνονται σε μία ενιαία ενότητα, την «Improve image delivery», που απαριθμεί τις εικόνες που θα μπορούσαν να συμπιεστούν περισσότερο, να παρέχονται σε σύγχρονη μορφή ή να γίνουν μικρότερες. Οι εικόνες που θα εξοικονομούσαν λιγότερα από 4 KiB δεν εμφανίζονται, οπότε μια σύντομη λίστα είναι καλό σημάδι.

Έπειτα δείτε τη σελίδα και μόνοι σας σε ένα κινητό. Τα έντονα περιγράμματα, το κείμενο μέσα σε εικόνες και οι αποχρώσεις του δέρματος είναι τα σημεία όπου τα προβλήματα συμπίεσης φαίνονται πρώτα.

Αν ο ιστότοπός σας προσθέτει εικόνες κάθε μέρα, για παράδειγμα μέσω ενός συστήματος διαχείρισης περιεχομένου ή ενός ηλεκτρονικού καταστήματος, συμπιέστε τις κατά τη μεταφόρτωση ή τη δημοσίευση αντί να το κάνετε με το χέρι. Το API για προγραμματιστές του Bitinz δέχεται μια εικόνα μέσω HTTP και επιστρέφει σύνδεσμο προς το συμπιεσμένο αρχείο, οπότε μπορεί να εκτελείται από ένα script ή μια διαδικασία build. Κάθε λογαριασμός έχει δωρεάν μηνιαίο όριο.

1. 01Αλλάξτε το μέγεθος κάθε εικόνας σε περίπου το διπλάσιο του μεγέθους στο οποίο εμφανίζεται.
2. 02Χρησιμοποιήστε JPG ή WebP για φωτογραφίες και PNG ή WebP για γραφικά και διαφάνεια.
3. 03Συμπιέστε στο επίπεδο Ισορροπημένο και δοκιμάστε το Μέγιστο για τις μεγαλύτερες εικόνες.
4. 04Συγκρίνετε το αποτέλεσμα με το πρωτότυπο πριν το αντικαταστήσετε.
5. 05Ορίστε width και height, εφαρμόστε καθυστερημένη φόρτωση στις εικόνες που δεν φαίνονται στην πρώτη οθόνη και ποτέ στην κύρια εικόνα.
6. 06Ελέγξτε ξανά τη σελίδα στο PageSpeed Insights.

Μεταφορτώνετε εικόνες κάπου αλλού εκτός από τον δικό σας ιστότοπο; Κάθε πλατφόρμα έχει τους δικούς της κανόνες: δείτε τις απαιτήσεις μεγέθους εικόνων για email και ηλεκτρονικά καταστήματα.