Προσαρμοσμένες εικόνες: Επίλυση του προβλήματος των ευαίσθητων εικόνων

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

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

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

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

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

Το παρελθόν

Η ιστοσελίδα της Boston Globe είναι ένα κλασικό παράδειγμα υγρού σχεδιασμού.

Πριν προχωρήσουμε περαιτέρω, πρέπει να εξετάσουμε πώς συμπεριφέρεται μια ιστοσελίδα ώστε να μπορούμε να μιλάμε για το πώς λειτουργεί. Μια γρήγορη ανασκόπηση: η HTML φορτώνεται διαδοχικά, κατόπιν ζητούνται οι πόροι αμέσως μόλις συναντηθούν, τα scripts εκτελούνται αμέσως και στη συνέχεια όλα τα cookies αποστέλλονται με αιτήματα HTTP.

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

Αντικατάσταση του χαρακτηριστικού "src"

Μπορούμε να χρησιμοποιήσουμε το javascript για να ξαναγράψουμε το χαρακτηριστικό "src", έτσι ώστε να τραβήξει και να αντικαταστήσει μια εικόνα με βάση το μέγεθος του προγράμματος περιήγησης, το οποίο φαίνεται να λειτουργεί καλά. Αυτό ήταν αυτό που πολλοί άνθρωποι χρησιμοποίησαν στο παρελθόν. Το πρόβλημα με αυτό είναι ότι χρησιμοποιεί ένα διπλό αίτημα HTTP. Αρχικά, τραβά την αρχική εικόνα και στη συνέχεια την αντικαθιστά με την εικόνα javascript'd. Εσείς ουσιαστικά κάνετε περισσότερα από ό, τι θα κάνατε αν δεν κάνατε τίποτα, αν και έχει την εμφάνιση εργασίας.

Υπάρχουν λύσεις για αυτό; Υπάρχουν, πράγματι!

Υπάρχει μια μέθοδος που πολλοί άνθρωποι χρησιμοποιούν όταν βάζουμε μια εικόνα 1px gif στην τοποθεσία αντί της πραγματικής εικόνας, έτσι ώστε αντί να τραβήξετε δύο εικόνες για την τιμή των δύο, παίρνετε ουσιαστικά δύο για την τιμή ενός - αλλά αυτό δεν είναι ούτε ιδανικό. Σε αυτήν την περίπτωση κάνετε ακόμα δύο αιτήσεις HTTP.

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

Noscript

Μια άλλη μέθοδος που έχει κερδίσει κάποια δημοτικότητα είναι να χρησιμοποιήσετε την ετικέτα "noscript" για κινητές εικόνες και στη συνέχεια να χρησιμοποιήσετε javascript για να την ανταλλάξετε για μια εικόνα υψηλότερης ανάλυσης. Αυτό φαινόταν να πάρει την κοινότητα από την καταιγίδα λίγο καιρό λόγω της δυνατότητας να ανταλλάξουν από τις κινητές μέχρι τις high-res εκδόσεις, και αυτό συνέπεσε πραγματικά με την ευρεία παρερμηνεία του «κινητού πρώτα» που ανέφερα παραπάνω. Αυτό δεν λειτουργεί στο IE. Για μια λύση του Internet Explorer θα πρέπει να γράψετε τα εξής:

Αλλά το πρόβλημα με αυτό είναι ότι τώρα δεν λειτουργεί στο δημοφιλές web browser Firefox. Αυτό που πρέπει να κάνουμε είναι:

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

Συνήθως αυτό που έχουν κάνει χρησιμοποιείται κάποιο είδος javascript για να δουλέψει το πρόβλημα και αποδέχθηκε το διπλό αίτημα http ως απαραίτητο κακό.

Λύση διακομιστή πλευρά;

Η τυπική λύση διακομιστή για αυτό είναι να χρησιμοποιήσετε το javascript για να αντικαταστήσετε το "src" με το HTML5 "-data-highsrc" και να αποθηκεύσετε το μέγεθος του προγράμματος περιήγησης σε ένα cookie. Αν και, στη συνέχεια, στέλνει τα ίδια πολλαπλά αιτήματα HTTP όπως και πριν.

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

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

Και αυτό είναι ακριβώς όπου το προσαρμοστικές εικόνες τα βήματα της μεθόδου.

Η μέθοδος προσαρμοστικών εικόνων

Προσαρμοσμένες εικόνες είναι η αληθινή λύση σε ολόκληρο αυτό το αίνιγμα. Είναι κυριολεκτικά τόσο εύκολη όσο μια μεταφορά και απόθεση στο διακομιστή σας και όλοι είστε έτοιμοι. Αυτή η προσαρμοστική μέθοδος χρησιμοποιεί ένα αρχείο htaccess, ένα αρχείο php και μία γραμμή javascript, και αυτό είναι .

Απλά σύρετε το αρχείο htaccess και php στον ριζικό κατάλογό σας και προσθέστε το javascript στο κεφάλι του αρχείου ευρετηρίου και είστε πλήρεις. Τίποτα άλλο που να μην ανησυχεί καν. Τώρα, προσφέρει έναν τόνο προσαρμογής, αλλά θα το πλησιάσουμε στο τέλος.

Προς το παρόν ας πηδήσουμε στην αρχή της προσαρμοστικής μεθόδου.

Οι στόχοι

Πρώτα ας προσδιορίσουμε τους στόχους του έργου. Ο δημιουργός των προσαρμοστικών εικόνων, Μάθιου Γουίλκοξ , τα εντόπισε ως στόχους του για τη λύση αυτή:

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

Και αυτοί οι στόχοι για το έργο αυτό βασίζονται στην υπόθεση ότι το

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

Πως δουλεύει

Είμαστε έτοιμοι να βουτήξουμε στον κώδικα, αλλά πριν μιλήσουμε για το πώς λειτουργεί σε υψηλότερο επίπεδο. Με απλά λόγια, το javascript ανιχνεύει τις μεγαλύτερες διαστάσεις οθόνης που είναι διαθέσιμες σε αυτήν τη συσκευή και τις αποθηκεύει σε ένα cookie. Το αρχείο .htaccess στη συνέχεια υποδεικνύει ορισμένα αιτήματα σε προσαρμοστικά images.php και στη συνέχεια βασίζεται σε αυτούς τους κανόνες το αρχείο PHP κάνει κάποια επεξεργασία. Μέσα σε εκείνη την επεξεργασία βρίσκεται η πραγματική μαγεία και με κάθε τρόπο θα πρότεινα όλους να διαβάσουν αυτό το check out το αρχείο PHP. Είναι η πιο όμορφη γραπτή PHP που έχω δει εδώ και χρόνια . Είναι σίγουρα ένα must-see.

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

Ο κώδικας javascript

Ο κώδικας javascript που θα χρειαστεί να αντιγράψετε είναι αυτός:

Και πρέπει να προχωρήσετε πριν από οποιαδήποτε άλλη javascript στο τμήμα κεφάλι σας . Αξίζει επίσης να σημειωθεί ότι αν θέλετε να επωφεληθείτε από την προβολή του αμφιβληστροειδούς σε οποιοδήποτε από τα πιο πρόσφατα προϊόντα της Apple τότε μπορείτε να χρησιμοποιήσετε την παρακάτω γραμμή javascript:

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

Σημειώστε ότι αυτό πρέπει ακόμα να είναι το πρώτο javascript στο τμήμα κεφάλι σας.

Το αρχείο .htaccess

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

Options +FollowSymlinksRewriteEngine On# Adaptive-Images ----------------------------------------# Add any directories you wish to omit from the Adaptive-Images process on a new line, as follows:# RewriteCond %{REQUEST_URI} !some-directory# RewriteCond %{REQUEST_URI} !another-directoryRewriteCond %{REQUEST_URI} !assets# Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above directories# to adaptive-images.php so we can select appropriately sized versionsRewriteRule .(?:jpe?g|gif|png)$ adaptive-images.php# END Adaptive-Images ----------------------------------------

Τώρα, το ενδιαφέρον κομμάτι αυτού είναι ότι πραγματικά δεν χρειάζεται να κάνετε καμία αλλαγή καθόλου.

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

Το αρχείο PHP

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

/* CONFIG ------------------------------ */$resolutions = array(1382, 992, 768, 480); // the resolution break-points to use (screen widths, in pixels)$cache_path = "ai-cache"; // where to store the generated re-sized images. Specify from your document root!$jpg_quality = 80; // the quality of any generated JPGs on a scale of 0 to 100$sharpen  = TRUE; // Shrinking images can blur details, perform a sharpen on re-scaled images?$watch_cache = TRUE; // check that the adapted image isn't stale (ensures updated source images are re-cached)$browser_cache = 60*60*24*7; // How long the BROWSER cache should last (seconds, minutes, hours, days. 7days by default)/* END CONFIG ------ Don't edit anything after this line unless you know what you're doing -------------- */

Όπως λέει για το υπόλοιπο σενάριο, αν δεν ξέρετε τι κάνετε, τότε γιατί να μην το αφήσετε μόνο του; Σε περίπτωση που σας αρέσει να τραγουδάμε, ας ρίξουμε λίγο φως εδώ.

Οι αναλύσεις $ είναι τα πλάτη της οθόνης με τα οποία θα εργαστούμε. Στην προεπιλογή, θα αποθηκεύσει μια εικόνα μεγέθους για μεγάλες οθόνες, κανονικές οθόνες, δισκία, τηλέφωνα και μικροσκοπικά τηλέφωνα.

$ cache_path αν δεν σας αρέσουν οι αποθηκευμένες εικόνες που είναι γραμμένες σε αυτό το φάκελο, μπορείτε να το βάλετε κάπου αλλού. Απλώς βάλτε τη διαδρομή στο φάκελο εδώ και βεβαιωθείτε ότι το δημιουργήσετε στο διακομιστή.

Η ακρίβεια του $ θα εκτελέσει μια λεπτή ακόνισμα στις αναβαθμισμένες εικόνες. Συνήθως αυτό είναι καλό, αλλά μπορεί να θέλετε να το απενεργοποιήσετε εάν ο διακομιστής σας είναι πολύ απασχολημένος.

$ watch_cache αν ο διακομιστής σας είναι πολύ απασχολημένος μπορεί να βοηθήσει στην απόδοση για να το μετατρέψει σε FALSE. Θα σημάνει όμως ότι θα πρέπει να εκκαθαρίσετε με μη αυτόματο τρόπο τον κατάλογο cache αν αλλάξετε έναν πόρο.

Τώρα που γνωρίζετε όλα σχετικά με την προσαρμογή μπορεί να είστε περίεργοι, τι ακριβώς κάνει το αρχείο PHP ακριβώς; Λοιπόν, ας το περάσουμε βήμα προς βήμα:

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

Το αρχείο ai-cookie.php

Παίρνετε επίσης αυτό το αρχείο "ai-cookie.php" στο φάκελό σας όταν κάνετε λήψη του πακέτου προσαρμοστικών εικόνων, αλλά αυτό μπορεί πραγματικά να διαγραφεί, καθώς έχει να κάνει με μια εναλλακτική μέθοδο ανίχνευσης του μεγέθους της οθόνης των χρηστών. Ο δημιουργός των προσαρμοσμένων εικόνων σας συνιστά να διαγράψετε αυτό και να πάτε με την τυπική μέθοδο.

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

Στην σύνοψη:

Είναι σίγουρα ένα συναρπαστικό σύστημα και αυτό που προβλέπω ότι θα χρησιμοποιούμαι για τα επόμενα χρόνια. Πρώτον, τι ακριβώς μπορώ να προσαρμόσω με αυτό το σύστημα ως σύνολο;

Με αυτό το σύστημα μπορείτε:

• Ορίστε σημεία διακοπής για να ταιριάζει με το CSS.
• Καθορίστε πού θέλετε το φάκελο προσωρινής μνήμης.
• Ορίστε την ποιότητα των παραγόμενων JPGs.
• Ορίστε σε ποιο χρονικό διάστημα θα πρέπει να αποθηκευτούν στην μνήμη οι εικόνες από το πρόγραμμα περιήγησης.
• Υποτονικά σχηματίζουν εικόνες.
• Εναλλακτικό javascript για την ανίχνευση συσκευών DPI υψηλού επιπέδου.

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

Επίσκεψη adaptive-images.com για να κατεβάσετε τα αρχεία που ανέφερα σε αυτό το άρθρο.