Contact emails
Spec
Summary
Link to “Intent to Implement” blink-dev discussion
https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/Q8N6FoeoPXI
Is this feature supported on all five Blink platforms (Windows, Mac, Linux, Chrome OS and Android)?
Yes.
Demo link
http://jsfiddle.net/zda24/147/
Compatibility Risk
Similar functionality is supported on other browsers in the following forms:
Firefox: "image-rendering: -moz-crisp-edges"
Webkit: "image-rendering: -webkit-optimize-contrast"
IE: "-ms-interpolation-mode: nearest-neighbor"
The implementation in Blink conforms to the spec. Without this feature, Chrome is the only major browser where it is not possible to achieve the desired effect.
OWP launch tracking bug?
None.
Link to entry on the feature dashboard
None.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
[...] are other implementations really interoperable? Are there tests that compare the behavior across browsers?
On 27 June 2014 06:29, Dirk Schulze <dsch...@chromium.org> wrote:
[...] are other implementations really interoperable? Are there tests that compare the behavior across browsers?
The MDN page https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering as well as this other test page http://phrogz.net/tmp/canvas_image_zoom.html tell developers to use the combination ofimage-rendering:-moz-crisp-edges; /* Firefox */image-rendering:-o-crisp-edges; /* Opera */image-rendering:-webkit-optimize-contrast; /* Safari */image-rendering:optimize-contrast; /* CSS3 Proposed */image-rendering:crisp-edges; /* CSS4 Proposed */image-rendering:pixelated; /* CSS4 Proposed */-ms-interpolation-mode:nearest-neighbor; /* IE8+ */
Oh the -vendor-prefixed-huge-manatee, can we get them to all agree on a name so this isn't required?
It seems clear something like this is desired. It's not clear to me
from reading the spec what the difference between crisp-edges or
pixelated means, but LGTM.
This is not clear from the spec though.
On Jun 27, 2014, at 2:57 AM, Mike Lawther <mikel...@chromium.org> wrote:
> On 27 June 2014 10:34, Eric Seidel <ese...@chromium.org> wrote:
> It seems clear something like this is desired. It's not clear to me
> from reading the spec what the difference between crisp-edges or
> pixelated means, but LGTM.
>
> 'crisp-edges' is intended to allow the UA to use advanced pixel art scaling algorithms such as described here http://research.microsoft.com/en-us/um/people/kopf/pixelart/. Demos here http://research.microsoft.com/en-us/um/people/kopf/pixelart/supplementary/multi_comparison.html and here http://research.microsoft.com/en-us/um/people/kopf/pixelart/supplementary/video_multi_comparison_4x_h264.mp4. In the absence of anything more advanced, a UA can fall back to nearest-neighbour.
>
> 'pixelated' requires the use of nearest-neighbour scaling.
Your examples use nearest neighbor for pixel art. The specification says pixel art should use crisp-edges which is nearest neighbor for most implementations but the CSS Image spec — even for WebKit.
Your pasted snippet is not entirely correct. WebKit implements optimize-contrast and crisp-edges and treats them both the same.
(Both as kCGInterpolationLow for OS X. Apple doesn’t say which interpolation algorithm it is using but it is likely nearest neighbor.)
So we have interoperability for "nearest neighbor like algorithm" == crisp-edges in Firefox, Opera (old), Safari. However, the spec says that crisp-edges is something different without being specific. Actually the spec seems to be intentionally unspecific. (Visual examples would probably help to understand the intention of the keywords.)
‘pixelated’ as term is not implemented by any browser but Blink IIRC and faced public skepticism before.
How is Blink’s status for ‘crisp-edges’? How would Blink implement ‘crisp-edges’ as specified?
Following some feedback by Mozilla, the specification has recently changed with regards to downscaling (previously, nearest neighbor was to only be applied when upscaling) - will Blink align with it (in Chrome 38 already? in Chrome 39?)?
- RESOLVED: Allow nearest neighbor for image rendering in both directions but allow browsers to do prettier in the down directions.