Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

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?

share|improve this question

3 Answers 3

up vote 11 down vote accepted

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

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

share|improve this answer
    
Bummer :-( Thx for the answer tho. –  Martin Kool Oct 10 '10 at 18:30

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+           */
}
share|improve this answer
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
    
very useful answer thanks –  Dominic Tobias Nov 21 '12 at 11:44
10  
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
2  
Actually this shows the issue pretty well phrogz.net/tmp/canvas_image_zoom.html –  Rob Feb 21 '13 at 11:06

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+                           */
share|improve this answer
1  
bicubic? OP says nearest-neighbor is OK in IE. –  lapo Oct 7 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 Tobias Oct 7 at 13:36

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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