웹 개발자는 항상 이미지를 가지고 일하며 대부분의 경우 브라우저는 이미지를 예쁘게 유지하면서도 사이트 디자인의 경계에 맞게 이미지 크기를 조정하는 데 탁월합니다. 그런데 브라우저에서 페이지의 이미지 크기를 조정하는 방식을 제어하려고 하면 어떻게 될까요?
Chrome 41 (2015년 1월 베타 버전)에서는 브라우저에서 확장된 이미지를 렌더링하는 방식을 조금 더 세부적으로 제어할 수 있는 새로운 CSS 속성 image-rendering: pixelated (사양)이 도입되었습니다.
CSS 속성 image-rendering 및 값 pixelated는 이미지 크기를 조절할 때 브라우저의 표준 스무스 스케일링 (일반적으로 이중 선형 보간 유형)을 끄고 다른 크기 조정 알고리즘 (대부분의 경우 가장 가까운 이웃)으로 대체한다는 점에서 흥미롭습니다.
2×2픽셀인 이미지를 100×100픽셀로 확대하면 브라우저가 고르지 않게 보이도록 렌더링한다고 가정해 보겠습니다. 예를 들면 다음과 같습니다.
이러한 스무딩 동작을 원하지 않는 대신 이미지를 더 정확하게 표현하는 메서드를 유지하는 메서드를 사용하는 경우가 많습니다.
이 효과를 얻으려면 다음과 같이 이미지에 image-rendering: pixelated;를 적용하기만 하면 됩니다.
<img
style="image-rendering: pixelated;"
width="100" height="100"
src="data:image/png;base64,iVBORw0KGgoAAAA....Ik2kAAAAASUVORK5CYII=">
데모 사용해 보기 보시다시피, 속성의 적용은 이미지가 렌더링되는 방식에 큰 영향을 미칩니다.
이 속성은 다음과 같이 여러 위치에 적용될 수 있습니다.
<img>요소<canvas style="image-rendering: pixelated">요소background-image속성이 있는 요소
이번에도 이해하지 못했습니다. 어디에 사용해야 하나요?
사이트에 사진만 표시하고 있다면 이 기능을 원하지 않을 것입니다.
게임이 좋은 사용 사례로, 화면 크기에 맞게 캔버스를 확장해야 하는 경우가 많습니다. 이 CSS 속성 이전에는 브라우저가 캔버스를 흐릿하게 보간했습니다 (아래 [sic] 참조).
항공권 발권 도구 또는 QR 코드를 표시하는 앱을 빌드하는 경우 사용자는 스캔하기 쉽도록 전체 화면을 원하는 경우가 많으므로 이미지 렌더링을 제어하는 것이 중요합니다.
구현을 보려면 문제 317991을 참고하세요 (선명한 가장자리 값의 구현을 위해 열려 있습니다. 문제에 별표표시하여 구현을 추적하세요.