6

I am trying to scale up css sprite pixel art images and want to COMPLETELY disable the anti-aliasing/image smoothing.

Per this post here: Disable antialising when scaling images I have tried the following css

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

It worked exactly like I wanted in firefox, however in Chrome and I.E. it helps a little, but some image interpolation/smoothing/anti-aliasing is still occuring.

I am not wanting to use a canvas element, but rather just stick with the CSS background image sprites.

Is there a way to accomplish the same results as the “-moz-crisp-edges” in the other browsers?

Community
  • 1
  • 1
Occam
  • 519
  • 5
  • 18
  • 1
    Please have a look here: http://stackoverflow.com/questions/3900436/image-scaling-by-css-is-there-a-webkit-alternative-for-moz-crisp-edges/8888964#8888964 – GibboK Oct 20 '14 at 14:11

2 Answers2

3

The bad news:

Unfortunately, it looks like your options are either using the canvas, using JavaScript, or living with anti-aliasing in Chrome and I.E.

Here are some responses that might help you with one of the other two if you don't choose to live with the anti-aliasing:

Links:

  1. Javascript-Only Solution - Old, slow, but works everywhere
  2. Canvas solution - New, quicker, doesn't work in non-compliant browsers

Sorry there isn't better news for you on this.

Community
  • 1
  • 1
Josh Burgess
  • 9,327
  • 33
  • 46
0
image-rendering: pixelated;

Should work, even on Chrome in 2023. Make sure the sprite is a square resolution (ie power of two).

TankorSmash
  • 12,186
  • 6
  • 68
  • 106