Make images larger in HTML with no blur

Question

I have been messing around with some new ideas in Javascript, but I'm not very good at making extremely detailed images in Paint, Paint.NET, etc. The problem is when I have a 64 * 64 image or an 8 * 8 and I want it to display 640 * 640 or 16 * 16; the images get blurry. I've seen many other forums and things were people ask this question or a similar one, but I'm relatively new to this and don't want to make the image larger in photoshop or whatever. On a similar note, can I display only part of an image at one time but have a larger image than shown, so that I don't have to make multiple images of the same thing?

Answer 1

Maybe this CSS attribute on your img helps:

image-rendering: pixelated;

I found it in this blog post: https://css-tricks.com/keep-pixelated-images-pixelated-as-they-scale/