43

I have an image that is 100x100 in pixels. I want to show it twice the size, so 200x200 and I want to do it by CSS and (explicitly) not by the server.

Since a few years, images get anti-aliased by all browsers instead of doing a by-pixel scale.

Mozilla allows to specify the algorithm: image-rendering: -moz-crisp-edges; So does IE: -ms-interpolation-mode: nearest-neighbor;

Any known webkit alternative?

Martin Kool
  • 4,188
  • 4
  • 25
  • 36

3 Answers3

91

WebKit now supports the CSS directive:

image-rendering:-webkit-optimize-contrast;

You can see it working in action using Chrome and the last image on this page:
http://phrogz.net/tmp/canvas_image_zoom.html

The rules used on that page are:

.pixelated {
  image-rendering:optimizeSpeed;             /* Legal fallback */
  image-rendering:-moz-crisp-edges;          /* Firefox        */
  image-rendering:-o-crisp-edges;            /* Opera          */
  image-rendering:-webkit-optimize-contrast; /* Safari         */
  image-rendering:optimize-contrast;         /* CSS3 Proposed  */
  image-rendering:crisp-edges;               /* CSS4 Proposed  */
  image-rendering:pixelated;                 /* CSS4 Proposed  */
  -ms-interpolation-mode:nearest-neighbor;   /* IE8+           */
}
Phrogz
  • 296,393
  • 112
  • 651
  • 745
  • 2
    Note that as of this writing this works on Chrome and Safari on OS X, but not on Windows. – Phrogz May 23 '12 at 15:10
  • 12
    Does not make any difference in Chrome/Safari here – Rob Feb 20 '13 at 12:53
  • @Rob What versions, on what OS/version? Got a teat page up? – Phrogz Feb 20 '13 at 20:48
  • OSX 10.6, Latest Chrome, Safari 5. Scaled images are still blurry. No test at the moment sorry, It's not a big issue really. – Rob Feb 21 '13 at 11:01
  • 3
    Actually this shows the issue pretty well http://phrogz.net/tmp/canvas_image_zoom.html – Rob Feb 21 '13 at 11:06
  • yep, still not working for me on windows chrome Version 27.0.1453.116 m –  Jul 05 '13 at 03:48
  • Chrome Version 30.0.1599.101 (227552) and it still doesn't work. – Thanatos Nov 17 '13 at 09:27
  • 3
    Yay! `image-rendering:pixelated` [is present in Chrome v38](http://blog.chromium.org/2014/08/chrome-38-beta-new-primitives-for-next.html). See also: https://www.chromestatus.com/feature/5118058116939776 – Phrogz Oct 07 '14 at 19:55
  • 1
    Thanks so much for this answer! – chelo_c Mar 02 '16 at 04:20
  • It doesn't seem to work on background-image for WebKit. Perhaps a bug? – lanewinfield Apr 30 '16 at 04:53
  • Your canvas solution emulates `pixelated` (nearest-neighbor), which is not quite the same as crisp-edges in many cases. It is also probably a good idea to use NN and Pix as a fallback *before* crisp-edges/-webkit-optimize-contrast instead of after. There are a few of algorithms that can produce sharp results without necessarily making things piexlated, and browsers do implement them. – Mingye Wang May 07 '19 at 04:22
15

Unfortunately, it looks like this feature is absent in WebKit. See this recent bug report:

https://bugs.webkit.org/show_bug.cgi?id=40881

VoteyDisciple
  • 37,319
  • 5
  • 97
  • 97
2

In addition to @Phrogz very useful answer and after reading this: https://developer.mozilla.org/en-US/docs/CSS/image-rendering

It seems like the best CSS would be this:

image-rendering:optimizeSpeed;              /* Legal fallback                 */
image-rendering:-moz-crisp-edges;           /* Firefox                        */
image-rendering:-o-crisp-edges;             /* Opera                          */
image-rendering:-webkit-optimize-contrast;  /* Chrome (and eventually Safari) */
image-rendering:crisp-edges;                /* CSS3 Proposed                  */
-ms-interpolation-mode:bicubic;             /* IE8+                           */
Dominic
  • 62,658
  • 20
  • 139
  • 163
  • 3
    `bicubic`? OP says `nearest-neighbor` is OK in IE. – lapo Oct 07 '14 at 12:54
  • @lapo I have personally tested different values in various browsers and this gave the best result when up-scaling, I also tested on IE as it was a critical browser when doing this iirc – Dominic Oct 07 '14 at 13:36
  • 2
    As of May 2015 this answer does not give pixelated results on the current version of IE. –  May 15 '15 at 19:03
  • Bicubic interpolation will smooth the upscaled image; for pixelated scaling use `-ms-interpolation-mode: nearest-neighbor;`. See https://learn.microsoft.com/en-us/openspecs/ie_standards/ms-css21e/baca27b8-6192-4c3e-af0b-9c0875ad7030 – augurar Dec 06 '20 at 20:34