En tant que développeurs Web, nous jouons constamment avec des images et, dans la plupart des cas, les navigateurs sont capables de faire évoluer les images pour les adapter à la conception de notre site tout en préservant la beauté des images. Mais que se passe-t-il si vous souhaitez contrôler la façon dont le navigateur met à l'échelle les images de votre page ?
Chrome 41 (bêta en janvier 2015) introduit une nouvelle propriété CSS image-rendering: pixelated (Spec) qui vous permet de mieux contrôler la façon dont le navigateur affiche une image agrandie.
La propriété CSS image-rendering et la valeur pixelated sont intéressantes, car elles désactivent la mise à l'échelle lisse standard du navigateur (généralement une interpolation bilinéaire) et la remplacent par un autre algorithme de mise à l'échelle (le plus proche dans la plupart des cas) lors du redimensionnement des images.
Imaginez que vous ayez une image de 2 × 2 pixels à l'échelle de 100 × 100 pixels à l'échelle de 100 × 100 pixels, le navigateur l'affiche sans qu'elle ait l'air cubique. Par exemple:
Dans de nombreux cas, il n'est pas souhaitable d'utiliser ce comportement de lissage, mais d'utiliser une méthode qui préserve une représentation plus précise de l'image.
Pour obtenir cet effet, il vous suffit d'appliquer image-rendering: pixelated; à votre image comme suit.
<img
style="image-rendering: pixelated;"
width="100" height="100"
src="data:image/png;base64,iVBORw0KGgoAAAA....Ik2kAAAAASUVORK5CYII=">
Essayer la démo Comme vous pouvez le constater, l'application de la propriété a un impact significatif sur le rendu de l'image.
Cette propriété peut être appliquée à de nombreux endroits:
- Éléments
<img> - Éléments
<canvas style="image-rendering: pixelated"> - Tout élément avec une propriété
background-image
Je ne comprends toujours pas. Où dois-je l'utiliser ?
Si vous ne faites que montrer des photos sur votre site, ce n'est probablement pas ce que vous souhaitez.
Les jeux constituent un excellent cas d'utilisation. Vous devez souvent augmenter la taille du canevas pour qu'il s'adapte correctement à la taille de l'écran. Avant cette propriété CSS, le navigateur interpolait le canevas de manière à ce qu'il apparaisse flou (voir [sic] ci-dessous).
Si vous créez un outil de billetterie d'une compagnie aérienne ou une application qui affiche des codes QR, l'utilisateur souhaite généralement qu'il s'affiche en plein écran pour faciliter la lecture. Il est donc essentiel de contrôler l'affichage des images.
Si vous souhaitez en savoir plus sur l'implémentation, consultez le problème 317991 (il n'est pas nécessaire de l'indiquer pour l'implémentation de la valeur crisp-edges). Ajoutez le problème à vos favoris pour suivre son implémentation).