Άρθρο

Βελτιστοποιήστε τα μέσα του ιστότοπου για ταχύτητα και Core Web Vitals

Οι εικόνες και τα βίντεο αντιστοιχούν συνήθως στο 60 έως 80 τοις εκατό του συνολικού βάρους μιας ιστοσελίδας. Το να τα ρυθμίσετε σωστά είναι το πιο αποδοτικό πράγμα που μπορείτε να κάνετε για την ταχύτητα φόρτωσης, τις βαθμολογίες Core Web Vitals και την κατάταξη στις αναζητήσεις. Το καλό νέο: τίποτα από αυτά δεν απαιτεί εξειδικευμένο λογισμικό ή διακομιστή, και τα αρχεία σας δεν χρειάζεται ποτέ να φύγουν από τη συσκευή σας.

Επιλέξτε το σωστό φορμά πριν από οτιδήποτε άλλο

Η επιλογή φορμά μετράει περισσότερο από οποιοδήποτε ρυθμιστικό ποιότητας. Για φωτογραφίες σε ιστοσελίδα, το WebP είναι η σωστή προεπιλογή: είναι 25 έως 35 τοις εκατό μικρότερο από το JPEG στην ίδια οπτική ποιότητα και κάθε σύγχρονος browser το υποστηρίζει. Το AVIF συμπιέζει ακόμη περισσότερο, έως και 50 τοις εκατό καλύτερα από το JPEG, με κόστος την πιο αργή κωδικοποίηση. Χρησιμοποιήστε AVIF για εικόνες hero και φωτογραφίες προϊόντων που συμπιέζετε μία φορά, χρησιμοποιήστε WebP για οτιδήποτε επεξεργάζεστε μαζικά ή χρειάζεστε γρήγορα. Το PNG ανήκει μόνο εκεί όπου χρειάζεστε ακρίβεια χωρίς απώλειες ή διαφανές φόντο. Το SVG είναι η μόνη λογική επιλογή για λογότυπα, εικονίδια και εικονογραφήσεις: κλιμακώνεται σε κάθε μέγεθος και συχνά ζυγίζει λίγα kilobyte έναντι εκατοντάδων για ένα ραστεροποιημένο αντίστοιχο.

Συμπιέστε εικόνες χωρίς ορατή απώλεια ποιότητας

Ξεκινήστε αλλάζοντας μέγεθος στις πραγματικές διαστάσεις εμφάνισης: μια εικόνα hero που εμφανίζεται σε πλάτος 1280 pixel δεν χρειάζεται 4000 pixel δεδομένων. Αλλάξτε μέγεθος πρώτα, μετά συμπιέστε. Για φωτογραφίες, η ποιότητα 80 σε WebP ή JPEG είναι το πρακτικό κατώφλι κάτω από το οποίο οι απλοί θεατές αρχίζουν να αντιλαμβάνονται τη διαφορά, οπότε στοχεύστε στο 75 έως 85 και κοιτάξτε την έξοδο σε πλήρες ζουμ πριν τη δημοσίευση. Για γραφικά με κείμενο και επίπεδες περιοχές, το PNG χωρίς απώλειες ή το SVG διατηρεί την ευκρίνεια που τα φορμά με απώλειες θολώνουν. Ο συμπιεστής εικόνων σε αυτόν τον ιστότοπο χειρίζεται όλα αυτά τα φορμά, τρέχει εξ ολοκλήρου στον browser σας, και εφαρμόζει τους ίδιους αλγορίθμους με τα ειδικά εργαλεία υπολογιστή.

Μετατρέψτε βίντεο για το web χωρίς να το ανεβάσετε

Οι βρόχοι φόντου και το ενσωματωμένο βίντεο είναι εκεί που η βελτιστοποίηση μέσων web συχνά υπολείπεται. Ένα MP4 με H.264 παίζει παντού, αλλά ένα WebM με VP9 είναι 20 έως 40 τοις εκατό μικρότερο στην ίδια ποιότητα, κάτι που μετράει για τους χρήστες κινητών σε περιορισμένες συνδέσεις. Η πρακτική προσέγγιση είναι να μετατρέψετε μία φορά σε WebM, να το σερβίρετε ως την προτιμώμενη πηγή σε ένα στοιχείο video, και να κρατήσετε το MP4 ως εφεδρεία. Ο μετατροπέας βίντεο εδώ χρησιμοποιεί το FFmpeg μεταγλωττισμένο σε WebAssembly: η μετατροπή τρέχει μέσα στον browser σας, τίποτα δεν ανεβαίνει, και αρχεία οποιουδήποτε μεγέθους λειτουργούν αρκεί η συσκευή σας να έχει αρκετή μνήμη. Για ενσωματωμένο βίντεο φόντου, σκεφτείτε επίσης τον κόφτη βίντεο για να αφαιρέσετε τα νεκρά δευτερόλεπτα πριν την κωδικοποίηση: η διάρκεια είναι ο μεγαλύτερος παράγοντας του μεγέθους αρχείου.

Ενσωματωμένα στοιχεία: base64 και SVG

Πολύ μικρές εικόνες, εικονίδια και favicon ενσωματωμένα απευθείας σε HTML ή CSS ως συμβολοσειρές base64 εξαλείφουν μια διαδρομή δικτύου ανά στοιχείο. Αυτό βγάζει νόημα για στοιχεία κάτω από περίπου 2 KB που εμφανίζονται σε κάθε σελίδα, όπως ένα sprite λογοτύπου ή έναν δείκτη φόρτωσης. Τα μεγαλύτερα στοιχεία πρέπει να παραμένουν ξεχωριστά αρχεία, επειδή το base64 κωδικοποιεί 33 τοις εκατό βαρύτερα από το δυαδικό, και οι browser αποθηκεύουν στην cache τις αναφορές αρχείων αλλά όχι τα ενσωματωμένα δεδομένα ανεξάρτητα. Ο βελτιστοποιητής SVG αφαιρεί τα περιττά στοιχεία του επεξεργαστή από τα εξαγόμενα SVG χωρίς να αγγίζει την οπτική έξοδο. Ο μετατροπέας εικόνας σε base64 παράγει το έτοιμο προς επικόλληση data URI στον browser σας.

Εργαλεία αυτού του άρθρου

Συχνές ερωτήσεις

Επηρεάζει η συμπίεση εικόνων την κατάταξή μου στις αναζητήσεις;

Η Google χρησιμοποιεί τα Core Web Vitals ως σήμα κατάταξης, και το Largest Contentful Paint είναι σχεδόν πάντα μια εικόνα ή ένα poster βίντεο. Μια σελίδα της οποίας η εικόνα hero φορτώνει σε λιγότερο από ένα δευτερόλεπτο βαθμολογείται καλύτερα από μία όπου χρειάζεται τρία δευτερόλεπτα. Η συμπίεση και το σωστό φορμά επηρεάζουν άμεσα αυτή τη μετρική, οπότε ναι, η βελτιστοποίηση εικόνων έχει μετρήσιμο αντίκτυπο στο SEO. Η επίδραση είναι ισχυρότερη στο κινητό, όπου οι συνδέσεις είναι πιο αργές και η ποινή για βαριές εικόνες είναι μεγαλύτερη.

Γιατί να επεξεργάζομαι τα μέσα τοπικά αντί να χρησιμοποιώ μια διαδικτυακή υπηρεσία;

Τα περισσότερα διαδικτυακά εργαλεία μέσων απαιτούν το ανέβασμα των αρχείων σας σε έναν απομακρυσμένο διακομιστή, κάτι που παίρνει χρόνο, καταναλώνει εύρος ζώνης, και σημαίνει ότι ένα αντίγραφο του αρχείου σας υπάρχει σε υποδομή που δεν ελέγχετε. Τα εργαλεία αυτού του ιστότοπου τρέχουν εξ ολοκλήρου στον browser σας: οι εικόνες και τα βίντεό σας επεξεργάζονται στη συσκευή σας και η έξοδος κατεβαίνει απευθείας. Δεν υπάρχει λογαριασμός, δεν υπάρχει αναμονή για ανέβασμα, και τίποτα σχετικά με τα αρχεία σας δεν στέλνεται ποτέ σε διακομιστή.