7

Is there a way to make an image bigger in HTML5 without it getting blurry.

For example, this image is 24x24: enter image description here

If you instead load it with a width of 150, it gets blurry. I want pixelated!

http://png-1.findicons.com/files/icons/734/phuzion/24/bug.png

Instead I would like to change the rendering engine to display like what you would see in photoshop. Something like this:

enter image description here

I only care about modern browsers.

UiUx
  • 967
  • 2
  • 14
  • 25
at.
  • 50,922
  • 104
  • 292
  • 461
  • 1
    I proposed an edit to your post with another image demonstrating what you want. Hopefully this will help you illustrate what you want to people better. Please tell me if my interpretation of what you are asking for is incorrect. – Michael Mar 28 '13 at 18:48
  • 1
    http://stackoverflow.com/questions/388492/firefox-blurs-an-image-when-scaled-through-css-or-inline-style – Alex W Mar 28 '13 at 18:49
  • Also this: http://stackoverflow.com/questions/3267030/css-solution-to-image-rendering – Michael Mar 28 '13 at 18:51

2 Answers2

4

If you just leave it to the browser, they will try to make it as smooth as possible nowadays (old IE versions didn't). So your best bet is to load it into a canvas and do the (nearest-neighbour) upscaling yourself. I'm not saying that this a sane idea, just putting it out there. :)

That, or have multiple versions of the image and switch them around somehow. There are a few technics you can try, like css sliding-doors.

DanMan
  • 11,323
  • 4
  • 40
  • 61
2

After some research: unfortunately what you want to do is limited by browser specific limitations. Firefox has a limited experimental code (image-rendering) that can force the browser to stop interpolating the pixels and thus causing the blurriness.

Unfortunately there is no other supported way of doing this currently. My suggestion would be for you to simply scale the image as I did in the edit to your original post.

Like this: enter image description here

Mozilla's documentation page: https://developer.mozilla.org/en-US/docs/CSS/image-rendering

Michael
  • 7,016
  • 2
  • 28
  • 41