Εικόνες

Ο έλεγχος εικόνων εξετάζει όλες τις εικόνες σε μια ιστοσελίδα για να εξακριβώσει εάν αυτές συνδέονται σύμφωνα με τις τελευταίες βέλτιστες πρακτικές. Εμείς επίσης ελέγχουμε εάν οι εικόνες έχουν την κατάλληλη μορφή ιστού.

Γιατί το ελέγχουμε αυτό;

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

Είναι σημαντικό να περιλαμβάνετε τις ιδιότητες πλάτους και ύψους σε κάθε ετικέτα εικόνας. Η σήμανση είναι έγκυρη χωρίς τις ιδιότητες ύψους και πλάτους, αλλά είναι καλύτερη πρακτική να τις συμπεριλάβετε. Χωρίς αυτές τις ιδιότητες, το πρόγραμμα περιήγησης του επισκέπτη δεν γνωρίζει πόσο χώρο να αφήσει για την εικόνα μέχρι να την κατεβάσει. Αυτό σημαίνει ότι μόλις ολοκληρωθεί η φόρτωση της εικόνας, η σελίδα θα πρέπει να αναπαραχθεί εκ νέου από το πρόγραμμα περιήγησης του επισκέπτη, το οποίο αυξάνει το χρόνο φόρτωσης της σελίδας και μπορεί να προκαλέσει τη μεταπήδηση στοιχείων στη σελίδα, ειδικά εάν ο χρήστης έχει αργή σύνδεση στο διαδίκτυο. Είναι επίσης σημαντικό να μην παραμορφώσετε την εικόνα χρησιμοποιώντας αυτές τις ιδιότητες, θα πρέπει να είναι ίδιες με τις πραγματικές διαστάσεις της εικόνας. Αυτό αυξάνει επίσης το χρόνο φόρτωσης της σελίδας.

Πως το ελέγχουμε αυτό;

Εμείς κατεβάσαμε όλες τις εικόνες σε μια ιστοσελίδα και χαμηλώσαμε τη βαθμολογία για διάφορα κριτήρια:

• Is it a non web-friendly format? Only webp, avif, jpeg, png, svg and gif images are allowed.
• Λείπουν οι ιδιότητες πλάτους και ύψους; Αυτό συμβαίνει όταν παραλείψετε τις ιδιότητες πλάτους και ύψους σε μια εικόνα.
• Παραμορφώνεται στο πρόγραμμα περιήγησης; Αυτό συμβαίνει όταν η εικόνα προέλευσης έχει διαφορετικό μέγεθος σε σχέση με τις καθορισμένες ιδιότητες πλάτους και ύψους στο κώδικα HTML. Εάν θέλετε να παραμορφώσετε μια εικόνα στο πρόγραμμα περιήγησης θα πρέπει να χρησιμοποιήσετε CSS, καθώς η ετικέτα περιγράφει την εικόνα προέλευσης, όχι το πως θα πρέπει να εμφανίζεται.

Τι μπορώ να κάνω για αυτό;

Βεβαιωθείτε ότι όλες οι εικόνες που χρησιμοποιείτε είναι μορφή φιλική προς το διαδίκτυο, όπως jpeg, gif ή png. Εσείς θα πρέπει επίσης να περιλαμβάνετε τις ιδιότητες πλάτους και ύψους σε όλες τις εικόνες, και αυτές θα πρέπει να είναι οι πραγματικές διαστάσεις της εικόνας προέλευσης. Αν χρειαστείτε να παραμορφώσετε την εικόνα στο πρόγραμμα περιήγησης, χρησιμοποιήστε CSS. Η ετικέτα εικόνας στο κώδικα HTML ορίζει την εικόνα προέλευσης, και το CSS ορίζει πώς αυτή θα πρέπει να παρουσιαστεί.