이 포스트에서는 CSS를 이용해 이미지를 픽셀화로 렌더링하는 방법을 설명합니다.
컴퓨터에서 그래픽 이미지를 처리하는 방식은 비트맵 방식과 벡터 방식이 있습니다. 벡터 방식은 이미지를 선으로 이루어진 정보로 저장하기 때문에 확대해도 모양이 깨지지 않지만, 비트맵 방식은 점묘화(여러 개의 점을 빽빽이 찍어서 그림을 그리는 기법)처럼 색깔이 있는 점을 배열해서 그림을 표현하는 방식이기 때문에 확대하면 소위 ‘계단 현상’이 발생합니다. 웹 페이지에서 흔히 쓰는 JPG나 GIF, PNG 등이 비트맵 이미지 방식입니다.
그래서 웹 브라우저에서는 이미지를 확대하면 원래의 픽셀에 해당하는 부분 사이를 매끈하게 처리해서 깔끔하게 보이게 하는 처리를 합니다. 이를 ‘안티 에일리어싱'(Anti-aliasing)이라고 부릅니다.
하지만 픽셀아트나 고전게임 이미지 등에는 오히려 안티 에일리어싱을 적용하지 않아야만 이미지가 깔끔해지는 경우가 있을 수 있는데, CSS로 이 처리를 할 수 있습니다.
위의 이미지는 체스판 이미지인데, 폭과 높이가 각각 32픽셀인 정사각형입니다.
위 그림은 앞의 체스판을 8배로 확대한 예인데, 안티 에일리어싱 효과가 적용되었기 때문에 체스판의 칸 경계에 해당하는 부분이 살짝 뭉개져 있습니다. 이를 막으려면,
selector {
image-rendering: pixelated;
}
위와 같은 CSS를 적용하면 됩니다.
앞의 체스판을 8배로 확대하고 픽셀화 CSS를 적용한 예입니다. 칸 경계가 뭉개지지 않고 깔끔하게 나옵니다.
이와 같이 CSS를 통해 이미지의 픽셀화 렌더링을 적용할 수 있습니다.
참고: 이 CSS는 아직까지는 지원하는 브라우저가 제한적입니다. 크롬 41.0 이상 및 오페라 26.0 이상에서만 지원합니다. 그 외의 브라우저에서는 지원하지 않아서 두 그림이 똑같이 보입니다. 단, HTML5에서 추가된 <canvas> 태그를 이용해 우회적으로 구현할 수는 있습니다.