Deaktivieren von Anti-Aliasing bei der Bildskalierung

Die Herausforderung beim Deaktivieren von Anti-Aliasing während der Bildskalierung entsteht, wenn Bilder bei der Skalierung verschwommen oder interpoliert erscheinen . Dies liegt daran, dass Browser Anti-Aliasing-Techniken anwenden, um die Kanten von Bildern zu glätten, was zu einem weicheren Erscheinungsbild führt.

Glücklicherweise bietet CSS eine Reihe von Flags, mit denen Anti-Aliasing effektiv deaktiviert werden kann. Doch trotz der vorgeschlagenen Flags, wie etwa image-rendering: -moz-crisp-edges, sind sie für Hintergrundbilder tendenziell unwirksam.

Um diese Einschränkung zu überwinden, bietet das folgende Code-Snippet eine umfassende Lösung, die funktioniert in allen gängigen Browsern:

img { 
    image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
    image-rendering: -moz-crisp-edges;          /* Firefox                        */
    image-rendering: -o-crisp-edges;            /* Opera                          */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
    image-rendering: pixelated;                 /* Universal support since 2021   */
    image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8                            */

}

Dieses Code-Snippet verwendet mehrere browserspezifische Flags, darunter -moz-crisp-edges für Firefox, -o-crisp-edges für Opera und -webkit-optimize-contrast für Chrome und Safari. Darüber hinaus verwendet es seit 2021 den Pixelwert für universelle Unterstützung und optimiert den Kontrast für CSS3-Kompatibilität. Schließlich enthält es -ms-interpolation-mode: next-neighbor für Internet Explorer 8 und höher.

Durch die Einbindung dieses Codes können Sie scharfe Kanten effektiv bewahren und Bildinterpolation während der Skalierung verhindern, was zu einem gestochen scharfen Bild führt pixeliges Erscheinungsbild nach Wunsch.