Η image-renderingιδιότητα καθορίζει τον τρόπο με τον οποίο το πρόγραμμα περιήγησης θα πρέπει να αποδίδει μια εικόνα εάν έχει κλιμακωθεί προς τα πάνω ή προς τα κάτω από τις αρχικές του διαστάσεις. Από προεπιλογή, κάθε πρόγραμμα περιήγησης θα προσπαθήσει να εφαρμόσει το ψευδώνυμο σε αυτήν την κλιμακούμενη εικόνα, προκειμένου να αποφευχθεί η παραμόρφωση, αλλά αυτό μπορεί μερικές φορές να είναι ένα πρόβλημα εάν θέλουμε η εικόνα να διατηρήσει την αρχική της μορφή με pixelated.
img ( image-rendering: auto; image-rendering: crisp-edges; image-rendering: pixelated; )Σχετικά με αυτές τις τρεις πιθανές τιμές:
auto: προεπιλεγμένη τιμή που χρησιμοποιεί τον τυπικό αλγόριθμο του προγράμματος περιήγησης για μεγιστοποίηση της εμφάνισης μιας εικόνας.crisp-edges: η αντίθεση, τα χρώματα και οι άκρες της εικόνας θα διατηρηθούν χωρίς εξομάλυνση ή θόλωση. Σύμφωνα με τις προδιαγραφές, αυτό προοριζόταν ειδικά για εικονοστοιχεία. Αυτή η τιμή ισχύει για εικόνες με κλίμακα πάνω ή κάτω.pixelated: καθώς η εικόνα αλλάζει μέγεθος, το πρόγραμμα περιήγησης θα διατηρήσει το στιλ του με pixelated χρησιμοποιώντας κλίμακα πλησίον γειτονικού. Αυτή η τιμή ισχύει μόνο για εικόνες που έχουν αυξηθεί.
Αυτή η ιδιότητα μπορεί να εφαρμοστεί σε εικόνες φόντου, canvasστοιχεία καθώς και ενσωματωμένες εικόνες. Ωστόσο, είναι σημαντικό να σημειωθεί ότι η δοκιμή αυτών των τιμών αυτή τη στιγμή είναι ιδιαίτερα συγκεχυμένη λόγω της έλλειψης σταθερής υποστήριξης του προγράμματος περιήγησης.
Παράδειγμα
Εδώ είναι μια πολύ μικρή ενσωματωμένη εικόνα που αποτελείται από τέσσερα έγχρωμα εικονοστοιχεία:
Εάν αλλάξουμε το πλάτος αυτής της ενσωματωμένης εικόνας σε 300pxτότε στο Chrome (41) θα διαπιστώσουμε ότι το πρόγραμμα περιήγησης προσπάθησε να βελτιστοποιήσει την εικόνα όσο καλύτερα μπορεί:
Για να διατηρήσουμε την αρχική του εμφάνιση με pixelated μπορούμε να χρησιμοποιήσουμε την ακόλουθη pixelatedτιμή, όπως έτσι:
img ( image-rendering: pixelated; )Αυτό έχει ως αποτέλεσμα το πρόγραμμα περιήγησης να επιλέξει έναν εναλλακτικό αλγόριθμο με τον οποίο θα επεξεργαστεί την εικόνα. Σε αυτό το παράδειγμα, το Chrome θα καταργήσει το προεπιλεγμένο ψευδώνυμο:
Δυστυχώς, μετά από πολλές δοκιμές φαίνεται ότι τα προγράμματα περιήγησης ερμηνεύουν τις τιμές crisp-edgesκαι τις pixelatedτιμές με πολύ συγκεχυμένους τρόπους αυτή τη στιγμή, οπότε είναι σημαντικό να σημειωθεί για άλλη μια φορά ότι αυτή η προδιαγραφή είναι στις πρώτες μέρες της. Για παράδειγμα, το Chrome φαίνεται να αποδίδει pixelatedεικόνες με τον ίδιο τρόπο που ο Firefox και το Safari θα αποδίδουν εικόνες crisp-edges.
Παράδειγμα κώδικα QR
Μια άλλη περίπτωση χρήσης αυτής της ιδιότητας μπορεί να αφορά κωδικούς QR όπου θέλετε να αυξήσετε το μέγεθός του χωρίς να το παραμορφώσετε χρησιμοποιώντας το τυπικό anti-aliasing. Βεβαιωθείτε ότι έχετε ελέγξει αυτό το παράδειγμα σε λειτουργία πλήρους οθόνης για να δείτε το τέντωμα της εικόνας:
Δείτε την επίδειξη Pen Image-rendering από τον Robin Rendle (@robinrendle) στο CodePen.
Εναλλαγή παραδείγματος
Στην παρακάτω πένα μπορείτε να κάνετε εναλλαγή μεταξύ αυτών των τιμών και να δείτε τις διαφορές μεταξύ των προγραμμάτων περιήγησης:
Δείτε το demo απόδοσης εικόνας Pen από τον Robin Rendle (@robinrendle) στο CodePen.
Υποστήριξη προγράμματος περιήγησης
crisp-edgesπρος το παρόν απαιτεί προθέματα προμηθευτή ( -moz-crisp-edges) για να λάβετε την καλύτερη δυνατή υποστήριξη.
Αυτά τα δεδομένα υποστήριξης του προγράμματος περιήγησης προέρχονται από την Caniuse, η οποία έχει περισσότερες λεπτομέρειες. Ένας αριθμός υποδεικνύει ότι το πρόγραμμα περιήγησης υποστηρίζει τη λειτουργία σε αυτήν την έκδοση και νεότερη.
Επιφάνεια εργασίας
| Χρώμιο | Firefox | ΙΕ | Ακρη | Σαφάρι |
|---|---|---|---|---|
| 41 | 3.6 * | 11 * | 79 | 10 |
Κινητό / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 * | 81 | 10.0-10.2 |
Τη στιγμή αυτής της ενημέρωσης, ο Firefox 61 υποστηρίζει crisp-edgesαλλά όχι pixelatedκαι το Chrome 68 υποστηρίζει pixelatedαλλά όχι crisp-edges.