image-rendering - Propriété CSS
Résumé des caractéristiques de la propriété image-rendering
auto
| hight-quality
| smooth
| pixelated
| crisp-edges
| optimizequality
| optimizespeed
auto
image-rendering
passe d'une valeur à l'autre sans transition.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: hight-quality;
Comparable à la valeur précédente
smooth
. Cependant la valeurhight-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 valeursmooth
.La valeur
hight-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 parpixelated
.
optimizequality
a été remplacée parsmooth
. - image-rendering:
initial
; image-rendering:inherit
; image-rendering:revert
; image-rendering:revert-layer
; image-rendering:unset
;La valeur initiale est :
.auto
Animation de la propriété image-rendering
.
Un exemple d'animation de la propriété image-rendering
.
Cette dernière n'est pas la plus intéressante des propriétés du point de vue animation.
Simulateur.
L'image du ballon ci-dessous a été fortement agrandie afin que l'effet de image-rendering
soit bien visible.
Prise en charge par les navigateurs (compatibilité).
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.
image-rendering
.
crisp-edges
pixelated
smooth
optimizespeed
optimizequality
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
Opéra
Opéra Mobile
Safari
Safari sur IOS
Samsung Internet
Voir aussi, dans le même module de standardisation que image-rendering
.
Les spécifications CSS éditées par le W3C sont organisées en modules. image-rendering
fait partie du Module CSS - Images (CSS Images Module). Les définitions suivantes sont également décrites dans ce même module.