Εικόνες και ταχύτητα σελίδας: μορφές, μεγέθη, lazy loading

Γιατί οι εικόνες κρίνουν τον χρόνο φόρτωσης

Η Google γράφει ότι οι εικόνες είναι συχνά ο μεγαλύτερος παράγοντας του συνολικού μεγέθους μιας σελίδας, κάτι που μπορεί να κάνει τις σελίδες αργές και ακριβές στη φόρτωση. Δύο από τα Core Web Vitals εξαρτώνται άμεσα από τις εικόνες. Το Largest Contentful Paint (LCP) μετρά τη φόρτωση: η Google συνιστά το μεγαλύτερο στοιχείο να εμφανίζεται μέσα στα πρώτα 2,5 δευτερόλεπτα αφότου η σελίδα αρχίσει να φορτώνει. Σε πολλές σελίδες αυτό το στοιχείο είναι μια εικόνα, για παράδειγμα μια μεγάλη φωτογραφία στην κορυφή. Το Cumulative Layout Shift (CLS) μετρά την οπτική σταθερότητα και πρέπει να μένει κάτω από 0,1. Εικόνες που φτάνουν χωρίς δεσμευμένο χώρο σπρώχνουν το κείμενο προς τα κάτω και ανεβάζουν αυτή την τιμή.

Η σωστή μορφή

• Φωτογραφίες: το JPEG λειτουργεί παντού. Τα WebP και AVIF είναι συχνά αισθητά μικρότερα σε παρόμοια ποιότητα.
• Γραφικά με αιχμηρές ακμές ή διαφάνεια: PNG, ή WebP και AVIF, που μπορούν επίσης να είναι διαφανή.
• Λογότυπα και εικονίδια: SVG, γιατί μένει ευκρινές σε κάθε μέγεθος και είναι συνήθως πολύ μικρό.
• Η Αναζήτηση Google υποστηρίζει εικόνες στο χαρακτηριστικό src στις μορφές BMP, GIF, JPEG, PNG, WebP, SVG και AVIF.

Αν προσφέρεις WebP ή AVIF, μπορείς να κρατήσεις ένα JPEG ως εφεδρικό σε ένα στοιχείο picture. Ο browser διαλέγει την πρώτη πηγή που καταλαβαίνει.

Το σωστό μέγεθος

Μια εικόνα πλάτους 2400 pixel που εμφανίζεται στα 600 pixel σπαταλά τα περισσότερα από τα bytes της. Εξάγαγε τις εικόνες περίπου στο πλάτος στο οποίο εμφανίζονται, και για ευκρινείς οθόνες περίπου στο διπλάσιο. Έπειτα συμπίεσέ τες. Σε πολλά προγράμματα εικόνας, μια ρύθμιση ποιότητας γύρω από τη μέση της κλίμακας αρκεί για φωτογραφίες στο web. Έλεγξε το αποτέλεσμα σε πλήρες μέγεθος πριν αντικαταστήσεις το πρωτότυπο.

srcset και sizes

Ένα αρχείο δεν ταιριάζει ποτέ σε κάθε οθόνη. Με το srcset προσφέρεις πολλά αρχεία της ίδιας εικόνας και δηλώνεις το πλάτος καθενός. Με το sizes λες στον browser πόσο πλατιά θα εμφανιστεί η εικόνα. Ο browser διαλέγει τότε το μικρότερο αρχείο που είναι αρκετά ευκρινές.

<img src="/img/sofa-800.jpg"
     srcset="/img/sofa-400.jpg 400w, /img/sofa-800.jpg 800w, /img/sofa-1600.jpg 1600w"
     sizes="(max-width: 700px) 100vw, 700px"
     width="800" height="533"
     alt="…">

Σε αυτό το παράδειγμα, η εικόνα γεμίζει την οθόνη σε στενές οθόνες και έχει πλάτος 700 pixel σε πιο φαρδιές. Η Google συνιστά να κρατάς πάντα ένα εφεδρικό αρχείο στο χαρακτηριστικό src. Γράψε ένα πραγματικό εναλλακτικό κείμενο στη θέση των τριών τελειών.

Width και height κατά των μετατοπίσεων διάταξης

Χωρίς width και height, ο browser δεν ξέρει πόσο χώρο χρειάζεται μια εικόνα ώσπου να φτάσει το αρχείο. Το κείμενο από κάτω τότε πηδά προς τα κάτω. Ο οδηγός του web.dev για τις μετατοπίσεις διάταξης συνιστά: να βάζεις πάντα χαρακτηριστικά width και height σε εικόνες και στοιχεία βίντεο, με το μέγεθος του αρχείου σε pixel ή τουλάχιστον τη σωστή αναλογία διαστάσεων. Οι σύγχρονοι browsers ορίζουν από αυτές τις τιμές την προεπιλεγμένη αναλογία διαστάσεων μιας εικόνας και δεσμεύουν τον χώρο. Στο CSS, τα width: 100% και height: auto κρατούν την εικόνα ευέλικτη. Αν δεν μπορείς να ορίσεις τα χαρακτηριστικά, ο οδηγός αναφέρει την ιδιότητα CSS aspect-ratio ως εναλλακτική.

Lazy loading

Με το loading="lazy" ο browser φορτώνει μια εικόνα μόνο όταν πλησιάζει την ορατή περιοχή. Αυτό εξοικονομεί δεδομένα για εικόνες πιο κάτω στη σελίδα. Η Google λέει για το lazy loading: μην το προσθέτεις σε περιεχόμενο που είναι πιθανό να είναι αμέσως ορατό όταν ένας χρήστης ανοίγει μια σελίδα. Το ενσωματωμένο lazy loading του browser είναι διαθέσιμο για εικόνες και iframes.

Η εικόνα LCP

Η μεγαλύτερη εικόνα στην κορυφή, συχνά μια εικόνα hero ή η κύρια φωτογραφία προϊόντος, είναι το σημαντικότερο αρχείο της σελίδας. Ο οδηγός του web.dev για το LCP λέει: μη φορτώνεις ποτέ με lazy loading την εικόνα LCP σου. Το fetchpriority="high" είναι μια υπόδειξη προς τον browser να τη φορτώσει νωρίς. Σύμφωνα με τον οδηγό, υψηλή προτεραιότητα σε περισσότερες από μία ή δύο εικόνες δεν βοηθά πια. Εικόνες των οποίων τη διεύθυνση μια βιβλιοθήκη script κρύβει στο data-src, ή που είναι μόνο φόντο CSS, ο browser τις βρίσκει αργά. Για μια εικόνα φόντου, ο οδηγός αναφέρει ένα preload με link rel="preload" στην HTML. Το AVIF ή το WebP και ένα μικρότερο αρχείο μειώνουν επίσης τον χρόνο φόρτωσης.

Για να δεις πώς αποδίδουν οι σελίδες σου, η Google παραπέμπει στην αναφορά Core Web Vitals στο Search Console. Για μια μεμονωμένη σελίδα, τα εργαλεία απόδοσης του browser σου δείχνουν ποιο στοιχείο είναι το στοιχείο LCP και ποια στοιχεία μετατοπίζουν τη διάταξη. Μέτρησε πριν και μετά από μια αλλαγή, ώστε να ξέρεις αν βοήθησε.

Μια σύντομη λίστα ελέγχου

• Φορτώνει η μεγαλύτερη εικόνα στην κορυφή κανονικά, όχι με lazy loading;
• Έχει κάθε img width και height, ή δεσμευμένο χώρο με aspect-ratio;
• Είναι κάθε αρχείο περίπου τόσο πλατύ όσο εμφανίζεται, και συμπιεσμένο;
• Έρχονται οι μεγάλες φωτογραφίες σε πολλά πλάτη με srcset και sizes;
• Υπάρχουν αρχεία JPEG ή PNG που θα μπορούσαν να είναι WebP ή AVIF;

Δούλεψε με το Do4U

Ο Έλεγχος εικόνων διαβάζει μία σελίδα και κάθε εικόνα της. Για κάθε αρχείο αναφέρει τη μορφή, το μέγεθος αρχείου και τα pixel, και από την HTML τα width και height, loading, fetchpriority, srcset και sizes, τις πηγές picture και τις εικόνες φόντου σε χαρακτηριστικά style. Το Do4U μαντεύει την πιθανή εικόνα LCP από την HTML. Δεν τη μετρά, γιατί το πραγματικό στοιχείο LCP το αποφασίζει ο browser. Παίρνεις έναν πίνακα των εικόνων με τα ευρήματα, το συνολικό βάρος και μια σύντομη περίληψη. Εικόνες που εισάγει η JavaScript και εικόνες φόντου από εξωτερικά αρχεία CSS δεν περιλαμβάνονται. Δεν χρησιμοποιείται ΤΝ, και ο έλεγχος είναι δωρεάν, με ημερήσιο όριο.

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