Pixels twice its size

Question

I just created little pixel art for my project https://i.stack.imgur.com/mbR6l.png. And I want to use it on my site. As you can see, it's small pixel art. I want one pixel to be drawn as 2*2 pixels instead of 1*1 pixel. I would redraw the picture with using 2*2 pixels instead of one but that seems to be bad solution.

I tried to use CSS on it

img.pixel {
  width: 32px;
  height: 32px
}

but that doesn't work, it shows weird shades in my browser. I want to see hard pixels. Does anyone know any solution for this problem?

This is the problem when I use the CSS above

Browsers aren't image editors, why would you expect them to do a good job of enlarging an image on the fly? — cimmanon, Oct 11 '13 at 12:41

score 2 · Accepted Answer · edited May 23 '17 at 12:30

Pixel art is tough in browsers, mainly due to lack of universal browser support of "pixelated" or "crisp-edges" image rendering. It should be supported in CSS4.

Currently the CSS stack looks like this, although it looks as if Chrome 30 and Opera 16 have broken support for CSS solutions

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

See this answer by @Phrogz, with a test case. Also see mozilla's documentation on the subject. For universal support now, a JS solution may have to work for the time being such as seen here on the great article drawing pixels is hard:

var resize = function( img, scale ) {
// Takes an image and a scaling factor and returns the scaled image

// The original image is drawn into an offscreen canvas of the same size
// and copied, pixel by pixel into another offscreen canvas with the 
// new size.

var widthScaled = img.width * scale;
var heightScaled = img.height * scale;

var orig = document.createElement('canvas');
orig.width = img.width;
orig.height = img.height;
var origCtx = orig.getContext('2d');
origCtx.drawImage(img, 0, 0);
var origPixels = origCtx.getImageData(0, 0, img.width, img.height);

var scaled = document.createElement('canvas');
scaled.width = widthScaled;
scaled.height = heightScaled;
var scaledCtx = scaled.getContext('2d');
var scaledPixels = scaledCtx.getImageData( 0, 0, widthScaled, heightScaled );

for( var y = 0; y < heightScaled; y++ ) {
    for( var x = 0; x < widthScaled; x++ ) {
        var index = (Math.floor(y / scale) * img.width + Math.floor(x / scale)) * 4;
        var indexScaled = (y * widthScaled + x) * 4;
        scaledPixels.data[ indexScaled ] = origPixels.data[ index ];
        scaledPixels.data[ indexScaled+1 ] = origPixels.data[ index+1 ];
        scaledPixels.data[ indexScaled+2 ] = origPixels.data[ index+2 ];
        scaledPixels.data[ indexScaled+3 ] = origPixels.data[ index+3 ];
    }
}
scaledCtx.putImageData( scaledPixels, 0, 0 );
return scaled;

}

Read the article through, the presence of retina displays and mobile safari may add additional complexity to rendering the correct size pixel art. Although with iOS7's mobile safari this may be rectified.

score 1 · Answer 2 · answered Oct 11 '13 at 12:26

1

I suggest you to use an svg image, as that will be scalable and get you what you are looking for.

You can read more about the same from the below link.

https://developer.mozilla.org/en/docs/SVG_In_HTML_Introduction

Hope this helps.

answered Oct 11 '13 at 12:26

Nitesh

15,425
4
48
60

score -3 · Answer 3 · answered Oct 11 '13 at 12:58

-3

Are you looking for this? <img src="http://i.imgur.com/9FLj6Uk.png width="32" height="32">

check fiddle

answered Oct 11 '13 at 12:58

Shahil M

3,836
4
25
44

Pixels twice its size

3 Answers3