Μια αποκριτική εικόνα είναι μια εικόνα που προσαρμόζεται στα διαφορετικά χαρακτηριστικά της συσκευής που την εμφανίζει. Όταν γίνονται σωστά, οι αποκριτικές εικόνες μπορούν να βελτιώσουν την απόδοση του ιστότοπου και να διαφοροποιήσουν την εμπειρία χρήστη σας.
Αυτό το άρθρο διερευνά πώς μπορείτε να δημιουργήσετε αποκριτικές εικόνες HTML χρησιμοποιώντας srcset και στοιχείο ΕικόναΕ Επαληθεύω Code on the Go: Καλύτερες εφαρμογές επεξεργασίας HTML για Android.
Γρήγοροι σύνδεσμοι
Γιατί πρέπει να χρησιμοποιείτε εικόνες που ανταποκρίνονται;
Όταν ένας μηχανικός λογισμικού δημιουργούσε ιστοσελίδες, δεν σκεφτόταν πώς τα προγράμματα περιήγησης χειρίζονται εικόνες που αποκρίνονται. Εξάλλου, οι χρήστες συχνά είχαν πρόσβαση στον Ιστό μόνο από επιτραπέζιους ή φορητούς υπολογιστές. Αυτό βέβαια δεν ισχύει σήμερα.
σύμφωνα με Statista Περισσότερο από το 90 τοις εκατό των χρηστών του διαδικτύου στον κόσμο περιηγούνται στον Ιστό χρησιμοποιώντας τα κινητά τους τηλέφωνα. Οι περισσότερες ιστοσελίδες περιέχουν εικόνες και αυτές οι εικόνες είναι μία από τις μετρήσεις που χρησιμοποιούνται για τη μέτρηση της απόδοσης ιστού. Για να βελτιώσετε την απόδοση, πρέπει να βελτιώσετε τις εικόνες σας κάνοντας τις να ανταποκρίνονται. Επαληθεύω Κορυφαία δημοφιλή εργαλεία ανάπτυξης Ιστού που χρησιμοποιεί κάθε επαγγελματική χρήση.
Πώς να δημιουργήσετε αποκριτικές εικόνες HTML
Η αποκριτική σχεδίαση ιστοσελίδων σημαίνει όχι μόνο ότι οι διατάξεις μπορούν να αλλάξουν με βάση τα χαρακτηριστικά της συσκευής που χρησιμοποιείται, αλλά και το περιεχόμενο. Για παράδειγμα, σε οθόνες υψηλής ανάλυσης (2x), απαιτούνται επίσης γραφικά υψηλής ανάλυσης για να διασφαλιστεί το επίπεδο ευκρίνειας. Μια εικόνα με τιμή πλάτους 50% μπορεί να λειτουργεί καλά μόνο όταν το πρόγραμμα περιήγησης έχει πλάτος 800 px, αλλά θα έχει μεγάλο αντίκτυπο σε ένα στενό τηλέφωνο και το πρόβλημα της κατανάλωσης υψηλού εύρους ζώνης θα εξακολουθεί να υπάρχει όταν το μέγεθος μειωθεί για να ταιριάζει σε μικρό οθόνες.
Χαρακτηριστικά αντικειμένου img μεγάλης σημασίας· Δεδομένου ότι βοηθά στη λήψη, την αποκωδικοποίηση και την εμφάνιση περιεχομένου, τα σύγχρονα προγράμματα περιήγησης είναι συμβατά με μια σειρά από διαφορετικές μορφές εικόνας. Η ενσωμάτωση εικόνων που λειτουργούν σε όλες τις συσκευές δεν είναι η ίδια όπως για επιτραπέζιους υπολογιστές και απαιτούνται μόνο μερικές μικρές αλλαγές για να κάνετε καλή εντύπωση.
Μπορείτε να εργαστείτε με εικόνες που αποκρίνονται από δύο γωνίες—είτε παρουσιάζοντας την ίδια εικόνα σε διαφορετικά μεγέθη είτε παρουσιάζοντας διαφορετικές εικόνες ανάλογα με τα χαρακτηριστικά της οθόνης. μπορείς να χρησιμοποιήσεις ή . Αυτές οι δύο επιλογές χειρίζονται διαφορετικά τις αποκριτικές εικόνες, αλλά όλες εμφανίζουν μία εικόνα από ορισμένες εναλλακτικές, ανάλογα με το σύνολο κανόνων.
χρησιμοποιήστε το srcset
Η δυνατότητα σάς επιτρέπει να Τυπικό HTML καθορίζοντας μόνο ένα αρχείο εικόνας. Εάν θέλετε να εμφανίσετε διαφορετική εικόνα ανάλογα με το μέγεθος της συσκευής, θα πρέπει να χρησιμοποιήσετε srcset.
σύνταξη:
Η δυνατότητα σάς επιτρέπει να srcset Παρέχοντας πρόσθετα αρχεία πηγής, το πρόγραμμα περιήγησης θα επιλέξει την εικόνα που φαίνεται βέλτιστη για το μέγεθος οθόνης που χρησιμοποιείται.
αποτελούμαι srcset Έχει τρία μέρη: το όνομα του αρχείου εικόνας που καθορίζει τη διαδρομή προς την εικόνα προέλευσης, την περιοχή και το εγγενές ή πραγματικό πλάτος της εικόνας.
Χρησιμοποιήστε srcset με μεγέθη
Το πρόβλημα έγκειται στη χρήση του srcset Σε αυτό δεν μπορείτε να ελέγξετε ποια εικόνα επιλέγει να εμφανίσει το πρόγραμμα περιήγησης. Ο συνδυασμός srcset και μεγεθών λύνει αυτό το πρόβλημα. Τα μεγέθη ορίζονται από ένα σύνολο όρων μέσων που υποδεικνύουν ότι μια εικόνα είναι το βέλτιστο μέγεθος.
Τώρα μπορείτε να πληκτρολογήσετε ξανά την ετικέτα παραπάνω ως εξής.
Τα μεγέθη αποτελούνται από μια κατάσταση μέσων, σε αυτό το παράδειγμα (μέγιστο πλάτος: 600 px) που αντιπροσωπεύει το πλάτος της θύρας, την περιοχή και το πλάτος της υποδοχής (480 px) με τον χώρο που θα γεμίσει η εικόνα εάν το μέσο κατάσταση είναι αλήθεια.
Εδώ, το πρόγραμμα περιήγησης θα ελέγξει πρώτα την απόδοση της συσκευής και θα τη συγκρίνει με την κατάσταση των μέσων. Εάν η συνθήκη είναι αληθής, θα ελέγξει το πλάτος του διαφράγματος και θα ανεβάσει μια εικόνα του srcset Το ίδιο πλάτος ή η επόμενη μεγαλύτερη εικόνα.
Σημειώστε ότι συμπεριλαμβάνετε και εσείς src Το οποίο παρέχει την εικόνα για αναφορά σε προγράμματα περιήγησης που δεν υποστηρίζουν srcset και μεγέθη.
Επιτρέψτε σας srcset Παρουσιάζει επίσης εικόνες σε διαφορετικές αναλύσεις χρησιμοποιώντας περιγραφείς x.
Σε αυτό το παράδειγμα, εάν η συσκευή έχει ανάλυση 1 pixel ανά CSS ή περισσότερο, το πρόγραμμα περιήγησης θα φορτώσει την εικόνα cute-cat-highXNUMX.jpg.
Το χαρακτηριστικό srcset βελτιώνει τη συμπεριφορά του στοιχείου img, καθιστώντας ευκολότερη την παροχή πολλών αρχείων εικόνας για διαφορετικές δυνατότητες υλικού. Όπως και στο σύνολο εικόνων, η αρχική συνάρτηση CSS, srcset Το πρόγραμμα περιήγησης έχει το δικαίωμα να επιλέξει την καλύτερη εικόνα με βάση τα χαρακτηριστικά της συσκευής, για παράδειγμα χρησιμοποιώντας μια εικόνα 2x σε μια οθόνη 2x και πιθανώς στο μέλλον, μια εικόνα 1x σε μια συσκευή 2x όταν χρησιμοποιείται δίκτυο περιορισμένου εύρους ζώνης.
Pixel υλικού και λογισμικού
Το πρόβλημα με αυτή τη λύση είναι ότι οι εικόνες ανταποκρίνονται μόνο ως προς την πυκνότητα pixel της συσκευής. Αυτή είναι η αναλογία των εικονοστοιχείων υλικού προς το λογισμικό ή τα εικονοστοιχεία CSS. Ένα εικονοστοιχείο υλικού είναι το πραγματικό σημείο φωτός στην οθόνη, ενώ ένα εικονοστοιχείο λογισμικού ή εικονοστοιχείο CSS είναι μια μονάδα μέτρησης. Η πυκνότητα των εικονοστοιχείων καθορίζει την ανάλυση της συσκευής.
Κατά την απόδοση εικόνων με απόκριση, μην λαμβάνετε υπόψη μόνο την ανάλυση. Το μέγεθος της οθόνης έχει επίσης σημασία. Διαφορετικά, μπορεί να καταλήξετε να ανεβάσετε άσκοπα μεγάλες εικόνες ή εικόνες με εξαιρετικά pixel.
Χρησιμοποίηση
Χαρακτηριστικό Είναι ένα στοιχείο HTML που τυλίγει πολλά στοιχεία που περιέχει διάφορα αρχεία πηγής και ένα στοιχείο . κατά την κατασκευή Οι εικόνες ανταποκρίνονται προσφέροντας διαφορετικά μεγέθη της ίδιας εικόνας, κάτι που σας επιτρέπει αλλάξτε πραγματικά την εμφανιζόμενη εικόνα.
σύνταξη:
Σκεφτείτε μια κατάσταση όπου έχετε μια μεγάλη φωτογραφία τοπίου. Η εικόνα εμφανίζεται και φαίνεται ανάλογη στην επιφάνεια εργασίας, αλλά συρρικνώνεται τόσο πολύ στο κινητό που τα στοιχεία της εικόνας γίνονται μικρά. Μια εικόνα που δεν ανταποκρίνεται συμβάλλει σε μια κακή εμπειρία χρήστη. χρησιμοποιώντας το χαρακτηριστικό . , μπορείτε να πείτε στο πρόγραμμα περιήγησής σας να αλλάξει σε κοντινό πλάνο όταν χρησιμοποιείτε κινητό τηλέφωνο.
Όπως και στην πρώτη μέθοδο, το χαρακτηριστικό . περιέχει περιέχει ένα χαρακτηριστικό μέσου που μπορείτε να χρησιμοποιήσετε για να παρέχετε την κατάσταση του μέσου. Για παράδειγμα, το πρόγραμμα περιήγησης θα εμφανίσει "cute-cat-480w.jpg" εάν η θύρα προβολής είναι 639 pixel ή λιγότερο. διατηρήσει την ιδιότητα srcset Καθορίζεται η διαδρομή του αρχείου εικόνας που θέλετε να εμφανίσετε src προεπιλεγμένη εικόνα.
Επιστροφή στο WebP Μορφή εικόνας
Το άλλο πράγμα με το οποίο ασχολείσαι είναι ένα χαρακτηριστικό Ένα καλό πράγμα είναι να παρέχετε ένα αντίγραφο ασφαλείας σε σύγχρονες μορφές εικόνας όπως το WebP. Οι εικόνες WebP έχουν υψηλή απόδοση, είναι συχνά μικρές σε μέγεθος και παρέχουν γρήγορη εμπειρία web. Έτσι, μπορείτε να αποφασίσετε να τα χρησιμοποιήσετε στους ιστότοπούς σας. Η πρόκληση που μπορεί να αντιμετωπίσετε είναι ότι δεν υποστηρίζουν όλα τα προγράμματα περιήγησης εικόνες WebP. με θέμα Δεν θα αντιμετωπίσετε αυτό το ζήτημα, καθώς το πρόγραμμα περιήγησής σας μπορεί να ανεβάσει μια εναλλακτική εικόνα εάν δεν υποστηρίζει το WebP.
Γιατί πρέπει να δημιουργείτε εικόνες με κορυφογραμμή σε HTML και όχι σε CSS;
Το CSS παρέχει ισχυρές επιλογές για το χειρισμό εικόνων με απόκριση. Γιατί δεν το χρησιμοποιείς τότε; Το πρόγραμμα περιήγησης Ιστού προφορτώνει τις εικόνες πριν αναλύσει το CSS. Έτσι, προτού το javascript του ιστότοπού σας εντοπίσει τη θύρα προβολής για να κάνει τις κατάλληλες αλλαγές στις εικόνες, οι αρχικές εικόνες θα προφορτωθούν. Για αυτόν τον λόγο, είναι καλύτερο να εργάζεστε με αποκριτικές εικόνες με HTML.
Επιδιώξτε την καλύτερη δυνατή ποιότητα εικόνας
Έχετε δει πώς μπορείτε να δημιουργήσετε αποκριτικές εικόνες HTML με ένα χαρακτηριστικό . و Σε αυτό το άρθρο. Η παράδοση εικόνων με απόκριση συνήθως περιλαμβάνει την εξέταση του μεγέθους και της ανάλυσης της εικόνας, καθώς σχετίζονται με το μέγεθος της οθόνης. Εάν γίνει λάθος, μπορεί να επηρεαστεί η ποιότητα της εικόνας. Βεβαιωθείτε ότι έχετε επιλέξει μια εικόνα που αξιοποιεί με τον καλύτερο τρόπο τους λιγότερους πόρους. Επαληθεύω Πώς να ανοίξετε και να μετατρέψετε εικόνες HEIC στο Android.
