Images always get blurred or pixelated when they are scaled up. But when getting scaled down they generally only blur slightly because the computer is trying to interpolate more pixels into less pixel information. But they generally, PNG images still look acceptable when scaling down. I completed a landing page design that showed a PNG on the top of the page that I decided would scale its width to 100% of the browser’s page width. The original image’s dimensions were 1900 x 211 pixels. This would generally look acceptable even on wider screens. The challenge I saw was that when viewed on narrower screens, the image was getting blurred. Here are some screen grabs of what I’m talking about.
Searching on the web for this was a slight challenge but I found a great response though it was at the bottom of all the comments:
https://css-tricks.com/forums/topic/scaling-down-images-with-css-makes-them-blurry/
Thanks to Skragz for his offering. This is the code that I implemented in the CSS file and everything looks great now.
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
