현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.
This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes.
개요
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 |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 41.0 | ? | ? | ? | ? |
노트
[1] 인터넷 익스플로러 7 과 8 버전에서는 표준으로 제공하지 않습니다. -ms-interpolation-mode
property 와 두 속성값입니다. (bicubic
과 nearest-neighbor
):
- 이미지에게만 적용됩니다. (JPG, GIF, PNG, ...)
- IE7에서는 투명이 아닌 이미지에게만 적용됩니다.
- 속성이 상속되지 않습니다.
- IE7에서의 기본값 :
nearest-neighbor
(저화질) - IE8에서의 기본값:
bicubic
(고화질) - IE9에서는 폐지됨
캔버스에서는 수동으로 속임수처럼 조작할 수 있는 방법을 제공합니다.
fallback solution for crisp-edge/optimize-contrast