Skip to main content

Image-rendering | CSS

  • Image-rendering | CSS

alt text

A propriedade image-rendering controla como o navegador deve “suavizar” ou “pixelar” uma imagem quando ela é redimensionada (zoom, scale, responsivo, etc).

Ela é muito usada em:

  • imagens pixel art
  • ícones em baixa resolução
  • spritesheets
  • previews com zoom (mapas, thumbnails)
  • canvas exportado como imagem

✅ Sintaxe​

img {
  image-rendering: auto;
}

🎯 Valores principais​

1) auto (padrão)​

O navegador escolhe o melhor método automaticamente (geralmente suaviza).

img { image-rendering: auto; }

Resultado: imagem tende a ficar mais “lisa” ao dar zoom.

2) smooth (nem sempre suportado igual em todos os browsers)​

Força suavização.

img { image-rendering: smooth; }

Resultado: menos serrilhado, mas pode ficar “borrado” em pixel art.

3) crisp-edges​

Tenta manter as bordas mais “duras”, reduzindo blur.

img { image-rendering: crisp-edges; }

Resultado: melhora nitidez em alguns casos, mas varia por navegador.

4) pixelated ✅ (mais usado para pixel art)​

Pede ao navegador para renderizar a imagem com pixels bem definidos.

img { image-rendering: pixelated; }

Resultado: fica com aparência “8-bit / retro”, ótimo pra sprites.

✅ Exemplo prático: Pixel Art (recomendado)​

.pixel-art {
  width: 256px;          /* aumenta o tamanho */
  height: 256px;
  image-rendering: pixelated;
}
<img class="pixel-art" src="sprite.png" alt="Sprite" />

✅ Usando em TSX (React)​

export function Sprite() {
  return (
    <img
      src="/sprite.png"
      alt="sprite"
      style={{
        width: 256,
        height: 256,
        imageRendering: "pixelated",
      }}
    />
  );
}

📌 No React, a prop vira imageRendering (camelCase).

✅ Exemplo: zoom sem borrar​

.preview {
  width: 200px;
  transform: scale(2);
  transform-origin: top left;
  image-rendering: pixelated;
}

⚠️ Observações importantes​

✅ Funciona melhor quando:​

  • a imagem é pequena (ex: 16x16, 32x32)
  • você aumenta em múltiplos inteiros (2x, 3x, 4x…)

❌ Pode ficar estranho quando:​

  • é uma foto normal (vai ficar “quadradona”)
  • redimensiona em valores quebrados (ex: 1.3x)

Compatibilidade (resumo)​

  • auto: ✅ todos
  • pixelated: ✅ moderno (Chrome/Edge/Firefox/Safari recentes)
  • crisp-edges: ✅ razoável, mas pode variar
  • smooth: ⚠️ inconsistente

Recomendações rápidas​

✅ Pixel art / sprites

image-rendering: pixelated;

✅ Imagem normal (foto)

image-rendering: auto;

✅ Quer nitidez sem pixelar demais

image-rendering: crisp-edges;