Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

CSS - Propriété 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, pixelisation, 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;

    Valeur par défaut. 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. /p>

  • image-rendering: hight-quality;

    Comparable à la valeur précédente smooth. Cependant la valeur hight-quality permet de désigner une des images de la page comme étant prioritaire 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. 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: optimize-quality; image-rendering: optimize-speed;

    Ces valeurs sont obsolètes.
    optimize-speed a été remplacée par pixelated.
    optimize-quality a été remplacée par smooth.

  • image-rendering: initial;

    La valeur initiale est auto.

  • image-rendering: unset; image-rendering: inherit;

    Reportez-vous à la description générale de ces valeurs.

Simulateur.

image-rendering :

Voir aussi...

Images et filtres - Propriétés.

  • backdrop-filter : Applique un filtre graphique sur l'élément situé en arrière plan.
  • background-blend-mode : Définit le mélange des couleurs entre image(s) d'arrière-plan et couleur d'arrière-plan.
  • clip-path : Définit la partie visible de l'élément, délimitée par une forme géométrique (rectangle, polygone...)
  • filter : Filtre graphique.
  • mix-blend-mode : Définit le mode de mélange entre le contenu et ce qui est visible en arrière-plan de l'élément.

Images et filtres - Fonctions.

  • blur() : Applique un effet de flou à une image.
  • brightness() : Ajuste la luminosité d'une image.
  • contrast() : Ajuste le contraste d'une image.
  • drop-shadow() : Définit l'ombre d'un élément (dimensions, flou, couleur).
  • grayscale() : Convertit une image en nuances de gris (noir et blanc).
  • hue-rotate() : Change les couleurs d'une image (rotation des teintes).
  • image() : Désigne ou définit une image.
  • inset() : Définit un rectangle, utilisable pour découper une image.
  • invert() : Inverse les couleurs d'une image.
  • opacity() : Détermine le degré de transparence d'un élément.
  • saturate() : Définit la saturation des couleurs d'une image.
  • sepia() : Applique un effet sépia à une image.