image-rendering: pixelated;
Ao recriar o projeto Pokedex com React e JavaScript, deparei-me com um pequeno problema ao tentar manipular as imagens que vinham da PokeAPI.
Quando tentava fazer qualquer tipo de transform na imagem, seja para aumentar durante o hover ou simplesmente para dar-lhe um leve efeito de inclinação, a mesma ficava desfocada, como de tivesse perdido a qualidade.
Após pesquisar, descobri que quando se aplica um transform o navegador tira a imagem do fluxo normal de renderização e a renderiza em um novo "layer"(camada), aplicando interpolação para suavisar ou realizar o transform. Em alguns casos, desfocando a imagem.
Vi diversas maneiras de resolução, porém a que serviu foi :
img{
image-rendering: pixelated;
}
E porque serviu ?
"image-rendering: pixelated" Força o navegador a preservar os pixels mais brutos evitando o "borramento".
Descobri também que é a solução criada para jogos 2d e que por isso funciona bem para sprites, o que é exatamente o caso das imagens dos pokemons da pokeAPI que estão referenciadas em results.url.sprites.front_default.
Sabe quando os recrutadores querem ver seu portfóliio e seu repositório cheios de projetos?
É que eles sabem que a cada projeto se descobre uma coisinha a mais.
Segue a imagem da Pokedex recriada em React/javascript e Bootstrap.
Seguem os links para o Github e da pagina já online com deploy via Netlify do citado projeto.
Github:
https://github.com/MarcussPablo/PokeDex-React
Página online:
-Marcus Lins, dev React em Formação.
