Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla
Vos résultats de recherche

    image-rendering

    Résumé

    La propriété CSS image-rendering agit comme un indice pour l'user-agent afin de savoir comment il doit procéder pour le rendu des images.
    image-rendering s'applique aux images redimensionnées (et à d'autres éléments, voir plus bas). Par exemple, si la taille naturelle d'une image est 100×100px mais que l'auteur de la page spécifie ces dimensions comme 200×200px (ou 50×50px), alors l'image devra être agrandie (ou réduite) aux nouvelles dimensions en utilisant l'algorithme spécifié. La mise à l'échelle peut aussi être appliquée suite à une interaction avec l'utilisateur (effet de zoom).

    Syntaxe

    image-rendering:  auto | inherit | optimizeSpeed | optimizeQuality | -moz-crisp-edges | -o-crisp-edges 

    Valeurs

    auto
    Valeur par défaut, dépend de l'user-agent. Depuis la version 1.9 de Gecko (Firefox 3.0), Gecko utilise le redimensionnement bilinéaire (haute qualité).
    optimizeQuality
    Indique que l'user-agent doit mettre l'accent sur ma qualité plutôt que sur la rapidité de rendu. Gecko utilise le redimensionnement bilinéaire (haute qualité).
    optimizeSpeed
    L'user-agent utilise un algorithme de redimensionnement qui doit être rapide. Actuellement Gecko (Firefox) utilise le redimensionnement avec le plus proche voisin (qualité basse).
    -moz-crisp-edges | -o-crisp-edges
    Extensio Mozilla. Gecko (Firefox) utilise toujours le redimensionnement avec le plus proche voisin (qualité basse). utilisez cette valeur pour éviter que les bords des images agrandies soient flous. bug 423756.
    -webkit-optimize-contrast
    Extension WebKit (WebKit bug 56627). WebKit utilise un redimensionnement pixellisant. L'algorithme resemble à celui du plus proche voisin, mais ça peut être une version spécifique à WebKit, et d'autres algorithme peuvent êre utilisés pour cela aussi. Utilisez cette valeur pour éviter que les bords des images agrandies soient flous.
    • Actuellement auto et optimizeQuality sont égales par défaut, ils aboutissent tous deux à un redimensionnement bilinéaire.
    • Actuellement optimizeSpeed et -moz-crisp-edges sont égales, elles aboutissent toutes deux à un redimensionnement avec le plus proche voisin.
    • Attention : à la différence du moteur de rendu Gecko, optimizeSpeed et -webkit-optimize-contrast ne signifient par la même chose dans WebKit.

    Exemples

    img  { 
           image-rendering: optimizeQuality;  /* Firefox 3.6+ ; comportement identique à celui par défaut, pas besoin de spécifier */
           -ms-interpolation-mode: bicubic;   /* Internet Explorer 7.0 ; par défaut dans IE8+ */
         }
    /* s'applique aux GIF et aux PNG ; évite les bords flous */
    
    img[src$=".gif"], img[src$=".png"] {
    
                       image-rendering: -moz-crisp-edges;         /* Firefox */
                       -ms-interpolation-mode: nearest-neighbor;  /* IE */
                     }
    html  { image-rendering: -moz-crisp-edges; }        /* toutes les images, vidéos, images d'arrière-plan */
    img   { -ms-interpolation-mode: nearest-neighbor; } /* toutes les images, IE */
    
    div { 
            background: url(chessboard.gif) no-repeat 50% 50%;
            image-rendering: -moz-crisp-edges;
    }
    video { image-rendering: optimizeSpeed; }

    Exemples en direct

    image-rendering:optimizeQuality; -ms-interpolation-mode:bicubic;
    78%squares.gif 100%squares.gif 138%squares.gif réduitehut.jpg agrandieblumen.jpg

    image-rendering:-moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering:-webkit-optimize-contrast; -ms-interpolation-mode:nearest-neighbor;
    78%squares.gif 100%squares.gif 138%squares.gif réduitehut.jpg agrandieblumen.jpg

    Notes

    • bug 486918 (qualité d'image très mauvaise en réduction)

    Spécifications

    Spécification Statut Commentaire
    Scalable Vector Graphics (SVG) 1.1 (Second Edition) Recommendation  

    Il n'y a pas de spécification CSS définissant cette propriété.

    Compatibilité des navigateurs

    Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Support de base

    image-rendering: auto | -webkit-optimize-contrast

    3.6 (1.9.2)
    image-rendering
    7.0
    -ms-interpolation-mode: bicubic | nearest-neighbor
    • s'applique seulement aux images (JPG, GIF, PNG, ...)
    • dans IE7 seulement pour les images sans ransparence
    • n'est pas héritée
    • valeur par défaut dans IE7 : nearest-neighbor (qualité basse)
    • valeur par défaut dans IE8 et plus : bicubic (haute qualité)

    11.60

    image-rendering: auto | -o-crisp-edges | optimizeSpeed | optimizeQuality

    6533.21.1, r86920

    image-rendering: auto | optimizeSpeed | optimizeQuality | -webkit-optimize-contrast

    • -webkit-optimize-contrast est similaire à -moz-crisp-edges, dans le fait qu'il sélectionne un algorithme pixellisant en addition à l'agorithme de redimensionnement qui rend l'image floue. L'algorithme pixellisant semble être celui du plus proche voisin.
    • -webkit-optimize-contrast à été implémenté dans les versions quotidiennes de WebKit depuis le 20 mai 2011.
    Fonction Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Support de base ? ? ? ? ?

    Référez-vous aussi à Microsoft MSDN propriété -ms-interpolation-mode (en).

    Canvas peut être une solution de replis pour crisp-edge/optimize-contrast à l'aide de la manipulation manuelle de imageData.

    Étiquettes et contributeurs liés au document

    Contributors to this page: teoli, DavidWalsh, FredB
    Dernière mise à jour par : teoli,
    Masquer la barre latérale