A image-renderingpropriedade define como o navegador deve renderizar uma imagem se ela for aumentada ou diminuída de suas dimensões originais. Por padrão, cada navegador tentará aplicar aliasing a essa imagem dimensionada para evitar distorção, mas às vezes isso pode ser um problema se quisermos que a imagem preserve sua forma original em pixels.
img ( image-rendering: auto; image-rendering: crisp-edges; image-rendering: pixelated; )Sobre esses três valores possíveis:
auto: valor padrão que usa o algoritmo padrão do navegador para maximizar a aparência de uma imagem.crisp-edges: o contraste, as cores e as bordas da imagem serão preservados sem qualquer suavização ou desfoque. De acordo com as especificações, isso foi projetado especificamente para pixel art. Este valor se aplica a imagens ampliadas ou reduzidas.pixelated: à medida que a imagem muda de tamanho, o navegador preserva seu estilo pixelado usando a escala do vizinho mais próximo. Este valor se aplica apenas a imagens que são ampliadas.
Esta propriedade pode ser aplicada a imagens de fundo, canvaselementos e imagens embutidas. É importante observar, no entanto, que testar esses valores neste momento é particularmente confuso devido à falta de suporte consistente do navegador.
Exemplo
Aqui está uma pequena imagem embutida composta de quatro pixels coloridos:
Se alterarmos a largura desta imagem embutida para 300pxentão no Chrome (41), descobriremos que o navegador tentou otimizar a imagem da melhor maneira possível:
Para preservar sua aparência pixelizada original, podemos usar o seguinte pixelatedvalor, assim:
img ( image-rendering: pixelated; )Isso faz com que o navegador escolha um algoritmo alternativo para processar a imagem. Neste exemplo, o Chrome removerá o aliasing padrão:
Infelizmente, depois de muitos testes, parece que os navegadores interpretam os valores crisp-edgese de pixelatedmaneiras muito confusas no momento, portanto, é importante observar mais uma vez que esta especificação está em seus primeiros dias. Por exemplo, o Chrome parece renderizar pixelatedimagens da mesma forma que o Firefox e o Safari fazem crisp-edges.
Exemplo de código QR
Outro caso de uso dessa propriedade pode ser para códigos QR em que você deseja aumentar seu tamanho sem distorcê-lo usando o anti-aliasing padrão. Certifique-se de verificar este exemplo no modo de tela inteira para ver o alongamento da imagem:
Veja a demonstração de renderização de imagens da caneta por Robin Rendle (@robinrendle) no CodePen.
Alternar exemplo
Na Caneta abaixo é possível alternar entre esses valores e ver as discrepâncias entre os navegadores:
Veja a demonstração de renderização da imagem da caneta por Robin Rendle (@robinrendle) no CodePen.
Suporte de navegador
crisp-edgesatualmente requer prefixos de fornecedor ( -moz-crisp-edges) para obter o melhor suporte possível.
Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.
Área de Trabalho
| cromada | Raposa de fogo | IE | Beira | Safári |
|---|---|---|---|---|
| 41 | 3,6 * | 11 * | 79 | 10 |
Celular / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 * | 81 | 10,0-10,2 |
No momento desta atualização, o Firefox 61 era compatível, crisp-edgesmas não era, pixelatede o Chrome 68 era compatível, pixelatedmas não era crisp-edges.