Propriedade CSS image-rendering | Referência CSS W3docs

A propriedade CSS image-rendering informa ao navegador qual algoritmo de escalonamento usar quando uma imagem é exibida em um tamanho diferente de sua resolução natural (intrínseca). Ela controla como os pixels são interpolados — não se a imagem será escalonada.

Esta página explica o que cada valor faz, quando usar pixelated em vez de crisp-edges, como lidar com diferenças entre navegadores e inclui exemplos executáveis.

Quando devo usar isso?

Por padrão, o navegador aplica interpolação suave (bilinear ou bicúbica) ao escalonar uma imagem para cima ou para baixo. Isso fica ótimo para fotografias, mas embaça imagens que devem permanecer nítidas pixel a pixel. Use image-rendering quando:

Você está ampliando pixel art, sprites de jogos retrô ou ícones de 8 bits e quer que os pixels em bloco sejam preservados em vez de borrados.
Você está dando zoom em um código QR, código de barras ou diagrama técnico onde cada pixel tem significado.
Você escala deliberadamente uma imagem de baixa resolução e prefere bordas duras e nítidas em vez de um resultado suave e impreciso.
Você está criando um jogo baseado em canvas e quer que o navegador mantenha os pixels do canvas escalonado nítidos.

Para fotografias e gradientes, deixe em auto — a suavização é exatamente o que você quer nesses casos.

Dica

crisp-edges e pixelated são semelhantes, mas não idênticos. pixelated garante escalonamento por vizinho mais próximo; crisp-edges deixa cada navegador escolher um algoritmo nítido. Os autores geralmente listam ambos para que um sirva de fallback para o outro entre diferentes motores.

Valor Inicial	`auto`
Aplica-se a	Todos os elementos
Herdado	Sim
Animável	Discreto
Versão	CSS3
Sintaxe DOM	`object.style.imageRendering = "pixelated"`

Sintaxe

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

A propriedade aceita uma única palavra-chave. Não há forma abreviada.

Valores

Valor	Descrição
`auto`	O navegador escolhe um algoritmo que maximiza a qualidade visual. Para a maioria dos navegadores, isso significa interpolação bilinear ou bicúbica — suave, mas pode parecer borrado em pixel art. Este é o valor padrão.
`crisp-edges`	A imagem é escalonada sem suavização ou anti-aliasing. O navegador escolhe seu próprio algoritmo de alto contraste (pode ser vizinho mais próximo ou outro método nítido). Os resultados podem variar ligeiramente entre motores.
`pixelated`	Escalonamento estrito por vizinho mais próximo. Cada pixel de origem mapeia para um ou mais pixels de destino da mesma cor, sem mistura. Garante o visual de pixels em bloco em todos os navegadores compatíveis.
`initial`	Redefine a propriedade para seu valor padrão (`auto`).
`inherit`	Herda o valor do elemento pai.

`pixelated` vs `crisp-edges` — qual é a diferença?

Ambos os valores impedem a suavização, mas seus contratos diferem:

pixelated é uma especificação precisa: o navegador deve usar escalonamento por vizinho mais próximo. Cada pixel na saída mapeia exatamente para um pixel de origem — você obtém resultados duros, serrilhados e intencionalmente em bloco. É disso que os jogos de pixel art dependem.
crisp-edges diz "evite suavização e preserve o contraste", mas deixa o algoritmo a critério do navegador. O Firefox usa seu próprio algoritmo nítido; versões mais antigas do Safari usavam -webkit-optimize-contrast. O resultado visual é geralmente muito semelhante ao de pixelated, mas não é garantido que seja idêntico.

Para pixel art, prefira pixelated. Use crisp-edges como rede de segurança para navegadores mais antigos que não implementaram pixelated.

Exemplos

Comparação básica: auto vs pixelated

O exemplo abaixo mostra a mesma imagem pequena renderizada com o triplo de sua largura natural. A versão auto fica borrada; pixelated mantém bordas duras.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .pixelated {
        image-rendering: pixelated;
      }
      .wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
      }
      .resize {
        flex: 1 1 45%;
      }
      .resize img, .original img {
        width: 100%;
        display: block;
      }
      body {
        background-color: #ccc;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Image-rendering property example</h2>
    <div class="wrapper">
      <div class="original">
        <p>Original image size:</p>
        <img src="https://api.w3docs.com/uploads/media/default/0001/02/2895884641188df105fa653fee0b33c785dd7b3d.png" alt="W3docs logo" />
      </div>
      <div class="resize">
        <p><code>image-rendering: auto</code></p>
        <img src="https://api.w3docs.com/uploads/media/default/0001/02/2895884641188df105fa653fee0b33c785dd7b3d.png" alt="W3docs logo" />
      </div>
      <div class="resize">
        <p><code>image-rendering: pixelated</code></p>
        <img class="pixelated" src="https://api.w3docs.com/uploads/media/default/0001/02/2895884641188df105fa653fee0b33c785dd7b3d.png" alt="W3docs logo" />
      </div>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Resultado

Usando crisp-edges com um fallback

Como crisp-edges tem um histórico irregular (versões mais antigas do Safari exigiam -webkit-optimize-contrast), é mais seguro empilhar todas as três declarações. O navegador mantém o último valor que reconhece:

.sharp-upscale {
  image-rendering: -webkit-optimize-contrast; /* Safari < 13 */
  image-rendering: crisp-edges;               /* Firefox, most modern browsers */
  image-rendering: pixelated;                 /* Chrome, Edge, Safari 13+ */
}

Aplicando image-rendering a um background CSS

A propriedade funciona em background-image assim como em elementos <img>. Isso é útil para backgrounds de pixel art em mosaico:

.pixel-bg {
  background-image: url('sprite-sheet.png');
  background-size: 300%;        /* zoom in */
  image-rendering: pixelated;   /* keep pixels sharp */
}

Aplicando image-rendering a um elemento canvas

Quando você desenha em uma resolução lógica baixa em um <canvas> e depois escala o elemento via CSS, pixelated mantém os pixels do canvas nítidos — uma técnica comum para jogos de pixel art:

<canvas
  id="game"
  width="64"
  height="64"
  style="width: 320px; height: 320px; image-rendering: pixelated;"
></canvas>

Os atributos width/height definem a superfície de desenho (64 × 64 pixels). O width/height do CSS escala o elemento 5× na tela. Sem pixelated, o navegador borraria o canvas escalonado.

Pontos importantes a lembrar

Afeta apenas imagens escalonadas. Se uma imagem é exibida em seu tamanho natural, não há nada a interpolar, então image-rendering não tem efeito visível.
A herança pode surpreender você. A propriedade é herdada, portanto definir image-rendering: pixelated em um <div> se aplica a todos os <img> descendentes e imagens de background, a menos que você substitua.
pixelated também reduz o tamanho. O vizinho mais próximo também se aplica quando a imagem é menor que sua origem, o que pode parecer serrilhado. Para redução de escala geral, auto geralmente fica melhor.
Aplica-se a <img>, background-image, <canvas> e elementos SVG <image> — não a conteúdo vetorial (caminhos SVG inline) que o navegador rasteriza dinamicamente.
Telas HiDPI / Retina. Em uma tela 2×, pixel art exibida com image-rendering: pixelated aparecerá com 2 pixels CSS por pixel de origem. Considere fornecer uma regra @media (min-resolution: 2dppx) com uma imagem natural maior se quiser mais detalhes de pixels físicos.
object-fit é executado antes de image-rendering. A propriedade object-fit decide como a imagem preenche sua caixa; image-rendering então decide como o resultado escalonado fica.

Suporte a navegadores

pixelated tem bom suporte no Chrome, Edge, Safari 13+ e Firefox 93+. crisp-edges é suportado em todos os navegadores modernos (Firefox, Chrome, Safari, Edge) e é a escolha mais segura para código que deve funcionar em navegadores mais antigos. O valor legado -webkit-optimize-contrast é necessário apenas para o Safari 12 e anteriores.

Propriedades relacionadas

background-image — define imagens que image-rendering pode então tornar mais nítidas.
background-size — escala imagens de background, tornando image-rendering relevante.
object-fit — controla como um elemento substituído preenche sua caixa antes da renderização entrar em ação.
object-position — reposiciona a imagem dentro da caixa junto com object-fit.
width — redimensiona elementos, o que é o que aciona a importância de image-rendering.
filter — aplica efeitos visuais (desfoque, contraste, etc.) após a renderização.
Propriedades CSS3 — explore outras propriedades CSS modernas.

Prática

O que a propriedade CSS image-rendering controla?

Ela ajusta o tamanho do arquivo da imagem.Ela especifica o algoritmo usado para escalonar uma imagem para cima ou para baixo.Ela altera a cor de fundo atrás da imagem.Ela impede a mistura suave ao escalonar pixel art, mantendo os pixels nítidos.Ela cria uma borda ao redor da imagem.