본 포스팅은 MDN에 있는 변역되지 않은 문서를 번역 봉사에 참여한 후 블로그에 옮겨놓는 포스팅 입니다.
개요
image-rendering CSS 프로퍼티는 브라우저의 이미지 스케일링 방식에 대한 힌트를 제공합니다. 이 프로퍼티는 엘리먼트 자신에게 적용시킵니다. 스케일링(크기변경)이 안 된 이미지에게는 적용되지 않습니다.
예를들어, 100x100 픽셀의 이미지가 있는데 페이지에서 요구하는 이미지는 200x200픽셀 (혹은 50x50px)이라면, 이미지는 새로운 면적만큼의 특정 알고리즘으로 인해 확대(혹은 축소)됩니다. 스케일링은 사용자의 상호작용(줌기능) 으로 인해 일어날겁니다.
| 초기값 | auto |
|---|---|
| 적용대상 | all elements |
| 상속 | yes |
| Media | visual |
| Computed value | as specified |
| Animatable | no |
| Canonical order | the unique non-ambiguous order defined by the formal grammar |
문법
image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;
/* Global values */
image-rendering: inherit;
image-rendering: initial;
image-rendering: unset;Values
auto- 기본값입니다.
이미지의 스케일링 알고리즘은 이미지를 최대치로 활용해서 나타냅니다. 특히, 스케일링 알고리즘은 이중선형보간법같은 알고리즘이 보기에 괜찮은 "부드러운"색상을 나타냅니다. 사진같은 종류의 것들을 위해 GEcko엔진 1.9버전(파이어폭스 3.0) 에서는 이중선형 리샘플링(고품질) 을 사용해왔습니다.
crisp-edges- 이미지 스케일링 알고리즘은 반드시 색상대조와 이미지의 표준을 맞게 보존해야 합니다. 그리고 smooth 하지 못한 색상 혹은 이미지의 흐림효과 또한 알고리즘 공정에 있어야합니다. 이 속성은 픽셀아트같은 의도되어 만들어진 이미지들에게 필요합니다.
pixelated- 이미지 스케일링을 크게 확대할 때는 "nearest neighbor" 혹은 비슷한 알고리즘을 반드시 사용해야 합니다. 그래서 이미지의 큰 픽셀로 구성해서 나타낼 수 있습니다. 이미지를 작게 축소할 때는 "auto" 속성과 같습니다.
optimizeQuality and optimizeSpeed present in early draft (and coming from its SVG counterpart) are defined as synonyms for the auto value.공식 문법
auto | crisp-edges | pixelated
예시
/* applies to GIF and PNG images; avoids blurry edges */
img[src$=".gif"], img[src$=".png"] {
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}div {
background: url(chessboard.gif) no-repeat 50% 50%;
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}Live Examples
image-rendering: auto;
78% 
100% 138% downsized 
upsized 
image-rendering: pixelated; (-ms-interpolation-mode: nearest-neighbor)
78% 100% 138% downsized upsized
image-rendering: crisp-edges; (-webkit-optimize-contrast)
78% 100% 138% downsized upsized
사양
| Specification | Status | Comment |
|---|---|---|
| CSS Image Values and Replaced Content Module Level 3 The definition of 'image-rendering' in that specification. | Candidate Recommendation | Initial definition |
Though initially close from the SVG image-rendering property, the values are quite different now.
브라우저 지원
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
Basic support (auto) | (Yes) | 3.6 (1.9.2) | Not supported[1] | 11.60 | 6533.21.1, r86920 |
crisp-edges | Not supported | 3.6 (1.9.2)-moz | Not supported | 11.60-o | 6533.21.1, r86920 with the non-standard name -webkit-optimize-contrast |
pixelated | 41.0 | Not supported(bug 856337) | Not supported | 26.0 | Not supported |
optimizeQuality,optimizeSpeed | Not supported | 3.6 (1.9.2) | Not supported | 11.60 | 6533.21.1, r86920 |
노트
[1] 인터넷 익스플로러 7 과 8 버전에서는 표준으로 제공하지 않습니다. -ms-interpolation-modeproperty 와 두 속성값입니다. (bicubic 과 nearest-neighbor):
- 이미지에게만 적용됩니다. (JPG, GIF, PNG, ...)
- IE7에서는 투명이 아닌 이미지에게만 적용됩니다.
- 속성이 상속되지 않습니다.
- IE7에서의 기본값 :
nearest-neighbor(저화질) - IE8에서의 기본값:
bicubic(고화질) - IE9에서는 폐지됨
캔버스에서는 수동으로 속임수처럼 조작할 수 있는 방법을 제공합니다.
fallback solution for crisp-edge/optimize-contrast
MDN 영어 원본 : https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering
MDN 원본 번역 : https://developer.mozilla.org/ko/docs/Web/CSS/image-rendering
댓글