[image-rendering]이미지 렌더링

HTML&CSS

두루루루루 2018. 7. 4. 00:21

* 웹 크롬에서 이미지 작업을 했을때 이미지가 흐릿하게 보이면서 글자가 선명하게 보이지 않는 현상이 발생했다.(도덕책...왜..)

왼쪽 ie11 / 오른쪽 크롬(버전 62이상)

A주임님이 전달해준 css3 image-rendering 값으로 해결함.

이 프로퍼티는 이미지 scale과 관련하여 이미지 렌더링 방식에 대해 컨트롤할수있게 해줍니다.

1. MDS에서의 image-rendering에 대하여

image-rendering CSS 프로퍼티는 브라우저의 이미지 스케일링 방식에 대한 힌트를 제공합니다. 이 프로퍼티는 엘리먼트 자신에게 적용시킵니다. 스케일링(크기변경)이 안 된 이미지에게는 적용되지 않습니다.

예를들어, 100x100 픽셀의 이미지가 있는데 페이지에서 요구하는 이미지는 200x200픽셀 (혹은 50x50px)

이라면, 이미지는 새로운 면적만큼의 특정 알고리즘으로 인해 확대(혹은 축소)됩니다. 스케일링은 사용자

의 상호작용(줌기능) 으로 인해 일어날겁니다.

2. scale과 image

img {

image-rendering: auto; image-rendering: crisp-edges; image-rendering: pixelated; }

원본 이미지를 기준으로 해서 이미지가 확대 혹은 축소될때 영향을 끼침.

아래 그림으로 각 속성값에 따른 이미지 렌더링을 확인해보자.

- 이미지에만 적용된다.(!)

- auto가 기본값이고 상속된다.

- 크롬은 crisp-edges를 지원하지 않으며 ie는 부분적 지원(background와 canvas는 지원안하고 img도 부분지원,,,엣지는 아예 지원x)

나는 이 프로퍼티를 포토샵의 폰트 윤곽에 대입해서 이해하기로 함......

smooth = crisp-edges / none = pixelated 같이....폰트 윤곽 처리랑 유사한것 같다는 생각이 듬,,

*참고자료*

이외의 이미지 흐림 이슈가 있다면 veiwport와 이미지 perspective를 확인해보자