Die image-renderingEigenschaft definiert, wie der Browser ein Bild rendern soll, wenn es von seinen ursprünglichen Abmessungen vergrößert oder verkleinert wird. Standardmäßig versucht jeder Browser, Aliasing auf dieses skalierte Bild anzuwenden, um Verzerrungen zu vermeiden. Dies kann jedoch manchmal ein Problem sein, wenn das Bild seine ursprüngliche Pixelform beibehalten soll.
img ( image-rendering: auto; image-rendering: crisp-edges; image-rendering: pixelated; )Über diese drei möglichen Werte:
auto: Standardwert, der den Standardalgorithmus des Browsers verwendet, um das Erscheinungsbild eines Bildes zu maximieren.crisp-edges: Der Kontrast, die Farben und Kanten des Bildes bleiben erhalten, ohne dass es zu Glättungen oder Unschärfen kommt. Entsprechend der Spezifikation war dies speziell für Pixelkunst gedacht. Dieser Wert gilt für Bilder, die vergrößert oder verkleinert wurden.pixelated: Wenn sich die Größe des Bilds ändert, behält der Browser seinen pixeligen Stil bei, indem er die Skalierung für den nächsten Nachbarn verwendet. Dieser Wert gilt nur für Bilder, die vergrößert werden.
Diese Eigenschaft kann auf Hintergrundbilder, canvasElemente sowie Inline-Bilder angewendet werden. Es ist jedoch wichtig zu beachten, dass das Testen dieser Werte zu diesem Zeitpunkt aufgrund des Mangels an konsistenter Browserunterstützung besonders verwirrend ist.
Beispiel
Hier ist ein sehr kleines Inline-Bild, das aus vier farbigen Pixeln besteht:
Wenn wir die Breite dieses Inline-Bildes 300pxin Chrome (41) ändern , wird der Browser versucht, das Bild so gut wie möglich zu optimieren:
Um das ursprüngliche pixelige Aussehen beizubehalten, können wir den folgenden pixelatedWert verwenden:
img ( image-rendering: pixelated; )Dies führt dazu, dass der Browser einen alternativen Algorithmus auswählt, mit dem das Bild verarbeitet werden soll. In diesem Beispiel entfernt Chrome das Standard-Aliasing:
Leider scheint es nach vielen Tests so, dass Browser die crisp-edgesund pixelated-Werte im Moment sehr verwirrend interpretieren. Daher ist es wichtig, noch einmal zu beachten, dass diese Spezifikation noch in den Anfängen steckt. Zum Beispiel scheint Chrome pixelatedBilder auf die gleiche Weise zu rendern , mit der Firefox und Safari Bilder rendern crisp-edges.
QR-Codebeispiel
Ein weiterer Anwendungsfall dieser Eigenschaft ist möglicherweise QR-Codes, bei denen Sie die Größe erhöhen möchten, ohne sie durch Verwendung des Standard-Anti-Aliasing zu verzerren. Überprüfen Sie dieses Beispiel im Vollbildmodus, um die Bildausdehnung zu sehen:
Sehen Sie sich die Pen Image-Rendering-Demo von Robin Rendle (@robinrendle) auf CodePen an.
Beispiel umschalten
Im folgenden Stift können Sie zwischen diesen Werten wechseln und die Diskrepanzen zwischen den Browsern anzeigen:
Sehen Sie sich die Pen Image-Rendering-Demo von Robin Rendle (@robinrendle) auf CodePen an.
Browser-Unterstützung
crisp-edgesDerzeit sind Herstellerpräfixe ( -moz-crisp-edges) erforderlich , um die bestmögliche Unterstützung zu erhalten.
Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.
Desktop
| Chrom | Feuerfuchs | IE | Kante | Safari |
|---|---|---|---|---|
| 41 | 3,6 * | 11 * | 79 | 10 |
Handy / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 * | 81 | 10.0-10.2 |
Zum Zeitpunkt dieses Updates unterstützt Firefox 61 zwar crisp-edgesnicht pixelatedund Chrome 68 unterstützt pixelatedjedoch nicht crisp-edges.