Bug 40881

Summary: Authors require control over image interpolation methods
Product: WebKit Reporter: pixelguy <eyereight>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: RESOLVED CONFIGURATION CHANGED    
Severity: Enhancement CC: abarth, adam, ap, bfulgham, grantgalitz, hyatt, jurekraben, jurekraben, kaisellgren, kling, ledermann, martin, mdelaney7, mikelawther, peter, plummer.andrew, senorblanco, simon.fraser, Tiny_grasshopper, webkit-bugzilla
Priority: P2    
Version: 528+ (Nightly build)   
Hardware: All   
OS: All   
Attachments:
Description Flags
Test to show the slowness with webkit scaling a canvas blitted to at a target 62.5 fps none

pixelguy
Reported 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).
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
View All Add attachment proposed patch, testcase, etc.
FTPlus
Comment 1 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.
mrtnkl
Comment 2 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!
Jurek R.
Comment 3 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.
Simon Fraser (smfr)
Comment 4 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.
Grant Galitz
Comment 5 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
Grant Galitz
Comment 6 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
Grant Galitz
Comment 7 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.
Mike Lawther
Comment 8 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.
Adam Barth
Comment 9 2012-01-24 22:12:48 PST
*** This bug has been marked as a duplicate of bug 56627 ***
Alan Hogan
Comment 10 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.
Stephen White
Comment 11 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.
Grant Galitz
Comment 12 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/
Grant Galitz
Comment 13 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
Mike Lawther
Comment 14 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.
Jurek Raben
Comment 15 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.
Flo Ledermann
Comment 16 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!
Andrew Plummer
Comment 17 2015-12-01 23:31:50 PST
Also experiencing this issue. Would love to have more control over resizing methods. Downsizing right now is producing blurry results (not horrible but definitely noticeable) even for standard JPG photos. image-rendering: -webkit-optimize-contrast has almost no noticeable effect and image-rendering: pixelize doesn't work on photos (far too much contrast). In this new era of responsive design and with image-size: cover/contain, the lack of this feature is starting to be more and more of an issue.
Simon Fraser (smfr)
Comment 18 2015-12-02 08:35:42 PST
Can you point to some content that demonstrates sub-par image downsizing quality? Reopening, because I don't think that just auto/crisp-edges/pixelated is enough.
Andrew Plummer
Comment 19 2015-12-02 09:27:33 PST
OK, here's a decent example (one I was called on to "fix"): http://codepen.io/andrewplummer/pen/JGPMeg Left block is fitting exact height. Center block is the same image resized by 1px in the browser (image-size: cover). Right image is a different image resized in Photoshop using nearest neighbor.
Brent Fulgham
Comment 20 2022-07-11 17:17:12 PDT
The relevant website no longer exists.
Alan Hogan
Comment 21 2022-12-29 15:00:21 PST
Perhaps more accurately, andrewplummer'sst CodePen is broken because Dropbox stopped allowing hotlinked resources some years ago, removing the source of the images used in the CodePen. However, the demo page at https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering still works, and it shows that Safari does in fact honor `image-rendering: pixelated` so this bug may be resolved
Andrew Plummer
Comment 22 2022-12-29 21:37:53 PST
Cannot comment on the feature, however I fixed the pen!
Note You need to log in before you can comment on or make changes to this bug.