Ο Eric Portis με παίρνει μαζί μου για να ανακαλύψω τον κόσμο των απαντητικών εικόνων.
Ξεκινάμε από τα βασικά. Οι αποκριτικές εικόνες είναι συγκεκριμένα εικόνες σε HTML και υπάρχουν λόγω της επιθυμίας για καλύτερη απόδοση. Οι εικόνες είναι πιθανώς ο μεγαλύτερος ένοχος στο συνολικό βάρος των ιστότοπων. Εάν αποφύγουμε να στείλουμε πάρα πολλά pixel στο δίκτυο, θα πρέπει. Σε τελική ανάλυση, μια οθόνη με πλάτος μόνο 720 εικονοστοιχεία δεν χρειάζεται εικόνα πλάτους 2.000 εικονοστοιχείων, ακόμα κι αν είναι οθόνη 2x.
Το πρόβλημα είναι ότι τα προγράμματα περιήγησης είναι πραγματικά επιθετικά όσον αφορά τη λήψη στοιχείων όπως εικόνες. Αυτό είναι καλό, γιατί είναι ο Ιστός (μπορεί να είναι) όσο πιο γρήγορα είναι. Αλλά αυτό σημαίνει επίσης ότι πρέπει να παρέχουμε πολλές πληροφορίες σχετικά με τις εικόνες μας απευθείας στο HTML. Δεν μπορεί απλώς να γνωρίζει ένα πρόγραμμα περιήγησης πόσο μεγάλη είναι μια εικόνα; Σίγουρα μπορεί, αφού το κατεβάσει. Δεν μπορεί ένα πρόγραμμα περιήγησης να γνωρίζει πόσο μεγάλη εικόνα θα εμφανίζεται στη σελίδα; Σίγουρα μπορεί, αφού κατεβάσει όλο το CSS και εκτελέστηκε διάταξη. Η σύνταξη αποκριτικών εικόνων προσπαθεί να ξεπεράσει όλα αυτά παρέχοντας αυτές τις πληροφορίες απευθείας στη σύνταξη. Το να καταλάβεις ότι η σύνταξη είναι δύσκολη! Υπάρχει srcset, sizesκαι το στοιχείο, και υπάρχει ένας τόνος για να τυλίξετε το μυαλό σας γύρω από εκεί.
Παίρνει ακόμη πιο περίπλοκο.
Η σύνταξη που πρέπει να δημιουργήσετε βασίζεται στο ότι έχετε πολλά αντίγραφα αυτής της εικόνας για να δημιουργήσετε τη σύνταξη γύρω. Πώς τα φτιάχνεις; Πόσα πρέπει να κάνετε; Τι μέγεθος πρέπει να είναι;
Ευτυχώς, υπάρχουν κάποια αυτοματοποιημένα εργαλεία που εμφανίζονται γύρω από τις εικόνες που ανταποκρίνονται. Το WordPress ήταν ένας πρώτος παίκτης. Εκτός του πλαισίου, το WordPress θα δημιουργήσει πολλές εκδόσεις των εικόνων που ανεβάζετε και εξάγετε srcsetσύνταξη. Αλλά μπορείτε να κάνετε πολύ καλύτερα. Μπορείτε να παράσχετε ένα sizesχαρακτηριστικό που ταιριάζει πραγματικά με το τι κάνει το θέμα σας και πώς το μέγεθος αυτών των εικόνων.
Επίσης, το WordPress δεν χρησιμοποιεί καμία ειδική ευφυΐα για τη δημιουργία πολλαπλών αντιγράφων των εικόνων που ανεβάζετε. Όμως, θα μπορούσε. Ένα εργαλείο όπως η αποκριτική γεννήτρια σημείων διακοπής εικόνας χρησιμοποιεί κάποια ευφυΐα για να υπολογίσει πόσες διαφορετικές εικόνες μπορείτε να φτιάξετε, ώστε να μπορείτε να επιτύχετε μια ισορροπία ανάμεσα στο να έχετε κοντά στην τέλεια εικόνα για την εργασία και να μην χρειάζεται να κάνετε εκατοντάδες ή χιλιάδες αντίγραφα το. Αυτό το εργαλείο έχει ένα API!
Παίρνει ακόμη πιο περίπλοκο.
Διαφορετικά προγράμματα περιήγησης υποστηρίζουν διαφορετικές μορφές εικόνας. Για παράδειγμα, WebP. Υπάρχουν εξοικονομήσεις απόδοσης που εξυπηρετούνται με την παροχή της σωστής μορφής εικόνας στο σωστό πρόγραμμα περιήγησης. Η σύνταξη αποκριτικών εικόνων μπορεί να βοηθήσει με αυτό, αλλά περιπλέκει τη σύνταξη. Πολλές μορφές εικόνας έχουν επίσης την έννοια της ποιότητας. Σε ποια ποιότητα αποθηκεύετε αυτά τα πολλαπλά αντίγραφα;
Σε αυτό το σημείο, είναι καλή στιγμή να αναφέρετε το Cloudinary. Το έχω ενσωματώσει τώρα στο CSS-Tricks και βοηθά με πολλά από αυτά τα πράγματα. Πρέπει να αναφέρω ότι είμαι πληρωμένος πελάτης Cloudinary και αυτό το screencast δεν χρηματοδοτήθηκε, αλλά η Cloudinary έχει υποστηρίξει CSS-Tricks με τη μορφή δύο εξαιρετικά σχετικών αναρτήσεων:
- Αποκριτικές εικόνες στο WordPress με Cloudinary, Μέρος 1
- Αποκριτικές εικόνες στο WordPress με Cloudinary, Μέρος 2
Με λίγα λόγια, εδώ είναι πώς όλα λειτουργούν τώρα στο CSS-Tricks:
- Ανεβάζω εικόνες όπως πάντα με το WordPress.
- Αντί για τις
srcsetπληροφορίες που δημιουργούνται με το WordPress, παράγονται από αυτό το εξυπνότερο API. - Η εικόνα μεταφορτώνεται επίσης στο Cloudinary.
- Όταν το WordPress φιλτράρει και εξάγει το HTML για τις εικόνες, εφαρμόζονται όλα αυτά τα καλά
srcset(και προσαρμοσμέναsizes) δεδομένα. Το σημείο της διεύθυνσης URL προς τα Cloudinary URLs. - Το Cloudinary URL κάνει χρήση της δυνατότητας του Cloudinary να προσαρμόζει αυτόματα τόσο τη μορφή όσο και την ποιότητα αυτόματα (χρησιμοποιώντας τη φανταστική τεχνολογία τους) για να βεβαιωθείτε ότι τα πράγματα είναι τα καλύτερα που μπορούν να είναι για το συγκεκριμένο πρόγραμμα περιήγησης που ζητά την εικόνα.
- Οι παλιές εικόνες που δεν μεταφορτώθηκαν στο Cloudinary αρχικά εξακολουθούν να ωφελούνται από όλη την καλοσύνη του Cloudinary. Δεν έχουν τόσο έξυπνα
srcsetδεδομένα, αλλά εξακολουθούν να χρησιμοποιούν τη «διεύθυνση URL» που σημαίνει ότι μπορούν να επωφεληθούν από την αυτόματη μορφοποίηση και την αυτόματη ποιότητα (που είναι πιθανώς ένα αξιοπρεπές κομμάτι της βελτίωσης της απόδοσης, ούτως ή άλλως).
Εν ολίγοις, όχι μόνο χρησιμοποιώ εικόνες απόκρισης εδώ στο CSS-Tricks για να βοηθήσω στην απόδοση, αλλά και η ενσωμάτωση Cloudinary σε αυτό το παιχνίδι.
Είμαι επίσης χαρούμενος που δεν είναι μια σκληρή εξάρτηση. Εάν η προσθήκη Cloudinary είναι ποτέ απενεργοποιημένη, όλα πηγαίνουν πίσω σε κανονικές εικόνες που ανταποκρίνονται στο WordPress.