Forum Moderators: open
Is anyone else noticing this? The only way I was able to see this is by taking a small image and setting its height and width to double its normal size. In IE it still looks good but in Firefox it comes out blurred and fuzzy.
The only way I was able to see this is by taking a small image and setting its height and width to double its normal size.
When you double the display size of the actual image you should expect fuzziness because you're zooming in beyond the physical limits of the available data.
This requires that the software interpolates your image and makes a guess on how to best display it enlarged and some software does it better than others.
Your only solution here is to supply an image in the size you want it displayed "as-is" and not double it with width/height settings.
img { -ms-interpolation-mode: nearest-neighbor; }
img { -ms-interpolation-mode: bicubic; }
When making an image larger, bicubic interpolation (which is standard in all other browsers) adds fuzziness as it tries to introduce a gradient of colors between pixels.
Your only solution here is to supply an image in the size you want it displayed "as-is" and not double it with width/height settings.
It's a picture so I don't really have a choice. It's not horrible that it's blurry, it's just odd that IE is handling it better.
whoisgregg, does the interpolation-mode work with other browsers?
I assume because it's a photo that this is a PNG-24 format file, rather than PNG-8 (indexed color). Ios that correct?
It's a picture so I don't really have a choice.
Yes you DO have a choice.
Use a proper tool like PhotoShop or Fireworks with better algorithms for enlarging, then you can try to sharpen the final results.
upsampling: well your image has not enough information in it for that, so either the images is interpolated (creating -if done too far- a sort of out of focus effects) or the pixels are blown up (creating a very pixelated effect).
I can't imagine if done reasonably small the IE algorithm to be significantly better in any way expect if you only have rectangular geometric information to start from.
Any pro drawing software will do bicubic resampling by default, more or less the same as Firefox uses. But doing it up front and not in the browser will give you all possible control.
IE's png support is a drama, mainly when the alpha channel is used it's a loosing fight anyway.
The CSS tags whoisgregg gave you are vendor specific ones. (anything starting with -ms is Microsoft only; -moz is firefox only, -webkit is safari and chrome only, ...
They will not have any effect in any other browser. And I think they only work in IE8 anyway (not tested, I might be wrong there).
Do not expect a ms-xyz to hav e a corresponding only from other vendors or vice-versa, it's uncharted territory from a standards perspective.
Use a proper tool like PhotoShop or Fireworks with better algorithms for enlarging, then you can try to sharpen the final results.
It's a picture that is perfect the way I take it. However, in some instances I have to double its size. The small size is much more important so I'd rather take it at that size to minimize the file size. If the bigger picture is blurry then oh well but I was just wondering why Firefox is blurring the image while IE isn't.
The image in question isn't very fancy...just a sprite.
whoisgregg, does the interpolation-mode work with other browsers?
Nope, it's IE only. According to Microsoft documentation, it was introduced in IE7. You can use another IE proprietary feature, conditional comments, to serve that style only to the versions that support it. :)
