Bug 40881 - Authors require control over image interpolation methods
: Authors require control over image interpolation methods
Status: RESOLVED DUPLICATE of bug 56627
: WebKit
CSS
: 528+ (Nightly build)
: All All
: P2 Enhancement
Assigned To:
:
:
:
:
  Show dependency treegraph
 
Reported: 2010-06-19 14:18 PST by
Modified: 2013-01-30 08:49 PST (History)


Attachments
Test to show the slowness with webkit scaling a canvas blitted to at a target 62.5 fps (46 bytes, url)
2011-03-20 15:17 PST, Grant Galitz
no flags Details


Note

You need to log in before you can comment on or make changes to this bug.


Description From 2010-06-19 14:18:28 PST
As a web author, i (and many others) desperately desire control over whether or not an image should be scaled using biliniar/bicubic filtering methods, or low-quality nearest-neighbor method when setting its width/height properties.

Many pixel art and avatar centric sites, forums and communities utilize scripts which resize their images both statically and dynamically as being an integral part of that websites core function. As a result, once clean, precise pixel-perfected images are now displaying in a fuzzy/blurry fashion, and is negatively affecting the aesthetic of many websites. 

In addition, there are many authors who would prefer performance increase over image quality increase, and have also supported the viewpoint of allowing an author to choose. 

Mozilla and Microsoft have both identified this issue as it was brought to them by these disgruntled communities and both have sought (correctly so) to include vendor-specific CSS solutions to allow authors to choose their method of interpolation. Including a similar CSS solution for webkit based browsers would be ideal. 

a direct url to Mozilla's documentation regarding this fix and examples of how this affects desired image rendering can be found here:

https://developer.mozilla.org/en/css/image-rendering

Until authors are given the choice on how to control image interpolation for all of the major browsers, these communities will be forced to support Mozilla and Microsoft browsers unanimously (more likely the former).
------- Comment #1 From 2010-06-22 07:57:15 PST -------
I plead for this too. Even more for W3C to implement this in a more general way, but meanwhile we really need this. I know numerous communities that could benefit from this since pixel-art really needs nearest neighbour filtering resizing for it to look nothing but decent. What happens now is that people scale it in an image editor and upload it. This means that file sizes are unnecessary large, thus load slower, overall a setback.

For now something like '-webkit-interpolation-mode: nearest-neighbor;' would be peaches.
------- Comment #2 From 2010-10-10 11:28:46 PST -------
Lack of control of image scaling is a step backward for the user experience at my 4-bit-centric game site at sarien.net. I just set up a way to use the lowest size of images and upscale them by CSS, but webkit makes the blurry. Just like firefox does, however, ff supports a css rule to override this.

I really hope this gets implemented!
------- Comment #3 From 2010-12-13 11:32:32 PST -------
Yes please implement it! It's important for background-fullscreen animations and transitions, to get a better performance.
------- Comment #4 From 2010-12-13 12:44:51 PST -------
This is being discussed on www-style:
<http://lists.w3.org/Archives/Public/www-style/2010Dec/0029.html>

If you have constructive comments, please make them on that list.
------- Comment #5 From 2011-03-20 15:16:53 PST -------
Having this implemented would help webkit browsers greatly for http://code.google.com/p/chromium/issues/detail?id=76865
------- Comment #6 From 2011-03-20 15:17:52 PST -------
Created an attachment (id=86285) [details]
Test to show the slowness with webkit scaling a canvas blitted to at a target 62.5 fps
------- Comment #7 From 2011-03-20 15:21:28 PST -------
image-rendering: -webkit-crisp-edges
-or-
image-rendering: crisp-edges

Both would be fine for me. This is the "moz" format, and it does seem a little better than the interpolation-mode property of MS.
------- Comment #8 From 2011-05-19 19:11:15 PST -------
The proposed value for CSS3's image-rendering 'optimize-contrast' has been implemented as '-webkit-optimize-contrast' in bug 56627. Right now in WebKit, using this will get you nearest-neighbour interpolation.
------- Comment #9 From 2012-01-24 22:12:48 PST -------

*** This bug has been marked as a duplicate of bug 56627 ***
------- Comment #10 From 2012-05-30 16:56:28 PST -------
There is still no way to guarantee nearest-neighbor, which is really disappointing for exactly-square and/or "pixel" graphics.
------- Comment #11 From 2012-05-31 06:50:26 PST -------
(In reply to comment #10)
> There is still no way to guarantee nearest-neighbor, which is really disappointing for exactly-square and/or "pixel" graphics.

For <canvas>, you can now use 

ctx.webkitImageSmoothingEnabled = false

to obtain nearest-neighbor interpolation.  This should be available in WebKit nightlies and the Chrome Canary.  This is orthogonal to the CSS change, which is still a work-in-progress AFAIK.
------- Comment #12 From 2012-05-31 14:36:02 PST -------
A couple of weeks ago I churned up a scaling library in js that does the scaling in js math with no canvas interaction for the scaling part. The "crisp" scaling mode at the bottom might be of interest to someone. It uses an algorithm that is superior to nearest-neighbor (doesn't drop pixels or unevenly weight them), but will look like nearest neighbor on integer scaling factors.
http://www.grantgalitz.org/image_resize/
------- Comment #13 From 2012-05-31 14:38:50 PST -------
OUCH, just realized Google Chrome fails to update its rendering after the scaling is done, the linked page is testable in firefox at least. Opening dev tools for chrome strangely "fixes" the missing images.

Also, the algos: https://github.com/grantgalitz/JS-Image-Resizer/blob/master/resize.js
------- Comment #14 From 2012-05-31 16:46:30 PST -------
The image-rendering property was bumped from CSS Images Level 3 to Level 4.

The *very early* draft of Level 4 (http://dev.w3.org/csswg/css4-images/Overview.src.html) includes a 'pixelated' value for image-rendering.
------- Comment #15 From 2012-06-01 03:03:22 PST -------
(In reply to comment #13)
> OUCH, just realized Google Chrome fails to update its rendering after the scaling is done, the linked page is testable in firefox at least. Opening dev tools for chrome strangely "fixes" the missing images.
> 
> Also, the algos: https://github.com/grantgalitz/JS-Image-Resizer/blob/master/resize.js

Yes, I also experienced this kind of bug:

Especially if a resized background is displayed with hardware acceleration (using style sheet command: -webkit-transform: translateZ(0) ), sometimes Chrome only shows a black box.

This should be opened as a new bug.
------- Comment #16 From 2013-01-30 08:49:30 PST -------
How can this be closed as a duplicate when the referenced bug is just about implementing *one* of the alternatives? Please reopen, this is not fixed!