CODEWITHSUNDEEP
csspngdownsize
George Katsanos
George Katsanos

Reputation: 14175

Forced down-sizing of PNG results in blur (Chrome)

I have a 100px wide / 100px tall PNG image.

I resize it with CSS : img { max-width: 70px } .

The result is blurry.

What could be going wrong?

Upvotes: 0

Views: 84

Answers (1)

elmarko
elmarko

Reputation: 923

It's probably because a 100px square doesn't divide down exactly to 70px the browser is mis-rendering bits of the image as it try to resize and interpolate the pixels of the image on the fly. Try it at max-width: 50px or max-width: 75px and see if it's still blurry.

Image resizing is much easier if you can divide down by a multiple of 2/4/8 to exactly to the size you want.

(assuming you're not on a HiDPI/retina screen, in which case it's because you don't have enough pixels at 75px square to render a full retina quality image.)

Upvotes: 1

Related Questions