44

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?

3 Answers 3

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+           */
}
11
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

1
  • Bummer :-( Thx for the answer tho. Oct 10, 2010 at 18:30
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+                           */
4
  • 3
    bicubic? OP says nearest-neighbor is OK in IE.
    – lapo
    Oct 7, 2014 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 7, 2014 at 13:36
  • 2
    As of May 2015 this answer does not give pixelated results on the current version of IE.
    – user334911
    May 15, 2015 at 19:03
  • Bicubic interpolation will smooth the upscaled image; for pixelated scaling use -ms-interpolation-mode: nearest-neighbor;. See learn.microsoft.com/en-us/openspecs/ie_standards/ms-css21e/…
    – augurar
    Dec 6, 2020 at 20:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.