Bug 40881 – Authors require control over image interpolation methods

• Status: RESOLVED
• Resolution: CONFIGURATION CHANGED
• Component: CSS

[pixelguy]

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).

[FTPlus]

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]

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.]

Yes please implement it! It's important for background-fullscreen animations and transitions, to get a better performance.

[Simon Fraser (smfr)]

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]

Having this implemented would help webkit browsers greatly for http://code.google.com/p/chromium/issues/detail?id=76865

[Grant Galitz]

Created attachment 86285 [details]
Test to show the slowness with webkit scaling a canvas blitted to at a target 62.5 fps

[Grant Galitz]

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]

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]

*** This bug has been marked as a duplicate of bug 56627 ***

[Alan Hogan]

There is still no way to guarantee nearest-neighbor, which is really disappointing for exactly-square and/or "pixel" graphics.

[Stephen White]

(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]

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]

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]

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]

(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]

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]

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)]

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]

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]

The relevant website no longer exists.

[Alan Hogan]

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]

Cannot comment on the feature, however I fixed the pen!