Achei interessante e resolvi fazer um teste simples usando Aseprite, um programa bem famoso de pixel art.

Resultado final: https://github.com/refeals/megaman-html-css-pixelart

Primeiro criei um script para o Aseprite retornar as cores de todos os pixels da imagem. Lembrando que o script retorna #000000 para o pixel vazio, então setei a cor preta no Mega Man no Aseprite para #050505. Então transformei essa lista em divs com background-color da cor de cada linha do script e removi todos os #000000.

No meu caso, utilizei display: grid (poderia ser com table também).

Efetivamente, é possível colocar qualquer imagem no Aseprite com bons resultados. A única questão é ter que ajeitar na mão a width da imagem no CSS.

Que maneiro! Vi o código no git e ficou muito bom a lógica

Achei interessante e resolvi fazer um teste simples usando Aseprite, um programa bem famoso de pixel art. Resultado final: https://github.com/refeals/megaman-html-css-pixelart Primeiro cr...