Ο ιστός είναι ένα οπτικό μέσο. Η συντριπτική πλειοψηφία αυτού του οπτικού τοπίου είναι χάρη στα αρχεία εικόνας. Ενώ η αφθονία μπορεί να επιτευχθεί με το CSS και το inline SVG, οι περισσότεροι ιστότοποι χρειάζονται ακόμα αρχεία εικόνας.
Κατά μέσο όρο, οι εικόνες αντιπροσώπευαν πάνω απ 'το μισό του μεγέθους της σελίδας πέρυσι και αύξηση των μεγεθών των εικόνων ανά έτος. υπήρχε 21% αύξηση σε μέγεθος εικόνας μόνο το 2014.
Ταυτόχρονα, ο αριθμός και η ποικιλία των συσκευών που προσεγγίζουν τον ιστό συνεχίζει να αυξάνεται. Οι αποφάσεις τώρα ποικίλλουν οπουδήποτε μεταξύ 72ppi (φθίνουσα συχνότητα) και πάνω από 600ppi.
Η δημιουργία μιας εικόνας για την οθόνη που θα είναι επαρκούς ποιότητας για οποιαδήποτε συσκευή είναι απλή: αποθηκεύστε την σε 1000ppi και τηλεφωνήστε την ημέρα. Η εικόνα που θα προκύψει θα είναι καθαρή ακόμα και στην υψηλότερη από τις συσκευές hi-res. Αλλά ενώ η ποιότητα σας θα είναι υψηλή, έτσι και το μέγεθος του αρχείου σας. Με το χρόνο φόρτωσης σελίδας a βασικό παράγοντα στην UX οφείλουμε να διασφαλίσουμε ότι οι ιστότοποι παραδίδονται στους χρήστες μας άμεσα. Όταν οι εικόνες είναι τόσο υψηλής ποιότητας που χρειάζονται δέκα δευτερόλεπτα για λήψη σε ευρυζωνικές συνδέσεις, πόσο μάλλον για κινητές συνδέσεις, τότε είναι πραγματικά αχρησιμοποίητες.
Ο στόχος των αποκρινόμενων εικόνων δεν είναι να παραδώσει μια εικόνα υψηλότερης ποιότητας στις οθόνες που μπορούν να το επιδείξουν (κάτι που μπορούμε να το κάνουμε εύκολα), ο στόχος είναι να παραδώσει την υψηλότερη ποιότητα εικόνας που υποστηρίζεται και τίποτα περισσότερο.
Αυτός ο οδηγός έχει σχεδιαστεί για να σας διδάξει τι λειτουργεί, όπου εξακολουθούν να υπάρχουν τα προβλήματα και οι παγίδες και πώς μπορείτε να χρησιμοποιείτε ανταποκρινόμενες εικόνες στις ιστοσελίδες, σήμερα.
Νιώθω την ανάγκη, την ανάγκη για ταχύτητα
Γιατί έχει σημασία η ταχύτητα; Σίγουρα κανείς δεν βρίσκεται πλέον σε σύνδεση 3G; Κανείς δεν χρησιμοποιεί dial-up. Εάν το δημογραφικό στόχο του πελάτη σας κατοικεί στο αστικό Μανχάταν, γιατί θα πρέπει να σας ενδιαφέρει το αγροτικό Λεσόθο; Το γεγονός είναι ότι είναι μύθος ότι είμαστε όλοι στην υπερσύγχρονη ευρυζωνική σύνδεση, που μας πουλάμε από εταιρείες που επωφελούνται από την επιθυμία για αυξανόμενες ταχύτητες.
Οι περισσότεροι άνθρωποι δαπανούν τουλάχιστον δύο ώρες κάθε μέρα σε μια κατώτερη σύνδεση. Συχνά βρίσκω τον εαυτό μου με τον περισσότερο χρόνο για να περιηγηθείτε όταν μετακομίζομαι, όταν ακόμη και μια αξιόπιστη σύνδεση 3G ακούγεται σαν κάποιο μακρινό όνειρο.
Τον Απρίλιο Η Google ανακοίνωσε ότι η φιλικότητα προς κινητά θα χρησιμοποιηθεί ως κριτήριο κατάταξης για αναζητήσεις που πραγματοποιούνται σε συσκευές που θεωρεί ότι είναι "κινητές". Ακόμη και πριν από αυτό, η ταχύτητα ήταν ένας παράγοντας στην ταξινόμηση σελίδων - και τα δύο σαφώς ως μέρος των υπολογισμών της Google, και σιωπηρά ως ένας παράγοντας που συμβάλλει στο ποσοστό εγκατάλειψης.
Σε δύο τοποθεσίες που ταξινομήθηκαν πανομοιότυπα, ένα επιπλέον 1Kb θα μπορούσε να σας αποβάλει από το 3ο σημείο στο Google, στο 4ο ή στο 5ο. Θα μπορούσε ακόμη και να σας αποβάλει από την 10η έως την 11η - με άλλα λόγια από τη σελίδα 1 έως τη σελίδα 2 - με όλες τις σχετικές επιπτώσεις στα έσοδα του πελάτη σας.
Χρειάζεται πραγματικά αυτή η εικόνα;
Η πιο βελτιστοποιημένη εικόνα υπάρχει, δεν υπάρχει καθόλου εικόνα. Αν έχετε πέντε εικόνες στον ιστότοπό σας και αποθέσετε ένα, έχετε εξοικονομήσει 20%, ίσως το πιο σημαντικό, έχετε αποθηκεύσει τον εαυτό σας ένα http αίτημα. Εάν αφαιρέσουμε όλες τις εικόνες από τους ιστότοπούς μας, θα εξοικονομήσουμε 100% και τα πέντε αιτήματα HTTP. Γιατί λοιπόν να μην το κάνουμε αυτό;
Δεν αφαιρούμε εικόνες από τους ιστότοπούς μας, επειδή επικοινωνούν πιο αποτελεσματικά από το κείμενο βραχυπρόθεσμα. Δημιουργούν μια συναισθηματική σύνδεση που προσελκύει τους χρήστες στο περιεχόμενο.
Ξέρουμε ότι οι χρήστες δεν διαβάζουν ιστοσελίδες . Πολύ λίγοι άνθρωποι διαβάζουν σε βάθος περιεχόμενο στο διαδίκτυο. Οι εικόνες μας επιτρέπουν να επικοινωνούμε, να επικοινωνούμε και να ενισχύουμε ένα εμπορικό σήμα σε ένα κλάσμα του χρόνου που μπορεί να διαχειριστεί το κείμενο.
Οι εικόνες μπορεί να είναι μεγάλες και δύσχρηστες για λήψη, αλλά μόλις αποτυπωθούν στο πρόγραμμα περιήγησης, είναι πολύ πιο αποδοτικές από ό, τι από το κείμενο για να καθορίσουν την εμπλοκή χρήστη και να ενισχύσουν ένα μήνυμα μάρκας.
Οι ανταποκρινόμενες εικόνες μας βοηθούν να διασφαλίσουμε ότι οι συναισθηματικές εικόνες που δημιουργούνται δεν χάνονται όταν ο ανυπόμονος χρήστης χτυπά το κουμπί πίσω.
Τι συμβαίνει με το SVG;
Το SVG (Scaleable Vector Graphics) είναι μια από τις πιο πρωτοποριακές τεχνολογίες του Παγκοσμίου Ιστού. Είναι πολύ μπροστά από την καμπύλη που οι περισσότεροι σχεδιαστές δεν έχουν ακόμη αναγνωρίσει το πραγματικό δυναμικό της.
Το SVG - όπως υποδηλώνει το όνομα - βασίζεται στον φορέα. Αυτό σημαίνει ότι τα γραφικά SVG κατασκευάζονται από σημεία, γωνίες και αποστάσεις. Το SVG είναι επίσης - όπως υποδηλώνει το όνομα - κλιμακωτό, που σημαίνει ότι θα εμφανίζεται εξίσου καλά σε ένα smartphone 5k iMac ή Android, χωρίς καμία απώλεια ποιότητας και καμία αλλαγή στο μέγεθος του αρχείου.
Εάν έχετε μια επίπεδη εικόνα, ένα εικονίδιο, ένα λογότυπο, σχεδόν οτιδήποτε μπορεί να εμφανιστεί ως SVG, τότε SVG είναι ο τρόπος να πάει.
Οι περισσότερες εικόνες στο Web είναι bitmap. Γενικά, ο τρόπος με τον οποίο λειτουργεί ένα bitmap είναι να περιγράψει κάθε pixel ένα κάθε φορά, το χρώμα του (σε RGB - κόκκινο, πράσινο και μπλε) και σε ορισμένες περιπτώσεις τη διαφάνειά του. Εάν έχετε μια εικόνα που μετρά 100px με 100px, τότε έχετε μια εικόνα με 10.000 pixels. εάν κάθε εικονοστοιχείο έχει 4 τιμές για να το περιγράψει, τότε η εικόνα έχει 40.000 bits δεδομένων που σχετίζονται με αυτό. Ακούγεται σαν πολλά; Μερικές φορές, αυτό είναι λιγότερο από ένα διανυσματικό γραφικό.
Εξετάστε μια εικόνα 1px by 1px. που θα απαιτούσε 4 bits δεδομένων για εγγραφή ως bitmap (κόκκινο, πράσινο, μπλε και τιμές alpha). Τώρα θεωρήστε το ίδιο τετράγωνο εικονοστοιχείο που καταγράφεται ως διάνυσμα. που θα απαιτούσε το x, y, το πλάτος και το ύψος του ορθογωνίου, επιπλέον των τιμών RGBA.
Αυτά είναι ακατέργαστα παραδείγματα, αλλά είναι ακριβή. Συχνά, μια διανυσματική έκδοση μιας εικόνας - αν διαθέτουμε ακόμη και μία - υπερβαίνει το μέγεθος αρχείου του αντίστοιχου bitmap, και στη συνέχεια η bitmap είναι η μόνη λογική επιλογή.
(Mis) με τη χρήση του JavaScript
Όπως τα περισσότερα προβλήματα στη ζωή (εάν η ζωή σας είναι σε απευθείας σύνδεση) οι απόκριες εικόνες μπορούν να λυθούν από το JavaScript. Στην πραγματικότητα για αρκετά χρόνια η JavaScript ήταν ο μόνος τρόπος για να λυθεί το θέμα. Το JavaScript μπορεί να δοκιμάσει τις ικανότητες ενός πράκτορα χρήστη, να καθορίσει το είδος του προγράμματος περιήγησης που είναι και να γράψει μια τυπική ετικέτα ετικέτας HTML, η οποία περιέχει την κατάλληλη εικόνα.
Οι σχεδιαστές ιστοσελίδων που αντιτίθενται στη χρήση του JavaScript συνήθως το κάνουν επειδή μερικοί άνθρωποι το απενεργοποιούν . Ωστόσο, αυτό δεν συμβαίνει πλέον, ειδικά στον ιστό για κινητά, αλλά υπάρχουν ορισμένα επίμονα ζητήματα: η γραφή μιας εικόνας με JavaScript σημαίνει ότι η εικόνα δεν θα αναλύεται από τα bots των μηχανών αναζήτησης και θα αποδίδεται μόνο μετά το σενάριο όπως τρέχει, για παράδειγμα.
Το μεγαλύτερο πρόβλημα με τη χρήση του JavaScript είναι ότι πρόκειται για κακή χρήση του βασικού στόχου της JavaScript. Το HTML κρατά δεδομένα, το CSS επεξεργάζεται την παρουσίαση, τη λειτουργικότητα JavaScript. Όταν σπάσουμε από αυτούς τους δομημένους ρόλους, αρχίζουμε να αντιμετωπίζουμε προβλήματα που απαιτούν αμυχές για να τα διορθώσουμε. Οι εικόνες είναι δεδομένα και θα πρέπει να αντιμετωπίζονται με HTML.
Το πρόβλημα με τα προγράμματα περιήγησης
Από την πρώτη σκέψη του RWD, οι εικόνες ήταν το μεγαλύτερο εμπόδιο. Αλλά τώρα, αρχίζουμε να βρούμε τρόπους για να λύσουμε τα διάφορα προβλήματα. Τεχνικές που είναι γεμάτες μάχη και αρκετά επιτυχημένες ώστε να θεωρούνται ως η βέλτιστη πρακτική. Οι αφοσιωμένοι προγραμματιστές εγκατέλειψαν το χρόνο τους για να ασκήσουν πιέσεις στο WC3 για επίσημες λύσεις και τώρα, για πρώτη φορά, οι απόκριες εικόνες είναι πρακτικές.
Το κλειδί για την απόκριση των εικόνων είναι ότι έχουν σχεδιαστεί με πλήρη επίγνωση των αδυναμιών του Ιστού. Έχει ληφθεί μέριμνα ώστε οι λύσεις απόκρισης εικόνας να μην σπάνε τα υπάρχοντα προγράμματα περιήγησης, έτσι ώστε ακόμη και σε προγράμματα περιήγησης που δεν υποστηρίζουν εικόνες που ανταποκρίνονται, ο κώδικας θα αποτύχει σιωπηρά και θα εμφανιστούν προεπιλεγμένες εικόνες.
Σε αυτό το άρθρο θα εξετάσουμε δύο επίσημα στοιχεία HTML HTML: srcset και εικόνα.
Προς το παρόν, τα Edge, Safari και iOS Safari υποστηρίζουν μόνο ένα υποσύνολο των προδιαγραφών srcset . Firefox, Chrome, Opera, Android Browser και οι επερχόμενες εκδόσεις Safari και iOS Safari την υποστηρίζουν πλήρως. (Θα συζητήσουμε τις παρακάτω διαφορές.)
Προς το παρόν το στοιχείο εικόνας υποστηρίζεται πλήρως από το Firefox, Chrome, Opera και Android Browser. Το Edge, το Safari και το iOS Safari δεν το υποστηρίζουν και δεν έχουν ανακοινώσει χρονοδιάγραμμα για την εφαρμογή του.
Ακόμη και ανάμεσα στα προγράμματα περιήγησης που υποστηρίζουν τον νέο κώδικα, υπάρχουν ασυνέπειες, καθώς διαφορετικοί κατασκευαστές προγραμμάτων περιήγησης ερμηνεύουν τις προδιαγραφές του W3C με διαφορετικούς τρόπους. Για παράδειγμα, όταν καθορίζετε μια αλλαγή εικόνας από μικρό σε μεγάλο με βάση το μέγεθος του παραθύρου προβολής, ορισμένα προγράμματα περιήγησης θα αλλάξουν στη μεγάλη εικόνα όταν το παράθυρο προβολής είναι 1px μεγαλύτερο από το προτιμώμενο μέγεθος της μικρής εικόνας, ενώ άλλα θα μεταβούν στη μεγάλη εικόνα μόνο όταν το παράθυρο προβολής που ευνοείται από τη μεγάλη εικόνα, ταιριάζει πλήρως.
Εν ολίγοις, τα προγράμματα περιήγησης χωρίζονται σε δύο στρατόπεδα: αυτά που ευνοούν τις υψηλότερης ποιότητας εικόνες, όπου είναι δυνατόν, και εκείνες που ευνοούν τις μικρότερες λήψεις όπου είναι δυνατόν. Οι κατασκευαστές του προγράμματος περιήγησης εξακολουθούν να επιδιώκουν αυτή την προσπάθεια, τελικά η εφαρμογή κάποιου θα αποδειχθεί πιο δημοφιλής - προσωπικά ελπίζω ότι είναι η τελευταία, γιατί όπως σημειώνεται παραπάνω, η απόδοση είναι ζωτικής σημασίας για την εμπειρία των χρηστών.
Προς το παρόν, η καλύτερη επιλογή για τους σχεδιαστές ιστοσελίδων είναι να τηρήσουν τις προδιαγραφές και να μην προσπαθήσουν να μαντέψουν το πρόγραμμα περιήγησης. Μετά από όλα, η προεπιλεγμένη εμπειρία στο πρόγραμμα περιήγησης (υψηλότερη ποιότητα ή ταχύτερη λήψη) είναι μέρος αυτού που ο χρήστης επιλέγει ένα προεπιλεγμένο πρόγραμμα περιήγησης, οπότε αν ο χρήστης γνωρίζει τις διαφορετικές προσεγγίσεις, τότε προτιμάται η προτίμηση του προγράμματος περιήγησης .
Βέλτιστη πρακτική ευαισθητοποίησης εικόνας (2015)
Σε ολόκληρο το ιστορικό του Web, χρησιμοποιήσαμε ένα στοιχείο για να υποδείξουμε μια εικόνα, το στοιχείο img . Στο HTML5, το στοιχείο img έχει υποβληθεί σε μια λεπτή μετατόπιση του ρόλου του, ένα που έχει σχεδιαστεί για να επιτρέπει την απόκριση εικόνων: το στοιχείο img δεν παριστάνει πλέον μια εικόνα, είναι πλέον ένα σύμβολο κράτησης θέσης για μια εικόνα.
Αυτή η διάκριση είναι σημαντική, διότι ενώ ένα στοιχείο img παρείχε προηγουμένως ένα ενιαίο σύνολο δεδομένων εικόνας - είτε αυτό το bitmap είτε ο φορέας - τώρα μια εικόνα μπορεί να περιέχει πολλαπλά σύνολα δεδομένων.
Το στοιχείο img (για ανασκόπηση για μη κωδικοποιητές) μοιάζει με αυτό:
Η αποκρινόμενη έκδοση εικόνας του στοιχείου img μοιάζει με αυτό:
Σπάνια οποιαδήποτε αλλαγή. Κοιτάζοντας αυτόν τον κώδικα, παρατηρείτε ένα σημαντικό πράγμα: ο κώδικας είναι συμβατός προς τα πίσω. Εάν συμβαίνει κάποιο πρόγραμμα περιήγησης που δεν κατανοεί το χαρακτηριστικό srcset , απλώς θα το αγνοήσει και θα καταστήσει την εικόνα σύμφωνα με την αρχική προδιαγραφή του 1993.
Αυτό σημαίνει ότι μπορούμε τώρα να χρησιμοποιήσουμε ανταποκρινόμενες εικόνες στη σήμανσή μας, χωρίς την ανάγκη ανίχνευσης χαρακτηριστικών.
Στο νέο ανταποκρινόμενο στοιχείο img , το src χρησιμοποιείται κυρίως ως προεπιλεγμένη εικόνα και για browsers που δεν αναγνωρίζουν το srcset, ενώ το srcset περιέχει όλες τις διαθέσιμες εικόνες μορφής υψηλής ανάλυσης για αυτό το σύμβολο κράτησης θέσης.
Κατά την απόδοση του στοιχείου img το πρόγραμμα περιήγησης θα προσδιορίσει από μόνο του το αρχείο εικόνας που είναι το καταλληλότερο.
Χρησιμοποιώντας το srcset
Τώρα που γνωρίζουμε ότι το srcset θα αποτύχει σιωπηλά στα προγράμματα περιήγησης που δεν το υποστηρίζουν, είμαστε ελεύθεροι να προσθέσουμε μια επιπλέον εικόνα:
Σε αυτή την περίπτωση, κάθε πρόγραμμα περιήγησης που υποστηρίζει srcset θα εμφανίσει το image-b.jpg και οποιοδήποτε πρόγραμμα περιήγησης που δεν υποστηρίζει srcset θα εμφανίσει image-a.jpg.
Είναι σημαντικό να σημειωθεί ότι το πρόγραμμα περιήγησης θα κατεβάσει μόνο την εικόνα που αποφασίζει ότι θέλει να εμφανίσει, δεν μεταφορτώνει και τις δύο εικόνες και στη συνέχεια επιλέγει μία.
Δυστυχώς αυτό δεν μας πάει πολύ μακριά, γιατί αν δεν αποδεικνύουμε την υποστήριξη srcset , δεν υπάρχει πρακτική εφαρμογή για την εναλλαγή εικόνων με βάση μόνο την υποστήριξη srcset .
Η λύση είναι να παράσχει πρόσθετες πληροφορίες στο πρόγραμμα περιήγησης σχετικά με την εικόνα που πρέπει να επιλέξει. Προκειμένου να γίνει αυτό, πρέπει να παρέχουμε πληροφορίες είτε για διαθέσιμο χώρο είτε για πυκνότητα εικονοστοιχείων.
Χρησιμοποιώντας τον περιγραφέα x
Ο περιγραφέας x λέει σε ένα πρόγραμμα περιήγησης πόσο πυκνά είναι τα εικονοστοιχεία μιας εικόνας.
Εάν, για παράδειγμα, θέλετε να δώσετε μια εικόνα βαθμού αμφιβληστροειδούς με διπλάσιο αριθμό pixel ως τυπική εικόνα, θα ορίζετε την εικόνα του αμφιβληστροειδούς στο srcset, ακολουθούμενη από ένα κενό και στη συνέχεια τη λέξη "2x".
Έχουμε την εικόνα μας:
Για να προσθέσετε μια επιλογή αμφιβληστροειδούς για το πρόγραμμα περιήγησης, προσθέτουμε το ακόλουθο srcset:
Στην περίπτωση αυτή, υπάρχουν τρία πιθανά αποτελέσματα:
εάν το πρόγραμμα περιήγησης δεν υποστηρίζει srcset , θα χρησιμοποιήσει το αρχείο εικόνας που καθορίζεται στο χαρακτηριστικό src .
αν το πρόγραμμα περιήγησης υποστηρίζει το srcset και έχει μια οθόνη ικανή για διπλή ανάλυση, θα χρησιμοποιήσει την εικόνα που έχει καθοριστεί στο χαρακτηριστικό srcset.
εάν το πρόγραμμα περιήγησης υποστηρίζει το srcset αλλά δεν έχει μια οθόνη υψηλής ανάλυσης, θα χρησιμοποιήσει την εικόνα που καθορίστηκε στο χαρακτηριστικό src (όταν δεν έχει οριστεί εικόνα "1x" στο χαρακτηριστικό srcset , το χαρακτηριστικό src θεωρείται ότι είναι αυτή η εικόνα επιλογή).
Η υποστήριξη του προγράμματος περιήγησης είναι καλή και βελτιώνεται γρήγορα. Με ένα χαρακτηριστικό έχουμε λύσει το αίνιγμα των αποκριτικών εικόνων, yay εμείς!
Ένα τελευταίο πράγμα που πρέπει να σημειώσουμε για τον περιγραφέα x: η επιλογή της εικόνας για φόρτωση βασίζεται στην πυκνότητα των pixel, οπότε αν ένας χρήστης μεγεθύνει το πρόγραμμα περιήγησης στο 200% (μειώνοντας κατά το ήμισυ το μέγεθος της εικόνας και έτσι διπλασιάζοντας την πυκνότητα των εικονοστοιχείων) η εικόνα θα φορτωθεί. Αυτό μπορεί να έχει επιζήμια αποτελέσματα στην προσβασιμότητα - σίγουρα δεν θέλουμε να βλέπουμε τους ιστότοπους να φορτώνουν πιο αργά για τα άτομα με προβλήματα όρασης, απλά επειδή επιλέγουν να μεγεθύνουν τον περιηγητή τους.
Χρησιμοποιώντας τον περιγραφέα w
Ο περιγραφέας w είναι λίγο πιο προηγμένος από τον περιγραφέα x. Ο περιγραφέας w λειτουργεί λέγοντας στο πρόγραμμα περιήγησης πόσα πραγματικά pixel υπάρχουν στον άξονα x (το πλάτος) μιας συγκεκριμένης επιλογής εικόνας.
Το Edge, το Safari και το iOS Safari δεν υποστηρίζουν τον περιγραφικό κατά το χρόνο της γραφής, οπότε η χρησιμότητά του μειώνεται κάπως.
Ας επιστρέψουμε στην αρχική εικόνα μας:
Εάν η εικόνα αυτή είναι εγγενώς 1600 pixel και αν θέλουμε να προσθέσουμε μια εικόνα αμφιβληστροειδούς, όπως κάναμε με τον περιγραφέα x παραπάνω, θα καθορίσαμε μια εικόνα στο χαρακτηριστικό srcset πλάτους 3200 pixels:
Υπάρχει ένα μεγάλο gotcha με τον περιγραφέα w: αν και το χαρακτηριστικό src αντιμετωπίζεται ως προεπιλογή όταν καθορίζετε εικόνες χρησιμοποιώντας τον x-descriptor, αγνοείται εντελώς από προγράμματα περιήγησης που υποστηρίζουν srcset αν χρησιμοποιείτε τον w-descriptor. Όταν χρησιμοποιούμε τον περιγραφέα w , πρέπει να καθορίσουμε ρητά την προεπιλογή προσθέτοντας μια δεύτερη επιλογή εικόνας srcset με τον δικό της w-descriptor και χωρίζοντάς τις με κόμμα:
Αυτό μας οδηγεί με το χέρι ...
Χρησιμοποιώντας πολλές εικόνες
Το να είσαι σε θέση να καθορίσετε μια επιλογή εικόνας υψηλής ανάλυσης για το πρόγραμμα περιήγησης ακριβώς στον κώδικα HTML είναι σίγουρα δροσερό, αλλά όπως ίσως μαντέψατε, παίρνει ακόμη πιο δροσερό όταν καθορίζουμε πολλές εικόνες.
Ο στόχος των αποκριτικών εικόνων είναι να παραδώσει την καλύτερη ποιότητα εικόνας που μπορεί να χρησιμοποιήσει η συσκευή πρόσβασης, αλλά τίποτα περισσότερο. Έτσι, η απλή παροχή μιας εικόνας αμφιβληστροειδούς δεν είναι επαρκής, πρέπει να παρέχουμε εικόνες σε, για παράδειγμα, 1x, 1,5x, 2x, 2,5x και 3x.
Για άλλη μια φορά, εδώ είναι η αρχική εικόνα μας σήμανση:
Εδώ είναι με μια εικόνα βαθμού αμφιβληστροειδούς που παρέχεται ως επιλογή για το πρόγραμμα περιήγησης:
Εδώ είναι, αυτή τη φορά με επιπλέον επιλογές στο srcset, χωρισμένα με κόμματα:
Επειδή οι λέξεις-κλειδιά σημαίνουν διαφορετικά πράγματα σε διαφορετικούς ανθρώπους, θεωρώ σκόπιμο να ονομάσω τις εικόνες μου σύμφωνα με τον x περιγραφέα στον οποίο ανήκουν, τόσο ως βοήθημα προσωπικής μνήμης όσο και για να διασφαλιστεί ότι τα διαφορετικά μεγέθη είναι σαφή σε άλλα μέλη της ομάδας:
Θυμηθείτε, δεν λέμε στο πρόγραμμα περιήγησης ποια εικόνα θα εμφανίζεται, αφήνουμε να γνωρίζει τις επιλογές που είναι διαθέσιμες σε αυτήν και να της επιτρέπει να επιλέξει για τον εαυτό της. Το πρόγραμμα περιήγησης θα μεταφορτώσει μόνο μία από αυτές τις εικόνες.
Ένας gotcha με πολλαπλές εικόνες: μην καθορίζετε ποτέ δύο εικόνες στο χαρακτηριστικό srcset με ένα αντίστοιχο x-descriptor και w-descriptor, για παράδειγμα:
Το χαρακτηριστικό μεγέθους είναι μια ιδιαίτερα ενδιαφέρουσα προσθήκη στις προδιαγραφές, επειδή το χαρακτηριστικό μεγέθους παίρνει τις τιμές του σε σχέση με το παράθυρο προβολής και όχι με την εικόνα.
Χρησιμοποιώντας την τιμή vw (πλάτος προβολής), καθορίζουμε την περιοχή εικόνας σε σχέση με το πλάτος του προγράμματος περιήγησης - θυμηθείτε ότι το στοιχείο img είναι τώρα απλά ένα σύμβολο κράτησης θέσης, οπότε δεν καθορίζουμε το πραγματικό μέγεθος της εικόνας, καθορίζουμε μέγεθος του σύμβολο κράτησης θέσης που θα περιέχει την εικόνα.
100vw είναι το 100% του πλάτους προβολής, το 50vw είναι το 50% του πλάτους προβολής, το 25vw είναι το 25% του πλάτους προβολής κλπ.
Εάν θέλαμε να ορίσουμε το πλάτος img στο μισό του πλάτους του προγράμματος περιήγησης, θα χρησιμοποιούσαμε:
Αυτό δεν είναι ιδιαίτερα χρήσιμο, μέχρι να συνδυάσουμε τα ερωτήματα των μέσων μαζικής ενημέρωσης ...
Χρήση ερωτημάτων μέσων
Το χαρακτηριστικό μεγέθους γίνεται πολύ πιο ισχυρό όταν το συνδυάζουμε με ερωτήματα μέσων. Μπορούμε να διαχωρίσουμε πολλαπλά πλάτη προβολής χρησιμοποιώντας κόμματα και να πούμε στο πρόγραμμα περιήγησης το οποίο θα χρησιμοποιήσει χρησιμοποιώντας ένα ερώτημα μέσου στυλ CSS.
Για παράδειγμα, φανταστείτε ότι θέλουμε μια εικόνα να φτάνει το 80% του πλάτους του viewport μας στην πλειοψηφία των συσκευών, αλλά σε μικρές συσκευές (όπως τηλέφωνα) με πλάτος 380px ή λιγότερο, θέλουμε να αξιοποιήσουμε στο έπακρο διαθέσιμος χώρος με το 100% του πλάτους, θα γράψουμε ως εξής:
Ακολουθώντας αυτή τη λογική, κάθε πρόγραμμα περιήγησης με προβολή 380px ή λιγότερο θα καθορίσει το πλάτος της εικόνας στο 100% του παραθύρου προβολής. Οποιοδήποτε άλλο πρόγραμμα περιήγησης θα προκαλέσει την επιστροφή του ερωτήματος των μέσων ενημέρωσης και το πρόγραμμα περιήγησης θα μετακινηθεί στην επόμενη τιμή των χαρακτηριστικών μεγέθους , η οποία στην περίπτωση αυτή είναι 80vw.
Κατά γενικό κανόνα, δυσκολεύομαι να χρησιμοποιώ ερωτήματα μέσων σε HTML. Ακριβώς όπως τα δεδομένα απόκρισης εικόνας ανήκουν σε HTML (όχι JavaScript), τα ερωτήματα μέσων ανήκουν στο CSS (όχι στην HTML). Ωστόσο, η επιλογή είναι για εσάς αν το χρειάζεστε.
Αντιληπτή βέλτιστη πρακτική εικόνας (2016;)
Δεν ξέρω για σας, αλλά είμαι πολύ ενθουσιασμένος από τις δυνατότητες του srcset. Είναι μια απλή λύση σε ένα δύσκολο πρόβλημα και φαίνεται να παραδίδει ό, τι χρειαζόμαστε.
Αλλά, όπως και τα λεωφορεία, περιμένετε 20 χρόνια για μια επίσημη λύση για την απόκριση των εικόνων, και στη συνέχεια δύο εμφανίζονται αμέσως. Εκτός από το χαρακτηριστικό srcset του στοιχείου img , έχουμε επίσης το στοιχείο εικόνας .
Το στοιχείο εικόνας είναι ένα άλλο σύμβολο κράτησης θέσης, αν και πιο παραδοσιακό. Έχει σχεδιαστεί για να μιμείται τα στοιχεία βίντεο και ήχου στο HTML5, οπότε η σύνταξή του θα είναι εξοικειωμένη με τα περισσότερα. Το στοιχείο εικόνας προορίζεται να χρησιμοποιηθεί όταν χρειάζεστε περισσότερο έλεγχο από ό, τι μπορεί να προσφέρει το srcset .
Δυστυχώς, το στοιχείο εικόνας έχει πολύ λιγότερη υποστήριξη προγράμματος περιήγησης από το srcset και δεν αποτυγχάνει πάντοτε σιωπηλά.
Χρησιμοποιώντας το στοιχείο εικόνας
Εδώ είναι το αρχικό μας στοιχείο εικόνας:
Εδώ είναι η εικόνα μας φωτισμένη μέσα σε ένα στοιχείο εικόνας:
Μπορούμε επίσης να καθορίσουμε ένα srcset για ένα στοιχείο img μέσα σε ένα στοιχείο εικόνας :
Χρησιμοποιώντας το στοιχείο προέλευσης
Το στοιχείο εικόνας δεν ζωντανεύει μέχρι να προσθέσουμε το στοιχείο πηγής :
Όταν επιλέγετε το αρχείο που θα χρησιμοποιήσετε, το πρόγραμμα περιήγησης θα ξεκινήσει με το πρώτο στοιχείο προέλευσης και θα μετακινηθεί μέσα από τα στοιχεία μέχρι να βρει ένα από τα οποία το χαρακτηριστικό του μέσου θα επιλυθεί ως αληθές, τότε θα χρησιμοποιήσει το srcset του στοιχείου προέλευσης.
Για παράδειγμα, μπορούμε να καθορίσουμε διαφορετικές εικόνες για μορφές πορτρέτου και τοπίου:
Μπορούμε επίσης να ορίσουμε πολλαπλές εικόνες χρησιμοποιώντας τον περιγραφέα x και τον περιγραφέαw:
Όπως και με τη χρήση των ερωτημάτων μέσων στο χαρακτηριστικό μεγέθους , θα αμφισβητούσα τη σοφία του ελέγχου των εκδόσεων εικόνας με βάση το στυλ, στη σήμανση αντί για ένα φύλλο στυλ. Ωστόσο, η επιλογή χρήσης του χαρακτηριστικού πολυμέσων είναι εκεί εάν το χρειάζεστε.
Χρησιμοποιώντας τύπο
Το στοιχείο εικόνας έρχεται πραγματικά στη δική του όταν χρησιμοποιείται για να ανταλλάξουν διαφορετικούς τύπους εικόνων.
Φανταστείτε ότι έχουμε ένα τυπικό αρχείο PNG, αλλά θέλουμε να χρησιμοποιήσουμε ένα WebP αρχείο, το οποίο είναι συνήθως 26% μικρότερο - θυμηθείτε ότι οι εικόνες που ανταποκρίνονται είναι σχετικά με την καλύτερη δυνατή ποιότητα εικόνας, στο μικρότερο μέγεθος - αλλά προς το παρόν υποστηρίζονται μόνο από το Chrome, το Opera και το πρόγραμμα περιήγησης Android. Θα χρειαστεί να χρησιμοποιήσουμε το χαρακτηριστικό τύπου για να καθορίσουμε εάν υποστηρίζεται το WebP:
Σε αυτή την περίπτωση, το πρόγραμμα περιήγησης θα ελέγξει αν υποστηρίζεται η μορφή εικόνας WebP. Αν είναι, θα καθορίσει εάν η οθόνη έχει αρκετή πυκνότητα pixel για να εμφανίσει την εικόνα retina-image.webp , αν όχι θα εμφανίσει την εικόνα image.webp . Αν το WebP δεν υποστηρίζεται, το πρόγραμμα περιήγησης θα μεταβεί κατευθείαν στο στοιχείο img και θα λειτουργήσει μέσω των επιλογών srcset και src με τον τρόπο που γνωρίζουμε ήδη.
Το χαρακτηριστικό τύπου σημαίνει ότι μπορούμε να παρέχουμε πολύ μικρότερες μορφές εικόνας όπου υποστηρίζονται, με αποτέλεσμα μικρότερο μέγεθος αρχείου.
Γνωστά προβλήματα
IE9 έχει ένα γνωστό θέμα, που εμποδίζει την αποτυχία σιωπής του στοιχείου εικόνας. Για να μπορέσετε να χειριστείτε το IE9, πρέπει να παραπλανήσετε τον IE9 να σκεφτεί ότι τα στοιχεία προέλευσης αποτελούν μέρος ενός στοιχείου βίντεο :
< !—[if IE 9]>< ![endif]—>
Είναι μια άσχημη λύση, αλλά καλύτερα από καμία λύση καθόλου. Μπορούμε μόνο να ελπίζουμε ότι η κυκλοφορία των Windows 10 θα επιταχύνει την κατάρρευση του IE9, γιατί ενώ το Edge δεν υποστηρίζει ακόμα το στοιχείο εικόνας , δεν το υποστηρίζει με τον σωστό τρόπο (αγνοώντας το).
Υπάρχουν polyfills που μπορεί να σας βοηθήσει να υποστηρίξετε το στοιχείο εικόνας στο IE, αλλά η δική μου προτίμηση είναι να τα αποφύγετε. Δεν εμπιστεύομαι προβλήματα με το JavaScript, επηρεάζει την απόδοση και οδηγεί σε λιγότερο διατηρήσιμο κώδικα.
Για το λόγο αυτό, προτείνω να αποφύγετε τώρα το στοιχείο εικόνας . Εάν δεν εκτελείτε έναν ιστότοπο ηλεκτρονικού εμπορίου μεγάλης κλίμακας, η πρόσθετη εξοικονόμηση χρόνου λήψης που προσφέρει η μορφή WebP είναι απίθανο να αντισταθμίσει την αναστάτωση της επιδιόρθωσης της σήμανσης σας με δέσμη ενεργειών.
Μόλις ο IE9 πέσει κάτω από 1%, κάτι που θα συμβεί σε κάποιο σημείο του επόμενου έτους, το στοιχείο εικόνας θα καταστεί βιώσιμο. Αν το διαβάζετε αυτό το 2016, ίσως είναι καλό να πάτε.
Δημιουργία ευαίσθητων εικόνων
Σε αντίθεση με το SVG, οι εικόνες bitmap δεν αυξάνονται. Η στρατηγική μας για το χειρισμό τους, είτε χρησιμοποιούμε το srcset είτε το στοιχείο εικόνας , είναι να παρέχουμε μια διαφορετική εικόνα με βάση τις δυνατότητες του προγράμματος περιήγησης. Για να το χειριστούμε αυτό, πρέπει να παρέχουμε μια ποικιλία διαφορετικών μεγεθών εικόνας.
Οι περισσότερες εφαρμογές επεξεργασίας εικόνας έχουν αυτοματοποιήσει τη διαδικασία εξαγωγής πολλαπλών εκδόσεων μιας μόνο εικόνας. Δεν έχει σημασία ποια εφαρμογή χρησιμοποιείτε, αρκεί να καταλήγετε σε πολλαπλά μεγέθη εικόνων χωρίς να χρειαστεί να αλλάξετε το μέγεθος και να αποθηκεύσετε το καθένα.
Το Adobe Photoshop είναι ο de facto επεξεργαστής bitmap. Δεν είναι μια μεγάλη επιλογή για το έργο του σχεδιασμού, αλλά η δουλειά επεξεργασίας εικόνας είναι ομαλή και αξιόπιστη. Η δημιουργία πολλαπλών αναλύσεων εικόνας στο Photoshop είναι σχετικά απλή:
Ανοίξτε την εικόνα που θέλετε να δημιουργήσετε πολλαπλές εκδόσεις της και τοποθετήστε την στο δικό της στρώμα.
Μετονομάστε το επίπεδο ως το όνομα του αρχείου που θέλετε να δημιουργήσετε (συμπεριλαμβανομένης της επέκτασης).
Επιλέξτε File> Generate> Image Assets και ένας φάκελος με τη νέα σας εικόνα θα αποθηκευτεί μαζί με το PSD σας.
Μετονομάστε το στρώμα, καθορίζοντας κάθε εικόνα που θέλετε να δημιουργήσετε και ακολουθώντας την επιθυμητή κλίμακα. Δεν χρειάζεται να επαναλάβετε το βήμα 3, αφού μετονομάσετε το στρώμα, οι εικόνες θα δημιουργηθούν αυτόματα.
Η πίστωση για την εικόνα πηγαίνειPhilip Collier.
Για περισσότερες πληροφορίες σχετικά με τη δημιουργία εικόνων στο Photoshop, Δες εδώ.
Με βάση αυτές τις εικόνες, μπορούμε να προσφέρουμε στο πρόγραμμα περιήγησης πέντε διαφορετικές επιλογές:
συμπέρασμα
Το στοιχείο img έχει προχωρήσει πολύ σε 20 χρόνια. Ή, για να είμαστε ακριβέστεροι, το στοιχείο img ήταν ανεπαρκές για 18 χρόνια, στη συνέχεια σπρίνισε για τη γραμμή τα τελευταία δύο χρόνια, στο σημείο ότι είναι σχετικά σχετικά εξελιγμένο.
Το σημαντικό είναι ότι φτάσαμε στις λύσεις.
Από τις δύο διαθέσιμες επιλογές, srcset και εικόνα, η πρώτη είναι κατά πολύ η πιο υποστηριζόμενη. Εάν κατασκευάζετε το 95% των τοποθεσιών εκεί έξω, τότε η ανώτερη υποστήριξη και η απλούστερη εφαρμογή του χαρακτηριστικού srcset είναι η καλύτερη επιλογή σας.
Εάν εκτελείτε έναν μεγάλο ιστότοπο ηλεκτρονικού εμπορίου, με χιλιάδες εικόνες προϊόντων, η επιπλέον εργασία για την εξυπηρέτηση της μορφής WebP μπορεί να αξίζει τον κόπο, ειδικά καθώς η υποστήριξη για το στοιχείο εικόνας αυξάνεται τα επόμενα δύο χρόνια.
Η μεγαλύτερη αδυναμία στις τρέχουσες επιλογές είναι ότι τα προγράμματα περιήγησης δεν έχουν προς το παρόν έναν τρόπο επιλογής μιας εικόνας με βάση την ταχύτητα σύνδεσης τους. Είμαστε αναγκασμένοι να εμπιστευθούμε ότι οι πιο ικανές συσκευές βρίσκονται επίσης σε ανώτερες συνδέσεις.
Τελικά, μπορούμε επιτέλους να εξυπηρετήσουμε τις εικόνες υψηλότερης ποιότητας, πρακτικά εφικτές, στο μικρότερο μέγεθος. Αυτό σημαίνει μια καλύτερη εμπειρία, σε μικρότερο χρονικό διάστημα, που μπορεί να είναι κάτι που πρέπει να αγκαλιάσετε.
Οι επιλεγμένες εικόνες χρησιμοποιούν,εικόνα βουνώνκαιεικόνα της συσκευήςμέσω Shutterstock.
