Ένας μετρητής που δεν χαλάει τη διάταξη

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

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

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

Δύο αριθμοί στην ετικέτα κρατούν τον χώρο

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

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

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

Τι εμφανίζεται όταν η εικόνα δεν εμφανίζεται

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

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

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

Φορτώνεται τελευταίος, σκόπιμα

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

Η ρύθμιση του χαρακτηριστικού loading στην τιμή lazy λέει στο πρόγραμμα περιήγησης να καθυστερήσει τη λήψη του αρχείου μέχρι ο αναγνώστης να κυλήσει πράγματι κοντά στη θέση του. Η ρύθμιση του χαρακτηριστικού decoding στην τιμή async επιτρέπει στο πρόγραμμα περιήγησης να επεξεργαστεί το κύριο κείμενο και τη διάταξη χωρίς να περιμένει να ερμηνευθούν πλήρως τα δεδομένα της εικόνας.

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