Image-rendering - Propriété CSS

Schéma de la syntaxe de image-rendering.

Description de la propriété image-rendering.

image-rendering définit quelle méthode utiliser pour mettre les images à l'échelle. Les images sont rarement affichées à leurs dimensions d'origine : les propriétés width et height peuvent changer leur taille à l'affichage, ou tout simplement, l'internaute peut zoomer, ce qui nécessitera de ré-afficher toutes les images avec de nouvelles dimensions.

Il existe en effet plusieurs algorithmes pour traiter le dimensionnement des images avec chacun des avantages et des inconvénients : temps de calcul long, introduction de flou, pixellisation, etc.

Lorsque image-rendering est appliqué à un élément, il concerne toutes les images, que ce soit les images contenues dans l'élément, ou les images d'arrière-plan, les images de bordure, etc.

L'effet de image-rendering est surtout visible lorsque l'image est agrandie. Dans le cas d'une réduction de taille, le choix de la méthode de mise à l'échelle est moins critique.

Valeurs pour image-rendering.

• image-rendering: auto;

  Le navigateur choisit la méthode qui lui semble la plus appropriée.

  
• image-rendering: smooth;

  L'image devra être mise à l'échelle avec un algorithme qui préserve la douceur de l'image. Cette méthode est recommandée pour les photos.

  
• image-rendering: high-quality; ⚠

  Comparable à la valeur précédente smooth. Cependant la valeur high-quality doit être appliqué sur les images de la page qui seront prioritaires pour un meilleur rendu, dans le cas où les ressources système ne permettent pas un rendu optimal pour toutes les images de la page.
  Autrement dit, si les ressources système sont insuffisantes, le navigateur commence par réduire la qualité des images avec la valeur smooth.

  La valeur high-quality ne doit être appliquée qu'à un nombre limité d'images de la page, voire à une seule image.

  Cette option est intéressante pour les pages qui comportent de nombreuses images, dont une est par exemple sélectionnée par le lecteur.

  
• image-rendering: crisp-edges;

  L'image est mise à l'échelle avec un algorithme qui préserve les contrastes et les contours, qui n'introduit pas de flou. Cette méthode est recommandée pour les logos, ou autres images bitmap.

  
• image-rendering: pixelated;

  L'image sera mise à l'échelle de la façon la plus simple. Ce qui dans le cas d'un grossissement se traduira par des pixels visibles.

  
• image-rendering: optimizequality; ✗ image-rendering: optimizespeed; ✗

  Ces valeurs sont obsolètes.
  optimizespeed a été remplacée par pixelated.
  optimizequality a été remplacée par smooth.

• image-rendering: initial; (auto) image-rendering: inherit; image-rendering: revert; image-rendering: revertLayer; image-rendering: unset;

  Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de image-rendering.

Un exemple d'Exemple d'animation de image-rendering. Cette dernière n'est pas la plus intéressante des propriétés du point de vue animation.

Exemple interactif avec la propriété image-rendering.

L'image du ballon ci-dessous a été fortement agrandie afin que l'effet de image-rendering soit bien visible.

Compatibilité des navigateurs avec image-rendering.

La propriété image-rendering est bien reconnue par les navigateurs, mais les algorithmes de mise à l'échelle des images ne semblent pas standardisés : certaines valeurs de la propriété ne sont pas reconnues ou donnent des résultats incorrects.

Remarques :

(1) Nécessite le préfixe du navigateur -ms-. Internet Explorer utilise à la place -ms-interpolation-mode: nearest-neighbor. Ne fonctionne pas sur les arrière-plan ou les canvas.

(2) Supporte la valeur pixelated mais pas la valeur crisp-edges.

(3) Utilise la valeur non standard -webkit-optimize-contrast.

1

Propriété
image-rendering

2

Valeur
crisp-edges

3

Valeur
pixelated

4

Valeur
smooth

5

Valeurs
optimizequality
optimizespeed

Estimation de la prise en charge globale.

96%

96%

95%

2%

19%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

1

UC Browser pour Androïd

2

Opéra Mobile

2

3

QQ Browser

2

Baidu Browser

2

Samsung Internet

2

3

Safari

Safari sur IOS

Chrome

2

3

Opéra

2

3

Edge

2

3

Chrome pour Androïd

2

3

Firefox pour Androïd

Firefox

Androïd Brower

2

3

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Caniuse

Caniuse

Caniuse

Histoire de la propriété image-rendering.

• Module CSS - Image niveau 3

  Concernant image-rendering. Présentation de la propriété image-rendering.
  

  23 Juillet 2009

  Document de travail.

  

  17 Avril 2012

  Candidat à la recommandation.

  

  

Voir aussi, à propos des images.

Les spécifications CSS éditées par le W3C sont organisées en modules. La propriété image-rendering fait partie du module Module CSS - Images.
Les définitions suivantes sont également décrites dans ce même module.

Propriétés :

Fonctions :