Atributo CSS image-rendering

Definición y uso

image-rendering Este atributo especifica el tipo de algoritmo utilizado para la escalado de imágenes.

Nota:Este atributo no es efectivo para imágenes no escaladas.

Ejemplo

Muestra los diferentes algoritmos disponibles para la escalado de imágenes:

.image {
  height: 100px;
  width: 100px;
  image-rendering: auto;
}
.crisp-edges {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
.pixelated {
  image-rendering: pixelated;
}
.smooth {
  image-rendering: smooth;
}
.high-quality {
  image-rendering: high-quality;
}

Pruebe usted mismo

Sintaxis de CSS

image-rendering: auto|smooth|high-quality|crisp-edges|pixelated|initial|inherit;

Valor del atributo

Valor Descripción
auto Deja que el navegador elija el algoritmo de escalado. Valor predeterminado.
smooth Usa un algoritmo para suavizar los colores en la imagen.
high-quality Es igual a smooth, pero prefiere la escalado de alta calidad
crisp-edges Usa un algoritmo para conservar la contraste y los bordes en la imagen.
pixelated

Si la imagen se amplía, se utiliza el algoritmo de vecindad más cercana, por lo que la imagen parecerá estar compuesta de píxeles grandes.

Si la imagen se reduce, es igual a auto.
initial Establece este atributo a su valor predeterminado. Ver: initial.
inherit Hereda este atributo de su elemento padre. Ver: inherit.

Detalles técnicos

Valor predeterminado: auto
Herencia: sí
Producción de animación: No se admite. Consulte:Atributos relacionados con la animación.
Versión: CSS3
Sintaxis de JavaScript: object.style.imageRendering="pixelated"

Compatibilidad del navegador

Los números en la tabla representan la versión del navegador que primero soportó esta propiedad completamente.

Chrome Edge Firefox Safari Opera
41.0 79.0 65.0 10.0 28.0

Chrome, Edge y Opera utilizan -webkit-optimize-contrast como alias para el valor crisp-edges.