𝔹𝕝𝕦𝕣𝕣𝕖𝕕 𝕀𝕞𝕒𝕘𝕖𝕤 𝔸𝕣𝕖 𝔼𝕧𝕖𝕣𝕪𝕨𝕙𝕖𝕣𝕖

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

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

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

img {
    πλάτος: 100%.
    ύψος: auto;
}}

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

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

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

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

Θα σας δείξω μερικά παραδείγματα χρησιμοποιώντας το πρόγραμμα περιήγησης Chrome και, στη συνέχεια, χρησιμοποιώντας άλλα προγράμματα περιήγησης. Εδώ είναι μια εικόνα, μειωμένη στα 1000 px στο Photoshop:

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

Photoshop:

Πρόγραμμα περιήγησης:

Τα πράγματα χειροτερεύουν ακόμα περισσότερο όταν προσθέτετε ευκρίνεια στο Photoshop μετά τη μείωση του μεγέθους του. Ωστόσο, οι φωτογραφίες είναι περισσότερο συγχωρείς σε αυτή την περίπτωση, καθώς συνήθως δεν έχουν πολλές αιχμηρές άκρες. Ζητήματα με οποιαδήποτε διανυσματική απεικόνιση αποθηκευμένη ως εικόνες .png είναι πολύ πιο αισθητή. Συχνές περιπτώσεις - λογότυπα ιστότοπου.

Το λογότυπο της Asana, αρχικό αρχείο:

Αλλαγμένο μέγεθος στο Photoshop:

Εμφανίζεται στο πρόγραμμα περιήγησης:

Το λογότυπο του Wecan, αρχικό αρχείο:

Αλλαγμένο μέγεθος στο Photoshop:

Εμφανίζεται στο πρόγραμμα περιήγησης:

Και μερικά επιπλέον λογότυπα που παρέχονται από το πρόγραμμα περιήγησης:

Βρήκα τις πιο διασκεδαστικές συγκρίσεις των θολών εικόνων σε ιστοτόπους που σχετίζονται με το UX. Τμήμα εργασιών Smashingmagazine, στο πρόγραμμα περιήγησης:

Στο Photoshop:

Nielsen Norman Group, Empathy Χαρτογράφηση άρθρου, παραστατικό γράφημα:

Χρησιμοποιώντας την αλλαγή μεγέθους του Photoshop:

Πρέπει να παραδεχτώ ότι αυτό το πρόβλημα είναι μόνο το Chrome. Το IE καθιστά πολύ καλύτερα. είναι αξιοσημείωτο ότι ορισμένες λεπτές γραμμές είναι pixelated, η οποία είναι ωραία για κείμενο:

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

Αυτό που πρέπει να κάνουν οι προγραμματιστές αυτή τη στιγμή είναι να ενεργοποιήσουν την ιδιότητα αυτόματης απομάκρυνσης webkit:

img {
    απεικόνιση εικόνας: -webkit-βελτιστοποίηση-αντίθεση?
}}

Αυτό θα μπορούσαμε να πάρουμε αν ήταν ενεργοποιημένο:

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