Menu
Is there a way to make an image bigger in HTML5 without it getting blurry.
For example, this image is 24x24:
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:
I only care about modern browsers.
608
One of the simplest ways to resize an image in the HTML is using the height and width attributes on the img tag. These values specify the height and width of the image element. The values are set in px i.e. CSS pixels.
Use object fit property in your css, and give a fixed width and height to your image tag or respective class so that every image will have same width and height, Now Your Image won't be distorted.
Simple, the browser is trying to maintain the image aspect ratio based on the original size, resulting in a calculated height with a decimal value which in turn causes pixel compression, hence a blurry image.
The max-height property sets the maximum height of an element, and the max-width property sets the maximum width of an element. To resize an image proportionally, set either the height or width to "100%", but not both. If you set both to "100%", the image will be stretched.
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.
168
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: 
Mozilla's documentation page: https://developer.mozilla.org/en-US/docs/CSS/image-rendering
2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
