Κατά την ανάπτυξη ενός ιστότοπου, οι προγραμματιστές συνήθως χρησιμοποιούν την ίδια εικόνα για όλα τα μεγέθη οθόνης, κάτι που δεν είναι καλή πρακτική, καθώς δεν μπορεί να βασιστεί κανείς στο πρόγραμμα περιήγησης για την αλλαγή μεγέθους. Σε μια τέτοια περίπτωση, οι αποκριτικές εικόνες τίθενται σε ισχύ διασφαλίζοντας ότι η εικόνα λαμβάνεται στο κατάλληλο μέγεθος και ποιότητα για την αντίστοιχη συσκευή, βελτιώνοντας έτσι την ταχύτητα φόρτωσης της σελίδας.
Πώς να βελτιώσετε την ταχύτητα φόρτωσης σελίδας χρησιμοποιώντας αποκριτικές εικόνες;
Για να βελτιώσετε την ταχύτητα φόρτωσης της σελίδας μέσω εικόνων που αποκρίνονται, εξετάστε τις ακόλουθες μεθοδολογίες:
- Χαρακτηριστικό 'srcset'.
- Καθορίστε διαφορετικές πυκνότητες εικονοστοιχείων.
- 'μεγέθη' Ιδιότητα.
- Στοιχείο '<εικόνα>'.
Παράδειγμα 1: Βελτιώστε την ταχύτητα φόρτωσης σελίδας μέσω αποκριτικών εικόνων χρησιμοποιώντας το χαρακτηριστικό 'srcset'
Η πιο βολική προσέγγιση για την εφαρμογή εικόνων με απόκριση μπορεί να είναι η χρήση του ' srcset ' χαρακτηριστικό συσσωρεύεται στο ' ετικέτα '. Αυτό το χαρακτηριστικό επιτρέπει στον προγραμματιστή να καθορίσει διάφορα μεγέθη εικόνας και το πρόγραμμα περιήγησης επιλέγει αυτόματα την καταλληλότερη εικόνα σε σχέση με το μέγεθος της οθόνης του χρήστη. Ακολουθεί η επίδειξη:
DOCTYPE html >
< html >
< κεφάλι >
< μετα σύνολο χαρακτήρων = 'utf-8' >
< μετα όνομα = 'Θύρα προβολής' περιεχόμενο = 'width=device-width, αρχική κλίμακα=1' >
< τίτλος τίτλος >
κεφάλι >
< σώμα >
< img src = 'F:\ΕΡΓΑΣΙΑ ΤΕΧΝΙΚΑ ΑΡΘΡΑ\imgre.png' τα παντα = 'Αποκριτική εικόνα'
srcset = 'F:\JOB TECHNICAL ARTICLES\imgre.png 400w, F:\JOB TECHNICAL ARTICLES\imgre.png 800w, F:\JOB TECHNICAL ARTICLES\imgre.png 1200w'
/>
σώμα >
html >
Σε αυτόν τον κώδικα:
- Ο ' srcset Περιλαμβάνεται χαρακτηριστικό που περιλαμβάνει τη διαδρομή της εικόνας και τα διαφορετικά πλάτη κάθε φορά.
- Είναι τέτοιο που η εικόνα ' F:\ΕΡΓΑΣΙΑ ΤΕΧΝΙΚΑ ΑΡΘΡΑ\imgre.png 400w ' αντιπροσωπεύει μια διαδρομή εικόνας με πλάτος ' 400 εικονοστοιχεία.
- Με βάση αυτές τις πληροφορίες, το πρόγραμμα περιήγησης αναλύει την πιο κατάλληλη εικόνα για λήψη με βάση το μέγεθος της οθόνης του χρήστη, έτσι ώστε οι μικρότερες οθόνες να εμφανίζουν μικρότερες εικόνες, διατηρώντας έτσι το εύρος ζώνης.
Παραγωγή
Παράδειγμα 2: Βελτιώστε την ταχύτητα φόρτωσης σελίδας μέσω εικόνων απόκρισης καθορίζοντας διαφορετικές πυκνότητες εικονοστοιχείων
Σε αυτό το παράδειγμα, η διαδρομή της εικόνας θα καθοριστεί μαζί με διαφορετικές πυκνότητες pixel για οθόνες υψηλής ανάλυσης. Αυτό μπορεί να επιτευχθεί μέσω του « srcset ” χαρακτηριστικό, που παρουσιάζεται παρακάτω:
DOCTYPE html >< html >
< κεφάλι >
< μετα σύνολο χαρακτήρων = 'utf-8' >
< μετα όνομα = 'Θύρα προβολής' περιεχόμενο = 'width=device-width, αρχική κλίμακα=1' >
< τίτλος τίτλος >
κεφάλι >
< σώμα >
< img src = 'F:\ΕΡΓΑΣΙΑ ΤΕΧΝΙΚΑ ΑΡΘΡΑ\imgre.png' τα παντα = 'Αποκριτική εικόνα' srcset = 'F:\JOB TECHNICAL ARTICLES\imgre.png 1x, F:\JOB TECHNICAL ARTICLES\imgre.png 1,5x, F:\JOB TECHNICAL ARTICLES\imgre.png 2x'
/>
σώμα >
html >
Σε αυτό το απόσπασμα κώδικα, καθορίστε τη διαδρομή της εικόνας τρεις φορές με ποικίλες πυκνότητες pixel. Είναι τέτοιο που το πρόγραμμα περιήγησης επιλέγει την πιο κατάλληλη/κατάλληλη εικόνα για να εξασφαλίσει κορυφαία ποιότητα σε διάφορες οθόνες.
Σημείωση: Ο ' 1x Το pixel είναι η προεπιλεγμένη τιμή, επομένως είναι μια επιλογή για τον χρήστη να συσχετίσει τη διαδρομή της εικόνας ή όχι.
Παραγωγή
Παράδειγμα 3: Βελτιώστε την ταχύτητα φόρτωσης σελίδας μέσω αποκριτικών εικόνων χρησιμοποιώντας το χαρακτηριστικό 'sizes'
Σε ορισμένες περιπτώσεις, μπορεί να υπάρχει περιορισμός όπου το πραγματικό μέγεθος εικόνας στην οθόνη διαφέρει από το πλάτος της οθόνης. Για την αντιμετώπιση αυτού του ζητήματος, το « μεγέθη Το χαρακτηριστικό ' μπορεί να χρησιμοποιηθεί για να συμπεριλάβει το μέγεθος της εικόνας σε σχέση με ερωτήματα μέσων ή ένα σταθερό μέγεθος. Παρακάτω είναι η επίδειξη κώδικα:
DOCTYPE html >< html >
< κεφάλι >
< μετα σύνολο χαρακτήρων = 'utf-8' >
< μετα όνομα = 'Θύρα προβολής' περιεχόμενο = 'width=device-width, αρχική κλίμακα=1' >
< τίτλος τίτλος >
κεφάλι >
< σώμα >
< img src = 'F:\ΕΡΓΑΣΙΑ ΤΕΧΝΙΚΑ ΑΡΘΡΑ\imgre.png' τα παντα = 'Αποκριτική εικόνα' srcset = 'F:\JOB TECHNICAL ARTICLES\imgre.png 50w, F:\JOB TECHNICAL ARTICLES\imgre.png 800w, F:\JOB TECHNICAL ARTICLES\imgre.png 1200w'
μεγέθη = '(μέγιστο πλάτος: 800 px) 100vw, 800px'
/>
σώμα >
html >
Σε αυτό το μπλοκ κώδικα, το ' μεγέθη Το χαρακτηριστικό ' ενσωματώνει τα ερωτήματα και τα μεγέθη των μέσων. Είναι τέτοιο που καθοδηγεί το πρόγραμμα περιήγησης να επιλέξει το μέγεθος της εικόνας σε σχέση με το πλάτος της οθόνης του χρήστη. Αυτό διασφαλίζει ότι οι εικόνες δεν υπερβαίνουν το μέγιστο πλάτος του στόχου.
Παραγωγή
Σημαντικά ζητήματα κατά τη χρήση του χαρακτηριστικού 'sizes'.
Υπάρχουν ορισμένοι περιορισμοί στη χρήση του ' μεγέθη ” το χαρακτηριστικό παρατίθεται επίσης παρακάτω:
- Όταν χρησιμοποιείτε πολλαπλά ερωτήματα πολυμέσων στο ' μεγέθη », βεβαιωθείτε ότι έχει επιλεγεί το πρώτο αληθινό ερώτημα πολυμέσων. Επίσης, βεβαιωθείτε ότι τα ερωτήματα πολυμέσων ταξινομούνται από τα πιο συγκεκριμένα έως τα λιγότερο συγκεκριμένα.
- Το χαρακτηριστικό 'sizes' δεν υποστηρίζει ποσοστά μεγέθη, καθώς το πρόγραμμα περιήγησης δεν γνωρίζει πόσο εύρος θα είναι κάτι που καθορίζεται σε ποσοστά έως ότου γνωρίζει το πλάτος του γονικού στοιχείου.
Παράδειγμα 4: Βελτιώστε την ταχύτητα φόρτωσης σελίδας μέσω αποκριτικών εικόνων χρησιμοποιώντας το στοιχείο '
Ο ' <εικόνα> Το στοιχείο ” δίνει τη δυνατότητα στον προγραμματιστή να εμφανίζει και να αναπτύσσει πολλές εικόνες σε διαφορετικά μεγέθη οθόνης. Είναι χρήσιμο σε περιπτώσεις όπου το περιεχόμενο ποικίλλει ανάλογα με τη συσκευή. Παρακάτω είναι η επίδειξη κώδικα:
DOCTYPE html >< html >
< κεφάλι >
< μετα σύνολο χαρακτήρων = 'utf-8' >
< μετα όνομα = 'Θύρα προβολής' περιεχόμενο = 'width=device-width, αρχική κλίμακα=1' >
< τίτλος τίτλος >
κεφάλι >
< σώμα >
< εικόνα >
< πηγή μεσο ΜΑΖΙΚΗΣ ΕΝΗΜΕΡΩΣΗΣ = '(μέγιστο πλάτος: 100 εικονοστοιχεία)' srcset = 'F:\JOB TECHNICAL ARTILES\imgbanner.png' />
< img src = 'F:\ΕΡΓΑΣΙΑ ΤΕΧΝΙΚΑ ΑΡΘΡΑ\imgre.png' τα παντα = 'Αποκριτική εικόνα' />
εικόνα >
σώμα >
html >
Σύμφωνα με αυτές τις γραμμές κώδικα:
- Προσδιορίστε το ' <εικόνα> ' στοιχείο που συσσωρεύει το ' <πηγή> ” στοιχεία για διαφορετικές εικόνες και αφήστε το πρόγραμμα περιήγησης να επιλέξει την κατάλληλη με βάση το μέγεθος της οθόνης του χρήστη.
- Επίσης, εάν κανένα από τα « <πηγή> Τα στοιχεία είναι κατάλληλα για το μέγεθος της οθόνης, η εικόνα που καθορίζεται στο
Η ετικέτα χρησιμεύει ως εναλλακτική λύση.
- Αυτό, κατά συνέπεια, προσθέτει μια εναλλακτική εικόνα σε μια απρόβλεπτη περίπτωση, διατηρώντας έτσι τη βελτιωμένη ταχύτητα φόρτωσης σελίδας.
Παραγωγή
συμπέρασμα
Η ταχύτητα φόρτωσης σελίδας μπορεί να βελτιωθεί μέσω εικόνων που αποκρίνονται χρησιμοποιώντας το ' srcset χαρακτηριστικό ', προσδιορίζοντας διαφορετικές πυκνότητες pixel, χρησιμοποιώντας το ' μεγέθη ' χαρακτηριστικό ή μέσω του ' <εικόνα> ' στοιχείο. Ο ' <εικόνα> Η προσέγγιση στοιχείων μπορεί να ληφθεί υπόψη εάν καμία από τις άλλες προσεγγίσεις δεν λειτουργήσει, καθώς προσθέτει μια εναλλακτική εικόνα σε μια απρόβλεπτη περίπτωση χωρίς πρόσθετες επιλογές για την ίδια εικόνα.