PNG images look blurry when scaled

Question

I'm a visual/UI designer working on a project/product which has been designed by another designer. This designer provided the front-end dev with good quality PNG icons, but when the front-end dev sets the images scale to 0.7, they look blurry. I've noticed that if we set the image's scale to 0.5, they don't look blurry at all: 0.7: [1]: http://i.stack.imgur.com/jQNYG.png 0.5: [2]: http://i.stack.imgur.com/hBShu.png Anyone knows why does that happen? I personally always work with 0.5 scales because I was taught so. Is there any logical reason for this? Sorry if the answer is obvious. I am really curious about that. Thanks in advance. JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)

Answer 1

What is happening largely depends upon the software that you are using to shrink the image. There is a major different between reducing by 0.5 and 0.7. If you shrink by 0.5, you are combining 4 pixels into one. If you shrink by 0.7 you are doing fractional sampling. 10 pixels in each direction get reduced to 7. In 0.5 sampling, you read two pixels across, read two pixels down. In 0.7 sampling you read 1.42857142857143 pixels in each direction. In order to do that you have to weight pixel values. That is going to create blurriness in a drawing.