En tant que développeurs Web, nous utilisons constamment des images. Dans la plupart des cas, les navigateurs sont très efficaces pour redimensionner les images afin qu'elles s'adaptent aux limites de nos conceptions de sites, tout en les rendant attrayantes. Mais que se passe-t-il si vous souhaitez contrôler la mise à l'échelle des images de votre page ?
Chrome 41 (bêta en janvier 2015) introduit une nouvelle propriété CSS image-rendering: pixelated (spécification) qui vous permet de contrôler un peu plus 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 fluide standard du navigateur (normalement l'interpolation bilinéaire) et la remplacent par un autre algorithme de mise à l'échelle (le voisin le plus proche dans la plupart des cas) lors du redimensionnement des images.
Imaginons que vous disposiez d'une image de 2 x 2 pixels et que vous la redimensionniez pour qu'elle fasse 100 x 100 pixels. Le navigateur l'affichera de manière à ce qu'elle ne semble pas trop pixellisée. Par exemple:
Dans de nombreux cas, vous ne souhaitez pas ce comportement d'adoucissement et préférez 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=">
Essayez 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 n'ai toujours pas compris. Où dois-je utiliser cette fonctionnalité ?
Si vous n'affichez que des photos sur votre site, vous n'avez probablement pas besoin de cette fonctionnalité.
Les jeux sont un excellent cas d'utilisation. Vous devez souvent redimensionner le 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 semble flou (voir ci-dessous [sic]).
Si vous créez un outil de billetterie ou une application qui affiche des codes QR, l'utilisateur voudra souvent que l'affichage soit en plein écran pour qu'il soit plus facile à scanner. Il est donc essentiel de contrôler le rendu de l'image.
Si vous souhaitez voir l'implémentation, consultez l'Problème 317991 (il reste ouvert pour l'implémentation de la valeur "crisp-edges"). Ajoutez une étoile au problème pour suivre son implémentation.)