Update needed for image-rendering?

[Malvoz]

MDN image-rendering suggests the following fallback declarations:

.pixelated {
  -ms-interpolation-mode: nearest-neighbor;
  image-rendering: pixelated;
}

.crisp-edges {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

Currently autoprefixer is different in that:

• crisp-edges is not prefixed with -webkit-optimize-contrast
• pixelated is prefixed with -webkit-optimize-contrast

Related issue: #449.

[Malvoz]

cc @magsout, @simevidas, @mathiasbynens

[Malvoz]

I think https://bugs.chromium.org/p/chromium/issues/detail?id=903021 suggests indeed an update is needed, and also perhaps extend to support image-rendering: smooth prefixed with (deprecated) optimizeQuality.

[ai]

I think we can do something reasonable with 'smooth' and 'high-quality', but not really 'crisp-edges'. The way '-webkit-optimize-contrast' is currently is via a bilinear filter... which is not really what's intended by 'crisp-edges' the way I read the spec.

Seems like -webkit-optimize-contrast is not 100% equal to crisp-edges or pixelated.

Do we really need to change these very old prefixes? Seems like modern browsers support unprefixed version.

[simevidas]

Autoprefixer currently does what is most useful to websites.

The spec (example 19, figure 4) suggests that image-rendering: pixelated should fully preserve pixels.

Chrome and Safari support this, but Firefox (bug) and IE don’t.

/* input */
img {
    image-rendering: pixelated;
}

/* Autoprefixer output */
img {
    -ms-interpolation-mode: nearest-neighbor; /* needed for IE */
        image-rendering: -moz-crisp-edges; /* needed for Firefox */
        image-rendering: pixelated;
}

Test page: https://output.jsbin.com/jopexoy/quiet

Autoprefixer adds these two non-standard declarations to ensure that pixelated preserves pixels in all browsers.

@Malvoz Is there a difference between pixelated and crisp-edges in today’s browsers? Safari supports both values, but I haven’t yet tested its implementation.