Original 16x16 Image zoom factor ×

Zoomed by Image Size

Zoomed by drawImage()

Zoomed by Code

Zoomed by Image Size + CSS

Showing how to zoom up a bitmap with crisp edges using HTML Canvas or CSS.
HTML Canvas zoom written to support this Stack Overflow answer.
CSS Zoom written to support this Stack Overflow answer.

Zooming via HTML Canvas

function drawPixelated(img,context,zoom,x,y){ if (!zoom) zoom=4; if (!x) x=0; if (!y) y=0; if (!img.id) img.id = "__img"+(drawPixelated.lastImageId++); var idata = drawPixelated.idataById[img.id]; if (!idata){ var ctx = document.createElement('canvas').getContext('2d'); ctx.width = img.width; ctx.height = img.height; ctx.drawImage(img,0,0); idata = drawPixelated.idataById[img.id] = ctx.getImageData(0,0,img.width,img.height).data; } for (var x2=0;x2<img.width;++x2){ for (var y2=0;y2<img.height;++y2){ var i=(y2*img.width+x2)*4; var r=idata[i ]; var g=idata[i+1]; var b=idata[i+2]; var a=idata[i+3]; context.fillStyle = "rgba("+r+","+g+","+b+","+(a/255)+")"; context.fillRect(x+x2*zoom, y+y2*zoom, zoom, zoom); } } }; drawPixelated.idataById={}; drawPixelated.lastImageId=0;

Zooming via CSS

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