CODEWITHSUNDEEP
javascriptcssreactjsimage
MazMat
MazMat

Reputation: 2094

Image, when resized turns blurry instead of being pixelated

So I'm building simple UI and wanted to add pixel art to it.

I have this image in 20px x 20px, and when I resize it with looking glass or in any software, it just gets pixelated, which is fine:

http://prntscr.com/np1f02

However, when I add the image with tag and set its width and height like:

<img src={helmetSlot} style={{width: 64, height: 64}}/>

It looks terribly blurry: http://prntscr.com/np1flc

What is the cause of this? How can I prevent that?

SOLVED: Used image-rendering: pixelated; css proeprty to fix it. Never knew about existance of this property

Upvotes: 0

Views: 1295

Answers (2)

MazMat
MazMat

Reputation: 2094

image-rendering: pixelated; Did the trick

Upvotes: 2

cullanrocks
cullanrocks

Reputation: 497

Because you are setting the height and width to be bigger than your source file. Why don't you export your pixel art at a higher resolution and then downres it.

Example: export it at 128px x 128px. Then displaying it at 64 x 64 should be no problem.

Upvotes: 0

Related Questions