Ένας οδηγός για αρχάριους για αποκριτικές εικόνες σε HTML

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

Αυτό το άρθρο διερευνά πώς μπορείτε να δημιουργήσετε αποκριτικές εικόνες σε HTML χρησιμοποιώντας srcset και το στοιχείο της εικόνας.

Γιατί πρέπει να χρησιμοποιείτε αποκριτικές εικόνες;

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

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

Πώς να δημιουργήσετε αποκριτικές εικόνες σε HTML

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

Σχετιζομαι με: Πώς να κάνετε τον ιστότοπό σας αποκριτικό και διαδραστικό με CSS και JavaScript

Χρησιμοποιώντας το srcset

Το πρότυπο Η HTML σάς επιτρέπει να καθορίσετε μόνο ένα αρχείο εικόνας. Εάν θέλετε να εμφανίσετε διαφορετική εικόνα ανάλογα με το μέγεθος της συσκευής, τότε θα πρέπει να χρησιμοποιήσετε srcset.

Σύνταξη:

srcset σας επιτρέπει να παρέχετε πρόσθετα αρχεία πηγής και το πρόγραμμα περιήγησης θα επιλέξει την εικόνα που φαίνεται βέλτιστη για αυτό το μέγεθος εικόνας.

 src="cute-cat.jpg"
 alt="Μια χαριτωμένη γάτα">

srcset αποτελείται από τρία μέρη: Το όνομα αρχείου εικόνας που καθορίζει τη διαδρομή προς την εικόνα προέλευσης, ένα διάστημα και το εγγενές ή πραγματικό πλάτος της εικόνας.

Χρήση του srcset Με μεγέθη

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

Τώρα μπορείτε να ξαναγράψετε το ετικέτα παραπάνω ως εξής.

sizes="(max-width: 600px) 480px,
 800 px"
 src="cute-cat.jpg"
 alt="Μια χαριτωμένη γάτα">

μεγέθη αποτελείται από μια συνθήκη μέσων, σε αυτό το παράδειγμα είναι (μέγιστο πλάτος: 600 px) που αντιπροσωπεύει τη θύρα προβολής το πλάτος, το διάστημα και το πλάτος της υποδοχής (480 px) που καθορίζουν τον χώρο που θα γεμίσει η εικόνα εάν η συνθήκη του μέσου είναι αληθής.

Σχετιζομαι με: Πώς να χρησιμοποιήσετε τα ερωτήματα πολυμέσων σε HTML και CSS για να δημιουργήσετε ανταποκρινόμενους ιστότοπους

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

Σημειώστε ότι συμπεριλαμβάνετε και εσείς src που παρέχει την εικόνα να εμφανίζεται σε προγράμματα περιήγησης που δεν υποστηρίζουν srcset και μεγέθη.

srcset σας επιτρέπει επίσης να προβάλλετε εικόνες σε διαφορετικές αναλύσεις χρησιμοποιώντας x-descriptors.

 src="cute-cat-low.jpg"
 alt="Μια χαριτωμένη γάτα">

Σε αυτό το παράδειγμα, εάν η συσκευή έχει ανάλυση δύο εικονοστοιχείων συσκευής ανά CSS ή περισσότερα, το πρόγραμμα περιήγησης θα φορτώσει την εικόνα cute-cat-high1.jpg.

Pixel υλικού και λογισμικού

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

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

 src="cute-cat-low.jpg"
 alt="Μια χαριτωμένη γάτα">

Χρησιμοποιώντας

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

Σύνταξη:

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

Όπως στην πρώτη προσέγγιση, περιέχει ένα χαρακτηριστικό μέσου που μπορείτε να χρησιμοποιήσετε για να παρέχετε τη συνθήκη μέσου. Για παράδειγμα, το πρόγραμμα περιήγησης θα εμφανίσει το "cute-cat-480w.jpg" εάν το πλάτος της θύρας προβολής είναι 639 px ή λιγότερο. ο srcset κρατά τη διαδρομή αρχείου εικόνας που θέλετε να εμφανίσετε και src καθορίζει την προεπιλεγμένη εικόνα.

Σχετιζομαι με: 7 νέες δυνατότητες CSS για να δημιουργήσετε έναν ανταποκρινόμενο ιστότοπο

Εναλλακτικό για τη μορφή εικόνας WebP

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

Γιατί να δημιουργήσετε αποκριτικές εικόνες σε HTML και όχι σε CSS;

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

Επιδιώξτε την καλύτερη δυνατή ποιότητα εικόνας

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

Αρχές Responsive Web Design

Οι σχεδιαστές ιστοσελίδων υπερασπίζονται το responsive design εδώ και χρόνια, αλλά τι είναι αυτό και πώς μπορεί να δημιουργήσει ανώτερες ιστοσελίδες;

Διαβάστε Επόμενο

Σχετικά με τον Συγγραφέα