Web/CSS 3

이미지 흐릿한 현상 해결하기 (픽셀아트)

서론 현재 회사에서는 픽셀아트를 이용해서 메타버스를 개발을 하고 있다. 픽셀 이미지를 확대하거나 축소하면 흐릿해지는 문제가 발생하였다. 문제 내부적은 이미지 사이즈를 조절하면 브라우저 내에 특정 알고리즘으로 인해 loss가 발생해서 생기는 현상이다. 이것은 당연한 증상이다. 현실은 픽셀아트처럼 사각형 형태의 이미지가 아니며, 곡선처럼 다듬어져야 하기에 그런 내부적으로 알고리즘이 있는 것이다. 해결방법 css에서 image-rendering 옵션을 주면 된다. 픽셀아트는 아래옵션을 기본적으로 해줘야 원하는 이미지를 볼 수 있을 것이다. https://developer.mozilla.org/ko/docs/Web/CSS/image-rendering image-rendering: pixelated;

Web/CSS 2022.05.07