65

Possible Duplicate:
How to stretch images with no antialiasing

Is it in any way possible to disable antialiasing when scaling up an image ?

Right now, i get something that looks like this :

What i get

Using the following css code :

#bib {
    width: 104px;
    height: 104px;
    background-image: url(/media/buttonart_back.png);
    background-size: 1132px 1360px;
    background-repeat: no-repeat;
}

What I would like, is something like this :

What i seek

In short, any CSS flag to disable anti-aliasing from when scaling up images, preserving hard edges.

Any javascript hacks or similar are welcome too.

(Yes, I am aware that php and imagemagick can do this as well, but would prefer a css based solution.)

UPDATE The following have been suggested :

image-rendering: -moz-crisp-edges;
image-rendering: -moz-crisp-edges;
image-rendering: -o-crisp-edges;
image-rendering: -webkit-optimize-contrast;
-ms-interpolation-mode: nearest-neighbor;

But that doesn't seem to work on background images.

GoodClover
  • 97
  • 9
Nils Munch
  • 8,805
  • 11
  • 51
  • 103

2 Answers2

133

Try this, it's a fix for removing it in all browsers.

img { 
    image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
    image-rendering: -moz-crisp-edges;          /* Firefox                        */
    image-rendering: -o-crisp-edges;            /* Opera                          */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
    image-rendering: pixelated;                 /* Universal support since 2021   */
    image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+                           */

}

Sources:

http://nullsleep.tumblr.com/post/16417178705/how-to-disable-image-smoothing-in-modern-web-browsers

http://updates.html5rocks.com/2015/01/pixelated

GitaarLAB

trinalbadger587
  • 1,905
  • 1
  • 18
  • 36
Vargr
  • 1,558
  • 1
  • 11
  • 10
  • 4
    Unfortunately, this does not work in Chrome. – Rudey Jun 11 '14 at 15:19
  • Neither in Opera >=15 – volter9 Oct 30 '14 at 03:16
  • 1
    I see this working in Chrome Version 40.0.2214.115 (64-bit) on my iMac – SlickRemix Mar 06 '15 at 17:30
  • 12
    Blast from the passsss....uh future `:)`: You might want to add the current CSS3 standard to the list: `image-rendering: pixelated`, see: http://updates.html5rocks.com/2015/01/pixelated – GitaarLAB Mar 20 '15 at 12:47
  • 2
    This doesn't work on background images on WebKit. Can't tell if it's a bug or not. – lanewinfield Apr 30 '16 at 04:51
  • +1 Kasper Sebastian Brandt Jensen Can you please write the version numbers in the comments? As it has been five years now and perhaps some can be removed or are changed in the meanwhile? – Sam May 26 '17 at 14:37
  • 1
    @Kasper Sebastian Brandt Jensen, it appears that this does not work in Microsoft Edge, when things are scaled using the css property `transform: scale(2)`... – Sam Jun 30 '17 at 13:05
  • 1
    @lanewinfield Does the background repeat? Could be https://bugs.webkit.org/show_bug.cgi?id=177037. – mjs Sep 16 '17 at 14:44
  • working for me on Chrome 65 for a `` element. Thanks! – robert May 01 '18 at 01:34
8

CSS that works in Firefox Only:

img { image-rendering: -moz-crisp-edges; }

It worked for me (firefox 16.0) enter image description here

Community
  • 1
  • 1
GajendraSinghParihar
  • 9,051
  • 11
  • 36
  • 64