La image-renderingpropriété définit la manière dont le navigateur doit rendre une image si elle est agrandie ou réduite par rapport à ses dimensions d'origine. Par défaut, chaque navigateur tentera d'appliquer un alias à cette image mise à l'échelle afin d'éviter toute distorsion, mais cela peut parfois être un problème si nous voulons que l'image conserve sa forme pixelisée d'origine.
img ( image-rendering: auto; image-rendering: crisp-edges; image-rendering: pixelated; )À propos de ces trois valeurs possibles:
auto: valeur par défaut qui utilise l'algorithme standard du navigateur pour maximiser l'apparence d'une image.crisp-edges: le contraste, les couleurs et les bords de l'image seront préservés sans aucun lissage ni flou. Selon la spécification, cela était spécifiquement destiné au pixel art. Cette valeur s'applique aux images agrandies ou réduites.pixelated: à mesure que l'image change de taille, le navigateur conservera son style pixélisé en utilisant la mise à l'échelle du voisin le plus proche. Cette valeur s'applique uniquement aux images agrandies.
Cette propriété peut être appliquée aux images d'arrière-plan, aux canvaséléments ainsi qu'aux images en ligne. Il est important de noter cependant que tester ces valeurs à ce stade est particulièrement déroutant en raison du manque de prise en charge cohérente du navigateur.
Exemple
Voici une très petite image en ligne composée de quatre pixels colorés:
Si nous modifions la largeur de cette image en ligne sur 300pxpuis dans Chrome (41), nous constaterons que le navigateur a tenté d'optimiser l'image du mieux qu'il peut:
Pour conserver son aspect pixélisé d'origine, nous pouvons utiliser la pixelatedvaleur suivante , comme ceci:
img ( image-rendering: pixelated; )Cela conduit le navigateur à choisir un algorithme alternatif avec lequel traiter l'image. Dans cet exemple, Chrome supprimera l'alias par défaut:
Malheureusement, après de nombreux tests, il semble que les navigateurs interprètent les valeurs crisp-edgeset pixelatedde manière très confuse pour le moment, il est donc important de noter une fois de plus que cette spécification en est à ses tout débuts. Par exemple, Chrome semble rendre les pixelatedimages de la même manière que Firefox et Safari rendront les images avec crisp-edges.
Exemple de code QR
Un autre cas d'utilisation de cette propriété peut être celui des codes QR pour lesquels vous souhaitez augmenter sa taille sans la déformer en utilisant l'anti-aliasing standard. Assurez-vous de vérifier cet exemple en mode plein écran pour voir l'étirement de l'image:
Voir la démonstration de rendu d'image Pen par Robin Rendle (@robinrendle) sur CodePen.
Exemple de bascule
Dans le stylet ci-dessous, il est possible de basculer entre ces valeurs et de voir les écarts entre les navigateurs:
Voir la démonstration de rendu d'image Pen par Robin Rendle (@robinrendle) sur CodePen.
Prise en charge du navigateur
crisp-edgesnécessite actuellement des préfixes de fournisseur ( -moz-crisp-edges) pour obtenir le meilleur support possible.
Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.
Bureau
| Chrome | Firefox | C'EST À DIRE | Bord | Safari |
|---|---|---|---|---|
| 41 | 3,6 * | 11 * | 79 | dix |
Mobile / tablette
| Chrome Android | Android Firefox | Android | Safari sur iOS |
|---|---|---|---|
| 88 | 85 * | 81 | 10,0-10,2 |
Au moment de cette mise à jour, Firefox 61 prend en charge crisp-edgesmais pas pixelatedet Chrome 68 prend en charge pixelatedmais pas crisp-edges.