En tant que développeurs Web, nous jouons tout le temps avec les images. Dans la plupart des cas, les navigateurs sont très efficaces pour adapter les images aux limites de la conception de nos sites, tout en préservant leur beauté. Mais que se passe-t-il lorsque 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 (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 souhaiterez pas ce comportement de lissage. Utilisez plutôt 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 ne comprends toujours pas. Où dois-je l'utiliser ?
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.)