images are randomly blurry

Question

I can't figure out why some images get blurry at different browser sizes. Take a look at this sample site:

The menu buttons at the top and the other buttons all shrink a bit when hovered over. Change the browser size a few times and see that some of them are blurry. Some actually get sharper when hovered over, some get blurrier.

I can't figure out how to solve this. They are all compressed the same way, all around the same resolution. Is there a specific size that they need to be to look better when scaled?

Interestingly, on Chrome they get chunky as they change (nearest-neighbor resizing probably) then after a second or two they get sharp. You're obviously at the mercy of the resizing algorithms employed by the browser, which you have no control over. — Mark Ransom, Feb 19 '15 at 22:36

score 0 · Answer 1 · answered Feb 19 '15 at 22:08

0

You are serving your image files way too large, causing the browser to spend time rescaling them to the size specified in the image tag. This causes the two-pass rendering that you are seeing.

For example, icon_profile2.png has the dimensions 2055x1712.

Resize your images to the desired size in your favorite image editor and use the scaled-down version on the website.

answered Feb 19 '15 at 22:08

Eric J.

147,927
63
340
553

I had to start making them large because they ended up being way too blurry. Being large and scaled down they look really good on cell phones instead of really blurry. I'd use svg if it was universally supported. :-/ – Jonathan Grant Feb 19 '15 at 22:15
Mobile users will especially dislike large images, since mobile bandwidth is generally slower and more expensive. Re-create the images in the actual size that you want to display them. If you have a problem with blurry images at that point, ask a new question. Trust me, a decent image editor will do a much better job of scaling down an image than a browser will. – Eric J. Feb 19 '15 at 23:05

images are randomly blurry

1 Answers1