Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Scale CSS sprite pixel art without image smoothing

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?

like image 482
Occam Avatar asked Oct 21 '22 02:10

Occam


1 Answers

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.

like image 81
Josh Burgess Avatar answered Nov 03 '22 22:11

Josh Burgess