oujood.com

Comment utiliser la propriété image-rendering pour contrôler le lissage d'une image

La propriété image-rendering permet de contrôler la qualité d'affichage d'une image. Utiliser cette propriété pour améliorer l'affichage des images sur votre site web

chercher |

Définition et utilisation da la propriété css image-rendering

image-rendering est une propriété CSS qui permet de contrôler la qualité d'affichage d'une image en utilisant des algorithmes de lissage (ou "interpolation"). La valeur par défaut de cette propriété est auto, ce qui signifie que le navigateur choisira lui-même l'algorithme de lissage à utiliser en fonction de l'image et de la plateforme.

La Syntaxe CSS
Voici la syntaxe de la propriété css image-rendering

image-rendering: auto|smooth|high-quality|crisp-edges|pixelated
les valeurs possibles pour cette propriété :

auto : laisse le navigateur choisir l'algorithme de lissage à utiliser.
crisp-edges : désactive le lissage et conserve les bords nets de l'image.
pixelated : désactive le lissage et affiche l'image en conservant ses pixels individuels.
smooth : active le lissage et adoucit les bords de l'image pour une meilleure qualité d'affichage.

Voici un exemple de code qui utilise cette propriété pour afficher une image avec des bords nets :

Exemple      Copier le code

img {
  image-rendering: crisp-edges;
}
Valeurs par défautauto
Inherited: oui
Animable : non En savoir plus sur l'animable
Version: CSS3
Syntaxe JavaScript: object.style.imageRendering="pixelated"
Voici un exemple de page HTML avec du CSS qui utilise la propriété image-rendering sur l'image https://loremflickr.com/640/360 :

Exemple      Copier le code

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
  <title>La propriété css image-rendering</title>
    <style>
      img {
        image-rendering: crisp-edges;
      }
    </style>
  </head>
  <body>
    <img src="https://loremflickr.com/640/360" alt="Une belle image">
  </body>
</html>
Ce code affichera l'image avec des bords nets, car la propriété image-rendering a été définie sur crisp-edges. Si vous voulez utiliser une valeur différente pour cette propriété, vous pouvez simplement la remplacer par l'une des autres valeurs possibles (auto, pixelated ou smooth).

Prise en charge de la propriété dans les navigateurs

Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.

ExplorateurGoogle ChromeInternet ExplorerFirefoxSafariOpera
Verssion41796510 28

Astuces et conseils pour l'utilisation de la propriété CSS image-rendering

Voici quelques astuces et conseils pour l'utilisation de la propriété CSS image-rendering :

1- Utilisez la valeur crisp-edges si vous voulez que les bords de l'image soient nets et précis. Cette valeur peut être particulièrement utile pour les images qui contiennent du texte ou des formes simples et nettes.
2- Utilisez la valeur pixelated si vous voulez que l'image conserve ses pixels individuels et n'ait pas l'air lissée. Cette valeur peut être utile pour les images pixel art ou pour les images qui ont été redimensionnées de manière agressive.
3- Utilisez la valeur smooth si vous voulez que l'image soit lissée pour une meilleure qualité d'affichage. Cette valeur peut être utile pour les images qui sont destinées à être affichées à une taille plus grande que leur résolution d'origine.
4- N'oubliez pas que la valeur par défaut de la propriété image-rendering est auto, ce qui signifie que le navigateur choisira lui-même l'algorithme de lissage à utiliser. Si vous n'êtes pas sûr de la valeur à utiliser, vous pouvez la laisser sur auto et laisser le navigateur décider.
5- N'oubliez pas que la propriété image-rendering n'a aucun effet sur les images qui sont déjà chargées dans le cache du navigateur. Si vous modifiez la valeur de cette propriété, vous devrez recharger l'image pour que les changements soient pris en compte.


Voir aussi nos tutoriel :

Base de donnees MySQL introduction

Base de donnees MySQL introduction

svg path

Les chemin pour déssiner en SVG   partie 1 tracer des lignes droites et des formes en lignes droites

Objet array js

Objet array js L'objet Array (tableau) : définition et utilisation