Support image-rendering

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

[simevidas]

@AXXOrganic Autoprefixer currently handles only the pixelated value from the spec. As far as I can tell, running image-rendering: pixelated through Autoprefixer produces a set of properties which ensure that the image is rendered in accordance with the spec, in all browser engines. The other two values, auto and crisp-edges are not handled by Autoprefixer, due to their lack of support in browsers. This is an issue with browsers, not Autoprefixer.

[MacyEleanorMay]

My trouble is that I read the word standard ALL over the place when it comes to the attributes for this so-called proposed ‘standard’. Each and every browser out there accepts different values and respond totally different to those exact same values. This is non-serious and should def. not be labelled a standard. CSS has no standards. At least no one (Browsers) are adhering to them ! Which basically voids the terminology. Wishful thinking would be more appropriate. Standard NO!

In regards to Auto… Automatic implies that the browser should/can choose what is best depending on its intelligence… The keyword AUTO - singlehandedly - voids the use for the image-rendering property in the first place… I take that the browser ALREADY decides how to best render any given image… WITHOUT me or anyone else having to specify the image-rendering prop. at all. So attributing the keyword auto to this property is only adding to the confusion.

This is SO simple in reality.

Q) Why would a developer WANT to use image-rendering in the first place ??? A) To control HOW the UA renders the imagery.

Q) How Much control does a developer gain by using a setting called AUTO ? A) A 3rd grader could answer this question !!! NONE - he relinquishes it !

Instead of breaking your heads with terminology - IMO you would be better off just dubbing the three options with Mode 1, Mode 2, Mode 3. Optimize Contrast, Crisp Edges are adjectives subject to interpretation and highly misleading when it comes to graphics ! At least the word contrast in common terms is NOT referring to the sharpness of the edges. And Crisp Edges sounds like something NOT in an image. Dub the Attributes for the people who USE them not the people who PROGRAM / Invent them!

No wonder the web is such a mess !