Ενώ οι κινητές συσκευές και δισκίο Καθώς πλησιάζουν τελικά στην παγκόσμια κυριαρχία, η τεχνολογία Ιστού είναι στον αγώνα για να φιλοξενήσει τους συνεχώς αυξανόμενους αριθμούς σε μέγεθος οθόνης. Ωστόσο, η επινόηση εργαλείων για να συμβαδίσει με αυτό το φαινόμενο μας φέρνει ένα εντελώς νέο σύνολο προβλημάτων, με μια από τις τελευταίες λέξεις που αναδύονται: 'Web responsive' . Αυτή είναι η πρόκληση να κάνει το Διαδίκτυο να λειτουργεί στη συντριπτική πλειοψηφία, αν όχι σε όλες, συσκευές χωρίς να μειώνεται η ποιότητα της εμπειρίας του χρήστη. Αντί να σχεδιάζει περιεχόμενο που ταιριάζει σε επιτραπέζιο ή φορητό υπολογιστή, οι πληροφορίες πρέπει να είναι διαθέσιμες για κινητά τηλέφωνα, tablet ή οποιαδήποτε επιφάνεια είναι συνδεδεμένη στον Ιστό. Ωστόσο, αυτή η εξέλιξη του σχεδιασμός ιστοσελίδων προσαρμοζόμενος σε συσκευές Έχει αποδειχθεί δύσκολο και μερικές φορές οδυνηρό.

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

Στην Ανταποκριτική Αναζήτηση Εικόνας για τον Ιστό

Σε αυτό το σημείο, οι προγραμματιστές και οι σχεδιαστές μπορούν να διασφαλίσουν ότι η φόρτωση του ιστότοπού τους είναι βελτιστοποιημένη για χρήστες σε ιστότοπους για κινητά. Περισσότερο από το 20% της επισκεψιμότητας στον Ιστό Τώρα προέρχεται από χρήστες κινητών και ο αριθμός αυξάνεται. Με τη λήψη εικόνων μεταξύ των μεγαλύτερων κομματιών περιεχομένου δεδομένων, το μέγεθος έχει καταστεί προτεραιότητα, συμπεριλαμβανομένων λύσεων από διακομιστή και front-end. Για να συζητήσουμε αυτές τις λύσεις διόρθωσης μεγέθους, πρέπει πρώτα να κατανοήσουμε τις τρέχουσες αδυναμίες της σύνδεσης εικόνων.

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

Δεν μπορούμε απλώς να βάλουμε όλα τα μεγέθη εικόνας που περιλαμβάνονται στο HTML και να χρησιμοποιήσουμε κανόνες CSS για να βάλουμε display:none για όλα εκτός από τη σωστή εικόνα; Αυτή είναι η πιο λογική λύση σε έναν τέλειο λογικό κόσμο. Αλλά με αυτόν τον τρόπο τα προγράμματα περιήγησης μπορούν να αγνοήσουν όλες τις εικόνες που δεν έχουν εκτεθεί και θεωρητικά να μην τις κατεβάσουν. Ωστόσο, τα προγράμματα περιήγησης έχουν βελτιστοποιηθεί πέρα ​​από την κοινή λογική. Για να γίνει η απόδοση της σελίδας όσο το δυνατόν γρηγορότερη, το πρόγραμμα περιήγησης κάνει προεπισκόπηση συνδεδεμένου περιεχομένου, ακόμη και πριν από την πλήρη φόρτωση των φύλλων στυλ και των αρχείων JavaScript. Αντί να αγνοήσουμε τις μεγάλες εικόνες επιφάνεια εργασίας , καταλήξαμε να κατεβάσουμε όλες τις εικόνες, με αποτέλεσμα να φορτωθεί μια πολύ μεγαλύτερη σελίδα. Η τεχνική μόνο για CSS λειτουργεί μόνο για εικόνες που προορίζονται ως φόντο, επειδή μπορούν να ρυθμιστούν σε φύλλα στυλ (χρησιμοποιώντας ερωτήματα πολυμέσων ).

Τι πρέπει λοιπόν να κάνει ένας ιστότοπος;

Λύσεις Back-End για δυνατότητα κλιμάκωσης εικόνας

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

Προσαρμόσιμες εικόνες

Ωστόσο, ορισμένες δευτερεύουσες λύσεις διακομιστή αξίζει να εξεταστούν. Προσαρμόσιμες εικόνες είναι μια εξαιρετική λύση για εκείνες τις προτιμώμενες συστοιχίες εικόνας που ανταποκρίνονται στο πίσω μέρος. Δεν απαιτεί κανένα σήμανση ειδική αλλά από την άλλη πλευρά χρησιμοποιεί ένα μικρό αρχείο JavaScript και κάνει το μεγαλύτερο μέρος της ανύψωσης στο αρχείο backend. Χρησιμοποιεί PHP και έναν διαμορφωμένο διακομιστή nginx. Επίσης, δεν βασίζεται σε καμία παρακολούθηση UA και ελέγχει το πλάτος της οθόνης. Οι προσαρμοστικές εικόνες λειτουργούν καλά για κλιμάκωση εικόνων, αλλά είναι επίσης χρήσιμες όταν χρειάζονται μεγάλες εικόνες ΚΑΛΛΙΤΕΧΝΙΚΗ ΕΠΙΜΕΛΕΙΑ Για παράδειγμα, μείωση εικόνας με τεχνικές όπως περικοπή και περιστροφή, όχι μόνο κλιμάκωση.

Αγγίξτε Sencha

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

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

Λύσεις διεπαφής

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

Το στοιχείο Έχει εισαχθεί και εγκριθεί στις προδιαγραφές HTML5 από το W3C. Προς το παρόν δεν είναι διαθέσιμο σε όλα τα προγράμματα περιήγησης, αλλά δεν θα περάσει πολύ πριν συμβεί αυτό. Μέχρι τότε, στηριζόμαστε πολυπληρώματα Javascript για το στοιχείο. Τα Polyfills είναι επίσης μια εξαιρετική λύση για προγράμματα περιήγησης παλαιού τύπου που δεν διαθέτουν αυτό το στοιχείο.

Υπάρχει επίσης η περίπτωση χαρακτηριστικό srcset Χαρακτηριστικό το οποίο είναι διαθέσιμο σε διάφορα WebKits βασισμένα στο πρόγραμμα περιήγησης για το στοιχείο . Αυτό μπορεί να χρησιμοποιηθεί χωρίς καμία JavaScript και είναι μια εξαιρετική λύση εάν αγνοούνται προγράμματα περιήγησης που δεν είναι webKit. Είναι ένας καλός προσωρινός πόρος για τη σπάνια περίπτωση όπου άλλες λύσεις δεν είναι αρκετές, αλλά δεν πρέπει να θεωρηθεί μια ολοκληρωμένη λύση.

οικιακός διακομιστής raspberry pi 2018

Συμπλήρωση εικόνων

Συμπλήρωση εικόνων είναι ένα βιβλιοπωλείο polyfill για το στοιχείο. Είναι μια από τις πιο δημοφιλείς βιβλιοθήκες στη δέσμη λύσεων front-end για επεκτασιμότητα εικόνας και σχετικά ζητήματα. Υπάρχουν δύο εκδόσεις. Το Picturefill v1 μιμείται το στοιχείο χρησιμοποιώντας span ενώ το Picturefill v2 χρησιμοποιεί το στοιχείο μεταξύ των προγραμμάτων περιήγησης που το έχουν ήδη και παρέχει polyfill για παλαιού τύπου, (π.χ. για IE> = IE9). Εχει κάποια περιορισμοί και παρεμβολές , κυρίως για το Android 2.3 - το οποίο παρεμπιπτόντως είναι ένα παράδειγμα του πώς το img srcset έρχεται στη διάσωση. Εδώ είναι ένα δείγμα του σήμανση για χρήση του Picturefill v2:

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

Imager.js

Imager.js είναι μια βιβλιοθήκη που δημιουργήθηκε από την ομάδα του Ειδήσεις BBC για να επιτευχθεί ότι οι αποκριτικές εικόνες είχαν διαφορετική προσέγγιση από αυτήν που χρησιμοποιήθηκε στο Picturefill. Ενώ προσπαθεί να φέρει το στοιχείο σε μη υποστηριζόμενα προγράμματα περιήγησης, το Imager.js επικεντρώνεται στη λήψη μόνο των κατάλληλων εικόνων, ενώ εξετάζει τις ταχύτητες δικτύου. Περιλαμβάνει επίσης τεμπέλης φόρτωση χωρίς να βασίζεται σε εξωτερικές πηγές βιβλιοθηκών. Λειτουργεί με την τοποθέτηση στοιχείων placeholder και αντικαταστήστε τα με στοιχεία. Ο κώδικας που φαίνεται παρακάτω δείχνει αυτήν τη συμπεριφορά:

new Imager({ availableWidths: [480, 768, 1200] });

Το τετηγμένο HTML θα μοιάζει με αυτό:

new Imager({ availableWidths: [480, 768, 1200] });

Η υποστήριξη του προγράμματος περιήγησης είναι πολύ καλύτερη από το Picturefill με κόστος να είναι μια πιο ρεαλιστική λύση από μια προοδευτική.

Αναδιάταξη πηγής

Αναδιάταξη πηγής προσεγγίζει αυτό το πρόβλημα από μια ελαφρώς διαφορετική γωνία από τις υπόλοιπες βιβλιοθήκες front-end. Μοιάζει με κάτι που σκέφτεται το «πρώτο κινητό» στο σχολείο, όπου εξυπηρετεί τη μικρότερη δυνατή ανάλυση από προεπιλογή. Ανιχνεύοντας ποια συσκευή έχει τη μεγαλύτερη οθόνη, αλλάζει την πηγή εικόνας σε μεγαλύτερη. Αισθάνεται περισσότερο σαν άμαξα προς μίσθωση και λιγότερο σαν ένα πλήρως αναπτυγμένο βιβλιοπωλείο. Αυτή είναι μια εξαιρετική λύση κυρίως για ιστότοπους για κινητά, αλλά σημαίνει ότι η διπλή λήψη πόρων για επιτραπέζιους υπολογιστές ή / και tablet είναι αναπόφευκτη.

ερώτημα πολυμέσων για αποκριτικό σχεδιασμό

Άλλες αξιοσημείωτες βιβλιοθήκες JavaScript είναι:

• Γεια σου - Ένα πρόσθετο jQuery για αποκριτικές εικόνες. Η εμπιστοσύνη στο jQuery μπορεί να είναι πρόβλημα.

• Mobify.js - Μια γενική βιβλιοθήκη για αποκριτικό περιεχόμενο, συμπεριλαμβανομένων εικόνων, φύλλων στυλ και ακόμη και JavaScript. 'Καταγράψτε' το dOM πριν από τη φόρτωση του πόρου. Το Mobify είναι μια ισχυρή και περιεκτική βιβλιοθήκη, αλλά μπορεί να είναι υπερβολική αν ο στόχος είναι απλώς να έχετε αποκριτικές εικόνες.

Συνοψίζοντας

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

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

• Είναι τα προγράμματα περιήγησης παλαιού τύπου πρόβλημα; Εάν δεν είναι, σκεφτείτε να χρησιμοποιήσετε μια πιο σύγχρονη προσέγγιση (π.χ. Picturefill, χαρακτηριστικό srcset).

• Είναι κρίσιμος ο χρόνος απόκρισης; Εάν δεν είναι, αναζητήστε μια λύση back-end ή outsourcing.

• Πρέπει οι λύσεις να είναι εσωτερικές; Οι επιλογές εξωτερικής ανάθεσης είναι προφανώς εκτός ερώτησης.

• Υπάρχουν πολλές εικόνες στον ιστότοπο που προσπαθούν να μεταβούν σε αποκριτικές εικόνες; Υπάρχουν ανησυχίες για επικύρωση ή σημασιολογικές ετικέτες (ή μη σημασιολογικές ετικέτες); Αυτό θα απαιτήσει μια λύση backend για να καθοδηγήσει τα αιτήματα εικόνας σε κάτι όπως το Adaptive Images.

• Είναι η κατεύθυνση της τέχνης πρόβλημα (ειδικά για μεγάλες εικόνες με πολλές πληροφορίες); Μια βιβλιοθήκη όπως το Picturefill μπορεί να είναι μια καλύτερη λύση για ένα τέτοιο σενάριο. Επίσης, οποιαδήποτε από τις λύσεις back-end θα μπορούσε να λειτουργήσει επίσης.

• Υπάρχουν ανησυχίες σχετικά με τη JavaScript; Οποιαδήποτε λύση front-end θα είναι αδιαμφισβήτητη, αφήνοντας επιλογές όπως back-end ή outsourcing που βασίζονται στην παρακολούθηση UA.

• Υπάρχει προτεραιότητα για τους χρόνους απόκρισης για κινητά έναντι των χρόνων απόκρισης σε επιτραπέζιο υπολογιστή; Μια βιβλιοθήκη όπως το Source Shuffling θα πρέπει να είναι η πιο κατάλληλη για αυτήν την περίπτωση.

• Υπάρχει ανάγκη παροχής συμπεριφοράς που να ανταποκρίνεται σε κάθε πτυχή του ιστότοπου και όχι μόνο στις εικόνες; Το Mobify θα μπορούσε να λειτουργήσει καλύτερα.

• Έχει φτάσει ο τέλειος κόσμος; Χρησιμοποιήστε λοιπόν μόνο την προσέγγιση CSS display:none!