Como desenvolvedores Web, sempre brincamos com imagens e, na maioria dos casos, os navegadores são ótimos para dimensionar imagens de acordo com os limites dos designs do site, mantendo as imagens bonitas. Mas o que acontece quando você quer controlar como o navegador dimensiona as imagens na sua página?
O Chrome 41 (Beta em janeiro de 2015) apresenta uma nova propriedade CSS image-rendering: pixelated (Spec), que oferece um pouco mais de controle sobre como o navegador renderiza uma imagem ampliada.
A propriedade CSS image-rendering e o valor pixelated são interessantes porque desativam a
escala suave padrão do navegador (normalmente a interpolação bilinear) e a substituem por outro
algoritmo de escalonamento (o vizinho mais próximo na maioria dos casos) ao redimensionar as imagens.
Imagine que você tinha uma imagem de 2×2 pixels e a redimensionou para 100×100 pixels. O navegador renderia a imagem de uma forma que não a deixasse com aparência de bloco. Por exemplo:
Há muitos casos em que você não quer esse comportamento de suavização e, em vez disso, usa um método que preserva uma representação mais precisa da imagem.
Para conseguir esse efeito, basta aplicar image-rendering: pixelated; à imagem da seguinte maneira.
<img
style="image-rendering: pixelated;"
width="100" height="100"
src="data:image/png;base64,iVBORw0KGgoAAAA....Ik2kAAAAASUVORK5CYII=">
Teste a demonstração. Como você pode ver, a aplicação da propriedade tem um efeito significativo na renderização da imagem.
Essa propriedade pode ser aplicada em vários lugares:
<img>elementos<canvas style="image-rendering: pixelated">elementos- Qualquer elemento com uma propriedade
background-image
Ainda não entendi. Onde devo usar isso?
Se você está apenas mostrando fotos no seu site, provavelmente não quer isso.
Um ótimo caso de uso são os jogos, em que você precisa aumentar a tela para que ela se ajuste corretamente ao tamanho da tela. Antes dessa propriedade do CSS, o navegador interpolava a tela de modo que ela ficasse desfocada (veja abaixo [sic]).
Se você estiver criando uma ferramenta de venda de passagens aéreas ou um app que mostra códigos QR, o usuário provavelmente vai querer que ele apareça em tela cheia para facilitar a leitura. Portanto, é fundamental controlar a renderização de imagens.
Se você quiser conferir a implementação, confira a Issue 317991 (em inglês). Ela foi deixada aberta para a implementação do valor de bordas nítidas. Marque o problema com um marcador para acompanhar a implementação.