Πώς να επιλέξετε ένα εργαλείο σχεδίασης φωτογραφιών

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

Σχεδιασμός ιστοσελίδων προσαρμοζόμενος σε συσκευές

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

Γιατί το μέγεθος της εικόνας είναι σημαντικό;
Ειδικά επειδή όλο και περισσότεροι άνθρωποι άρχισαν να χρησιμοποιούν κινητές συσκευές, το μέγεθος των εικόνων έγινε ένα τεράστιο πρόβλημα. Θυμηθείτε ότι δεν δουλεύουν όλοι όλοι στο Ίντερνετ από ένα Wi-Fi, αλλά πολλοί το κάνουν πραγματικά στο δικό τους εύρος ζώνης 3G, το οποίο είναι συνήθως περιορισμένο. Και αν ο επισκέπτης θέλει να έχει πρόσβαση στον ιστότοπό σας από μια περιοχή με ασθενή διαδικτυακή κάλυψη, η σύνδεση Edge ενδέχεται να μην είναι αρκετά γρήγορη για να φορτώσει την εικόνα σε ένα αξιοπρεπή χρόνο.

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

Υπάρχουν ήδη ορισμένες τεχνικές που μπορούν να χρησιμοποιηθούν για την αντιμετώπιση αυτής της προσέγγισης, όπως τα HiSRC του Github, το Foresight.js και το Picturefill, η Adaptive Images και πολλά άλλα. Υπάρχουν πολλές επιλογές εκεί έξω, αν και η ιδέα των αποκριτικών εικόνων είναι αρκετά νέα.

κατασκευη ιστοσελιδας τιμες

Κύρια συζήτηση
Είναι επίσης σημαντικό να γνωρίζουμε γιατί οι ανταποκρινόμενες εικόνες είναι ένα από τα πιο δύσκολα μέρη της μεθοδολογίας σχεδιασμού που ανταποκρίνεται. Είναι επίσης σημαντικό να θυμόμαστε ότι όλα αυτά τα εργαλεία που αναφέρθηκαν παραπάνω είναι διαφορετικοί τρόποι “χάκερ” του CSS και ότι κανένα από αυτά δεν είναι τέλειο.

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

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

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

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

Θέλετε να επικυρώσετε;
Αν είστε ένας freak επικύρωσης, τότε ορισμένες τεχνικές μπορεί να λειτουργούν καλύτερα για σας από άλλες. Εργαλεία όπως το Picturefill χρησιμοποιούν διαφορετικά στοιχεία για να είναι λειτουργικά – αυτά τα στοιχεία μπορεί να γίνουν τυποποιημένα στο μέλλον, αλλά προς το παρόν αυτά είναι τεχνικά άκυρα σύνταξη, πράγμα που σημαίνει ότι το αρχείο HTML δεν θα επικυρωθεί.

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

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

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

Τι γίνεται με την ειδική σήμανση;
Ένα άλλο σημαντικό πράγμα που πρέπει να εξετάσετε όταν έχετε πολύ περιεχόμενο είναι εάν το εργαλείο που χρησιμοποιείτε απαιτεί να προσθέσετε ειδικά χαρακτηριστικά σε κάθε στοιχείο εικόνας.

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

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

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

Γενικά, τα εργαλεία που χρησιμοποιούν JavaScript θα χρειαστούν ένα στοιχείο <noscript> με προσθήκη χαρακτηριστικού <img>, σε περίπτωση που ο χρήστης έχει απενεργοποιήσει το JavaScript. Μερικές φορές αυτό το hack θα πρέπει να προστεθεί από εσάς.

Αν είστε ενάντια στη χρήση του JavaScript, το Sencha.IO μπορεί να είναι η καλύτερη επιλογή. Αντί να χρησιμοποιείτε cookies, αυτό το εργαλείο εντοπίζει τη συμβολοσειρά χρηστών της συσκευής και παρέχει το κατάλληλο μέγεθος εικόνας για αυτήν.

Θυμηθείτε ότι το jQuery είναι επίσης JavaScript, επομένως τα εργαλεία που εξαρτώνται από αυτήν τη βιβλιοθήκη, όπως το HiSRC και το rwdImages, μπορεί επίσης να λειτουργούν λίγο πιο αργά.

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

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

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

Χρησιμοποιείτε PHP ή κάτι άλλο;
Ίσως να μην ενδιαφέρεστε μόνοι σας για αυτό, αλλά τα εργαλεία που χρησιμοποιείτε. Ορισμένα από αυτά δεν βασίζονται στο JavaScript, αλλά εξακολουθούν να χρησιμοποιούν το .htaccess και την PHP. Αυτό απαιτεί ένα διακομιστή Apache. Θυμηθείτε ότι πολλοί ιστότοποι τρέχουν σε Ruby ή Python, όχι μόνο στην PHP. Το Responsive Images είναι ένα από τα κορυφαία εργαλεία που χρησιμοποιούν την PHP.

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

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

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

κατασκευη ιστοσελιδας κοστος

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

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

Χρειάζεστε πραγματικά ένα εργαλείο;
Εάν ο ιστότοπός σας τρέχει το WordPress, μπορεί να μην χρειαστεί καν ένα τέτοιο εργαλείο. Ο Μεταφόρτωση Εικόνας του WordPress έχει μια επιλογή που κλιμακώνει την εικόνα σας, ώστε να μπορείτε να επιλέξετε ποιο θα χρησιμοποιηθεί. Και είμαι βέβαιος ότι ορισμένα άλλα συστήματα διαχείρισης περιεχομένου έχουν το ίδιο χαρακτηριστικό. Σε αυτήν την περίπτωση, η χρήση μιας εφαρμογής τρίτου μέρους ενδέχεται να μην είναι απαραίτητη.

Περισσότερες λύσεις WordPress
Πριν από πολλά χρόνια ο Steve Jobs πιάστηκε λέγοντας “υπάρχει μια εφαρμογή για αυτό” μία φορά πάρα πολλά. Αν θα ήταν ο Steve Jobs του WordPress, ίσως να θέλετε να πείτε “υπάρχει ένα plugin γι ‘αυτό”, επειδή υπάρχουν λογικά plugins για τα πάντα στο WordPress. Υπάρχει επίσης ένα plugin που ονομάζεται Mobble, το οποίο ανιχνεύει το μέγεθος της οθόνης και συνοδεύει τα CSS Media Queries.

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

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

Ευαίσθητα μεγέθη εικόνων

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

Οι ανταποκρινόμενες εικόνες είναι εξίσου σημαντικές με οποιοδήποτε άλλο στοιχείο της έννοιας “ανταποκρινόμενη σχεδίαση ιστού”. Θα πρέπει να πάτε αμέσως εκεί έξω και να ερευνήσετε τις πολλαπλές επιλογές και να βρείτε το σωστό για εσάς – σε περίπτωση που αποφασίσετε ότι χρειάζεστε ένα. Με τόσες πολλές διαθέσιμες επιλογές εκεί έξω, θα ήταν κρίμα να μην χρησιμοποιήσετε ένα από αυτά εάν αισθάνεστε πραγματικά την ανάγκη.