Atributo CSS image-rendering

Definição e uso

image-rendering A propriedade especifica o tipo de algoritmo usado para escalonamento de imagens.

Nota:Essa propriedade não é válida para imagens não escalonadas.

Exemplo

Mostra os diferentes algoritmos disponíveis para escalonamento de imagens:

.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;
}

Experimente você mesmo

Sintaxe do CSS

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

Valor da propriedade

Valor Descrição
auto Deixa o navegador escolher o algoritmo de escalonamento. Valor padrão.
smooth Usa um algoritmo para suavizar as cores na imagem.
high-quality Igual a smooth, mas prefere a escalonamento de alta qualidade
crisp-edges Usa um algoritmo para preservar a contraste e as bordas na imagem.
pixelated

Se a imagem for ampliada, usa o algoritmo de vizinhos mais próximos, então a imagem parece composta por grandes pixels.

Se a imagem for reduzida, é o mesmo que auto.
initial Defina essa propriedade para seu valor padrão. Veja initial.
inherit Herda essa propriedade do elemento pai. Veja inherit.

Detalhes técnicos

Valor padrão: auto
Herança: sim
Produção de animação: Não suportado. Veja:Propriedades relacionadas a animação.
Versão: CSS3
Sintaxe do JavaScript: object.style.imageRendering="pixelated"

Suporte do navegador

Os números na tabela representam a versão do navegador que suporta completamente essa propriedade pela primeira vez.

Chrome Edge Firefox Safari Opera
41.0 79.0 65.0 10.0 28.0

Chrome, Edge e Opera usam -webkit-optimize-contrast como sinônimo para o valor crisp-edges.