Como desenvolvedores da Web, brincamos com imagens o tempo todo e, na maioria dos casos, os navegadores são ótimos para dimensionar imagens para se ajustar aos limites do design do site e manter 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) introduz uma nova propriedade CSS image-rendering: pixelated (Especificação) que oferece a você 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 o escalonamento suave padrão do navegador (normalmente interpolação bilinear) e o substituem por outro algoritmo de dimensionamento (vizinho mais próximo na maioria dos casos) ao redimensionar as imagens.
Imagine que você tivesse uma imagem de 2×2 pixels e a dimensionasse para 100×100 pixels. O navegador a renderizaria de modo que não a tornasse reta. Por exemplo:
Há muitos casos em que você não quer esse comportamento de suavização, usando um método que preserve 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 é possível notar, a aplicação da propriedade tem um efeito significativo na renderização da imagem.
Essa propriedade pode ser aplicada em vários lugares:
- Elementos
<img> - Elementos
<canvas style="image-rendering: pixelated"> - Qualquer elemento com uma propriedade
background-image
Ainda não entendi. Onde devo usar isso?
Se você está mostrando apenas fotos no seu site, provavelmente não vai querer isso.
Um ótimo caso de uso são os jogos: com frequência, você precisa ampliar a tela para que ela se encaixe corretamente no tamanho da tela. Antes dessa propriedade CSS, o navegador interpolava a tela de modo que ela ficaria desfocada (veja abaixo [sic]).
Se você estiver criando uma ferramenta de venda de passagens aéreas ou um app que exibe códigos QR, muitas vezes o usuário vai querer que ele fique em tela cheia para facilitar a leitura. Portanto, é fundamental controlar a renderização de imagens.
Se você quiser conferir a implementação, confira o Problema 317991 (link em inglês), que está aberto para a implementação do valor crisp-edges. Marque o problema com uma estrela para acompanhar a implementação.