40881 2010-06-19 14:18:28 -0700 Authors require control over image interpolation methods 2022-12-29 21:37:53 -0800 1 1 1 Unclassified WebKit CSS 528+ (Nightly build) All All RESOLVED CONFIGURATION CHANGED P2 Enhancement --- 1 eyereight webkit-unassigned abarth adam ap bfulgham grantgalitz hyatt jurekraben jurekraben kaisellgren kling ledermann martin mdelaney7 mikelawther peter plummer.andrew senorblanco simon.fraser Tiny_grasshopper webkit-bugzilla oldest_to_newest 240383 0 eyereight 2010-06-19 14:18:28 -0700 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). 241250 1 Tiny_grasshopper 2010-06-22 07:57:15 -0700 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. 292333 2 martin 2010-10-10 11:28:46 -0700 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! 321280 3 jurekraben 2010-12-13 11:32:32 -0800 Yes please implement it! It's important for background-fullscreen animations and transitions, to get a better performance. 321343 4 simon.fraser 2010-12-13 12:44:51 -0800 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. 370241 5 grantgalitz 2011-03-20 15:16:53 -0700 Having this implemented would help webkit browsers greatly for http://code.google.com/p/chromium/issues/detail?id=76865 370242 6 86285 grantgalitz 2011-03-20 15:17:52 -0700 Created attachment 86285 Test to show the slowness with webkit scaling a canvas blitted to at a target 62.5 fps 370244 7 grantgalitz 2011-03-20 15:21:28 -0700 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. 406831 8 mikelawther 2011-05-19 19:11:15 -0700 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. 542005 9 abarth 2012-01-24 22:12:48 -0800 *** This bug has been marked as a duplicate of bug 56627 *** 637827 10 webkit-bugzilla 2012-05-30 16:56:28 -0700 There is still no way to guarantee nearest-neighbor, which is really disappointing for exactly-square and/or "pixel" graphics. 638354 11 senorblanco 2012-05-31 06:50:26 -0700 (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. 638724 12 grantgalitz 2012-05-31 14:36:02 -0700 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/ 638726 13 grantgalitz 2012-05-31 14:38:50 -0700 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 638811 14 mikelawther 2012-05-31 16:46:30 -0700 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. 639144 15 jurekraben 2012-06-01 03:03:22 -0700 (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. 820233 16 ledermann 2013-01-30 08:49:30 -0800 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! 1145529 17 plummer.andrew 2015-12-01 23:31:50 -0800 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. 1145571 18 simon.fraser 2015-12-02 08:35:42 -0800 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. 1145589 19 plummer.andrew 2015-12-02 09:27:33 -0800 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. 1882280 20 bfulgham 2022-07-11 17:17:12 -0700 The relevant website no longer exists. 1922232 21 webkit-bugzilla 2022-12-29 15:00:21 -0800 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 1922254 22 plummer.andrew 2022-12-29 21:37:53 -0800 Cannot comment on the feature, however I fixed the pen! 86285 2011-03-20 15:17:52 -0700 2011-03-20 15:17:52 -0700 Test to show the slowness with webkit scaling a canvas blitted to at a target 62.5 fps url.txt text/plain 46 grantgalitz aHR0cDovL3d3dy5ncmFudGdhbGl0ei5vcmcvY2FudmFzdGVzdGNhc2UuaHRtbA==