MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

image-rendering

현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

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
Mediavisual
Computed valueas specified
Animatableno
Canonical orderthe 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" 속성과 같습니다.
The values 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% squares.gif 100% squares.gif 138% squares.gif downsized hut.jpg upsized blumen.jpg

image-rendering: pixelated; (-ms-interpolation-mode: nearest-neighbor)

78% squares.gif 100% squares.gif 138% squares.gif downsized hut.jpg upsized blumen.jpg

image-rendering: crisp-edges; (-webkit-optimize-contrast)

78% squares.gif 100% squares.gif 138% squares.gif downsized hut.jpg upsized blumen.jpg

사양

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 

문서 태그 및 공헌자

 이 페이지의 공헌자: Hmmim
 최종 변경: Hmmim,