반응형
파이어폭스와 ie7등에서 원본 이미지보다 작게 사이즈를 줄여서 코딩할 경우, 이미지 깨짐현상이 일어난다.
ie8에서는 봐줄만하다.
브라우저의 이미지 렌더링 방식의 차이로 인해서 생기는 일인데.
https://developer.mozilla.org/en/CSS/image-rendering
위에서 참고하면 파폭은 기본적으로 처리속도를 위하여 이미지 렌더링 방식을 nearest neighbor resampling (low quality)을 사용하여 퀄리티가 떨어지게 나온다.
image-rendering: optimizeQuality 로 적용시 blur처리가 되어 제데로 보인다(high quality)
만화책 자주 볼때 보던 bicubic이 blur를 처리해 부드럽게 보이는 대신 리소스를 더 먹고
nearest neighbor가 sharp한 느낌으로 리소스를 덜 먹는다.
image-rendering: auto | inherit | optimizeSpeed | optimizeQuality | -moz-crisp-edges | -o-crisp-edges
그리고 ie7에서는 -ms-interpolation-mode: bicubic; 이렇게 적용한다.
ie8에서 blur가 아닌 날카롭게 보이려면(low quality) -ms-interpolation-mode: nearest-neighbor; 이렇게 적용한다.
자세한 내용은 상단 MDN 링크에서..
반응형