Support image-rendering

[yisibl]

Specs(CR)

http://dev.w3.org/csswg/css-images-3/#the-image-rendering

The standard value:

• auto
• crisp-edges
• pixelated

The old value

optimize-contrast’ = ‘crisp-edges’

Changed the ‘optimize-contrast’ value to ‘crisp-edges’, and rewrote the description slightly to reduce confusion in what it does.
http://www.w3.org/TR/2011/WD-css3-images-20110712/#changes

img {
  image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
  image-rendering:          -moz-crisp-edges;         /* Firefox */
  image-rendering:            -o-crisp-edges;         /* Opera */
  -ms-interpolation-mode:   nearest-neighbor;  /* IE (non-standard property) */
  image-rendering:               crisp-edges;
}

optimizeSpeed and optimizeQuality

This property previously accepted the values optimizeSpeed and optimizeQuality. These are now deprecated; a user agent must accept them as valid values but must treat them as having the same behavior as auto, and authors must not use them.

MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering
More:

• http://stackoverflow.com/questions/20678639/image-rendering-crisp-edges-vs-pixelated

[ai]

I send PR to Can I Use: Fyrd/caniuse#864

[ai]

We will not support -ms-interpolation-mode because (as I understand) IE uses different values.

[ai]

Done ai/autoprefixer-core@f59b70d

[simevidas]

I don’t understand the difference between crisp-edges and pixelated. From reading the spec, both seem to preserve pixels. Could you explain?

[ai]

Here is good explanation: http://stackoverflow.com/a/25278886

[simevidas]

@ai Thanks. According to that explanation, crisp-edges reduces pixelation, while pixelated does not reduce it. This is however, not what I’m seeing when testing -webkit-optimize-contrast (in Safari/iOS 8) and -moz-crisp-edges (in Firefox). In both cases, the pixels are completely preserved. Live demo is here.

I’m not happy with the current state of the spec and browser implementations. If things were more coherent, web developers could start using a single property for preserving pixels while up-scaling (this will become possible cross-browser soon as my demo shows), with Autoprefixer “filling in the blanks”. But with this dual-value approach, web devs will have to continue manually writing -ms- for IE and pixelated for Chrome to achieve this (or use a custom mixin).