Γιατί η βελτιστοποίηση εικόνων βελτιώνει έναν ιστότοπο
Οι εικόνες συνήθως αντιπροσωπεύουν ένα σημαντικό μέρος των δεδομένων που κατεβάζει μια σελίδα. Ένα μεγάλο αρχείο καθυστερεί την εμφάνιση του περιεχομένου, καταναλώνει περισσότερα κινητά δεδομένα και μπορεί να επιδεινώσει την εμπειρία του επισκέπτη. Η βελτιστοποίηση συνδυάζει τρεις αποφάσεις: διαστάσεις, μορφή και επίπεδο συμπίεσης.
Δεν υπάρχει τέλειο όριο για όλες τις εικόνες. Μια μικρογραφία πρέπει να ζυγίζει πολύ λιγότερο από μια φωτογραφία που καταλαμβάνει ολόκληρη την οθόνη. Ο στόχος είναι να παραδοθούν αρκετά pixels και ποιότητα για τον πραγματικό χώρο, χωρίς να αναγκάζεται ο φυλλομετρητής να κατεβάσει πληροφορίες που δεν θα χρησιμοποιήσει.
Συνιστώμενη ροή βήμα προς βήμα
- Προσδιορίζει το μέγιστο πλάτος στο οποίο θα εμφανίζεται η εικόνα στο σχέδιο.
- Κόψε το πλαίσιο πριν τη συμπίεση για να μην διατηρηθούν περιοχές που θα αφαιρεθούν.
- Επιλέξτε τη μορφή ανάλογα με το περιεχόμενο και την ανάγκη για διαφάνεια.
- Ανοίξτε το αρχείο στο Συμπιεστής εικόνας και δοκιμάζει μεσαία-υψηλή ποιότητα.
- Συγκρίνετε το βάρος και εξετάστε το κείμενο, τα περιγράμματα, τις όψεις και τα ντεγκραντέ.
- Δημοσιεύστε το αποτέλεσμα και ελέγξτε τη σελίδα σε κινητά και επιτραπέζιους υπολογιστές.
Διαστάσεις: Αποφύγετε τη μεταφόρτωση περισσότερων pixel από όσα χρειάζεται
Εάν μια κάρτα εμφανίζει μια εικόνα με πλάτος 600 pixels, το να φορτώσετε μια φωτογραφία 5000 pixels είναι συνήθως σπατάλη. Ο φυλλομετρητής θα την μειώσει οπτικά, αλλά πρώτα θα πρέπει να έχει κατεβάσει ολόκληρο το αρχείο. Ετοιμάστε μια έκδοση κοντά στο μέγιστο μέγεθος που απαιτείται από το σχεδιασμό.
Για οθόνες υψηλής πυκνότητας μπορεί να είναι χρήσιμο να παρέχετε μια έκδοση περίπου διπλάσια, αλλά ιδανικά ο ιστότοπος θα πρέπει να χρησιμοποιεί εικόνες με απόκριση με SRCSET y μεγέθη. Με αυτόν τον τρόπο κάθε συσκευή κατεβάζει μια κατάλληλη παραλλαγή αντί για το ίδιο γιγαντιαίο αρχείο.
Ποια μορφή να επιλέξετε
- JPG: καλή συμβατότητα και λογικό μέγεθος για φωτογραφίες χωρίς διαφάνεια.
- WebP: χρήσιμο για φωτογραφίες και γραφικά ιστού. Μπορεί να διατηρήσει τη διαφάνεια και να προσφέρει συμπαγή αρχεία.
- PNG: κατάλληλο για διαφάνεια, λήψεις με καθαρό κείμενο και απλά γραφικά· μπορεί να είναι βαρύ για φωτογραφίες.
- SVG: Ιδανικό για λογότυπα και διανυσματικά εικονίδια όταν το αρχείο είναι ασφαλές και το σχέδιο δημιουργήθηκε ως διάνυσμα.
Η μετατροπή της μορφής δεν εγγυάται ένα δευτερεύον αρχείο. Πάντα να συγκρίνετε το αποτέλεσμα και να διατηρείτε την αρχική μορφή όταν είναι ήδη η πιο αποτελεσματική επιλογή. Δείτε το Σύγκριση μεταξύ JPG, PNG και WebP αν δεν ξέρετε ποιο να επιλέξετε.
Πώς να επιλέξετε ποιότητα συμπίεσης
Ξεκινήστε με μια εφαρμογή που δίνει προτεραιότητα στην εμφάνιση και προχωρήστε προς τα κάτω. Οι φωτογραφίες ανέχονται τη συμπίεση καλύτερα από τις λήψεις διεπαφής, τα διαγράμματα και το μικρό κείμενο. Αν δείτε φωτοστέφανα, μπλοκ ή θολά άκρα, αυξήστε την ποιότητα ή δοκιμάστε μια άλλη μορφή.
Αξιολογήστε το αρχείο μέσα στη σελίδα, όχι μόνο σε προβολή με μεγέθυνση. Μια μικρή διαφορά που είναι 300% ορατή μπορεί να μην είναι αισθητή σε κανονικό μέγεθος. Από την άλλη πλευρά, ένα δυσανάγνωστο γράμμα σε μια κάρτα είναι ένα πραγματικό πρόβλημα.
Η συμπίεση δεν υποκαθιστά μια καλή εφαρμογή Το
Εκτός από τη βελτιστοποίηση του αρχείου, διατηρεί το χώρο με χαρακτηριστικά πλάτος y ύψος για να αποτρέψετε τις παραλείψεις περιεχομένου. Χρησιμοποιήστε αργή φόρτωση σε εικόνες που βρίσκονται έξω από το πρώτο ορατό μπλοκ, αλλά μην καθυστερείτε την κύρια εικόνα εάν είναι απαραίτητο να κατανοήσετε τη σελίδα. Το
Είναι επίσης καλή ιδέα να ορίσετε μια μεγάλη κρυφή μνήμη για αρχεία με όνομα έκδοσης και να αποφύγετε τη φόρτωση της ίδιας εικόνας σε πολλαπλές αναλύσεις χρησιμοποιώντας CSS. Αυτές οι αποφάσεις απαιτούν αλλαγές τοποθεσίας, αλλά συμπληρώνουν την εξοικονόμηση που επιτυγχάνεται κατά τη συμπίεση.
Κοινά λάθη
Συμπιέστε πριν αποφασίσετε για το μέγεθος
Η αλλαγή μεγέθους μετά από αυτό σας αναγκάζει να επεξεργαστείτε το αρχείο δύο φορές και μπορεί να συσσωρεύσει απώλεια. Αποφασίστε πρώτα για το πλαίσιο και τις διαστάσεις. συμπίεση στο τέλος.
Μετατροπή στιγμιότυπων οθόνης σε JPG με χαμηλή ποιότητα
Τα λεπτά γράμματα και οι γραμμές μπορούν να δημιουργήσουν μουτζούρες. Δοκιμάστε το PNG ή το WebP σε υψηλότερη ποιότητα και συγκρίνετε το βάρος.
Χρησιμοποιήστε μια μικρή εικόνα ως κεφαλίδα Το
Η μεγέθυνσή του δεν ανακτά λεπτομέρειες. Ξεκινά από μια αρκετά μεγάλη γραμματοσειρά και δημιουργεί μικρότερες παραλλαγές από αυτήν την έκδοση.
Συχνές Ερωτήσεις
Πόσο πρέπει να ζυγίζει μια εικόνα ιστού;
Εξαρτάται από το μέγεθος, τη σημασία και την πολυπλοκότητά του. Χρησιμοποιήστε ως κριτήριο το χαμηλότερο βάρος που διατηρεί μια αποδεκτή ποιότητα στο τελικό του μέγεθος, αντί να κυνηγάτε μια καθολική φιγούρα.
Πρέπει να μετατρέψω όλες τις εικόνες σε WebP;
Οχι απαραίτητα. Το WebP είναι χρήσιμο, αλλά ένα απλό PNG ή ένα ήδη βελτιστοποιημένο αρχείο ενδέχεται να μην βελτιωθεί. Μετατρέψτε ένα δείγμα, μετρήστε και διατηρήστε τα πρωτότυπα.
Η συμπίεση εικόνων από μόνη της βελτιώνει την τοποθέτηση;
Βοηθά στην εμπειρία και την απόδοση, αλλά η κατάταξη εξαρτάται επίσης από χρήσιμο περιεχόμενο, ανίχνευση, συνδέσμους, πρόθεση αναζήτησης και πολλά άλλα σήματα. Η συμπίεση είναι μέρος ενός καλά προετοιμασμένου ιστότοπου.
Προετοιμάστε μια πιο ανοιχτόχρωμη εικόνα
Προσαρμόστε την ποιότητα ή ορίστε ένα μέγεθος στόχου, συγκρίνετε το αποτέλεσμα και κατεβάστε την έκδοση που ταιριάζει καλύτερα στη σελίδα σας.
Συμπίεση εικόνας για web