서론

image: auto

image pixelated

현재 회사에서는 픽셀아트를 이용해서 메타버스 플랫폼을 개발을 하고 있다. 캐릭터 이미지를 확대하거나 축소하면 흐릿해지는 문제가 발생하였다.

문제

내부적은 이미지 사이즈를 조절하면 브라우저 내에 특정 알고리즘으로 인해 loss가 발생해서 생기는 현상이다. 대부분의 이미지들은 픽셀아트처럼 사각형 형태의 이미지가 아니기에, 곡선처럼 다듬어져야 한다. 하지만, 내가 만드는 플랫폼은 픽셀아트이기에 해당 방식을 하면 안된다.

해결방법

css에서 image-rendering 옵션에 pixelated 주면 된다. 해당 옵션은 nearest neighbor을 이용하여 처리하기 때문에 픽셀이 깨지지 않는다. 그러므로 픽셀아트는 아래옵션을 기본적으로 해줘야 원하는 이미지를 볼 수 있을 것이다.

https://developer.mozilla.org/ko/docs/Web/CSS/image-rendering

archives.scssarchives.scss 
1
 
image-rendering: pixelated;