본문 바로가기
CSS/Core

[CSS] image-rendering

by Jundol 2015. 11. 20.

본 포스팅은 MDN에 있는 변역되지 않은 문서를 번역 봉사에 참여한 후 블로그에 옮겨놓는 포스팅 입니다.



개요EDIT

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

문법EDIT

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.

공식 문법

How to read CSS syntax.

auto | crisp-edges | pixelated

예시EDIT

/* 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

사양EDIT

SpecificationStatusComment
CSS Image Values and Replaced Content Module Level 3
The definition of 'image-rendering' in that specification.
Candidate RecommendationInitial definition

Though initially close from the SVG image-rendering property, the values are quite different now.

브라우저 지원EDIT

FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support (auto)(Yes)3.6 (1.9.2)Not supported[1]11.606533.21.1, r86920
crisp-edgesNot supported3.6 (1.9.2)-mozNot supported11.60-o6533.21.1, r86920 with the non-standard name -webkit-optimize-contrast
pixelated41.0Not supported(bug 856337)Not supported26.0Not supported
optimizeQuality,optimizeSpeedNot supported3.6 (1.9.2)Not supported11.606533.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


댓글