CODEWITHSUNDEEP
cssimagefirefoxwebkitscaling
Martin Kool
Martin Kool

Reputation: 4245

Image scaling by CSS: is there a webkit alternative for -moz-crisp-edges?

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?

Upvotes: 45

Views: 53254

Answers (3)

Phrogz
Phrogz

Reputation: 303411

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

Upvotes: 91

nanobar
nanobar

Reputation: 66425

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

Upvotes: 2

VoteyDisciple
VoteyDisciple

Reputation: 37813

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

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

Upvotes: 15

Related Questions