웹 개발자는 항상 이미지를 사용합니다. 대부분의 경우 브라우저는 이미지를 예쁘게 유지하면서 사이트 디자인의 경계에 맞게 이미지를 조정하는 데 탁월합니다. 그런데 브라우저에서 페이지의 이미지 크기를 조정하는 방식을 제어하려고 하면 어떻게 될까요?
Chrome 41 (2015년 1월 베타)에는 브라우저가 확대된 이미지를 렌더링하는 방식을 더 세밀하게 제어할 수 있는 새로운 CSS 속성 image-rendering: pixelated (사양)이 도입되었습니다.
CSS 속성 image-rendering 및 값 pixelated는 이미지 크기를 조절할 때 브라우저의 표준 원활한 크기 조정 (일반적으로 이중 선형 보간)을 사용 중지하고 다른 크기 조정 알고리즘 (대부분의 경우 가장 가까운 이웃)으로 대체하기 때문에 흥미롭습니다.
2x2픽셀의 이미지를 100x100픽셀로 확대한다고 가정해 보겠습니다. 그러면 브라우저는 이미지가 블록처럼 보이지 않도록 렌더링합니다. 예를 들면 다음과 같습니다.
이러한 평활화 동작을 원하지 않고 대신 이미지를 더 정확하게 표현하는 메서드를 사용하는 경우가 많습니다.
이 효과를 얻으려면 다음과 같이 이미지에 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 속성 이전에는 브라우저가 캔버스를 모자이크 처리하여 흐리게 표시했습니다 (아래 참고).
항공사 티켓 판매 도구 또는 QR 코드를 표시하는 앱을 빌드하는 경우 사용자는 더 쉽게 스캔할 수 있도록 전체 화면으로 표시하기를 원할 수 있으므로 이미지 렌더링을 제어하는 것이 중요합니다.
구현에 대해 자세히 알아보려면 문제 317991을 확인하세요 (선명한 가장자리 값 구현을 위해 열려 있음). 구현을 추적하려면 문제에 별표표시하세요).