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

See Also:


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

Note You need to log in before you can comment on or make changes to this bug.
Description pixelguy 2010-06-19 14:18:28 PDT
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 FTPlus 2010-06-22 07:57:15 PDT
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 mrtnkl 2010-10-10 11:28:46 PDT
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 Jurek R. 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 Simon Fraser (smfr) 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 Grant Galitz 2011-03-20 15:16:53 PDT
Having this implemented would help webkit browsers greatly for http://code.google.com/p/chromium/issues/detail?id=76865
Comment 6 Grant Galitz 2011-03-20 15:17:52 PDT
Created attachment 86285 [details]
Test to show the slowness with webkit scaling a canvas blitted to at a target 62.5 fps
Comment 7 Grant Galitz 2011-03-20 15:21:28 PDT
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 Mike Lawther 2011-05-19 19:11:15 PDT
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 Adam Barth 2012-01-24 22:12:48 PST

*** This bug has been marked as a duplicate of bug 56627 ***
Comment 10 Alan Hogan 2012-05-30 16:56:28 PDT
There is still no way to guarantee nearest-neighbor, which is really disappointing for exactly-square and/or "pixel" graphics.
Comment 11 Stephen White 2012-05-31 06:50:26 PDT
(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 Grant Galitz 2012-05-31 14:36:02 PDT
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 Grant Galitz 2012-05-31 14:38:50 PDT
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 Mike Lawther 2012-05-31 16:46:30 PDT
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 Jurek Raben 2012-06-01 03:03:22 PDT
(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 Flo Ledermann 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!