Why are my images so blurry in IE10?
** This demonstration of the problem may not work if you are viewing this in IE10 as that is where the problem lies.
I am finishing up my website design and I notice that any smaller images (such as my corporate headshot), are VERY blurry in IE10 while they are crystal clear in Firefox. Weird.
What gives?
Is there something I can set in the code to fix this?
Here are screenshots of both images for comparison:
IE10:
Firefox:
These are both based upon the same image file. As you can see, the quality of the IE10 image is completely unacceptable. I tried .png and .bmp, same problem.
I am finishing up my website design and I notice that any smaller images (such as my corporate headshot), are VERY blurry in IE10 while they are crystal clear in Firefox. Weird.
What gives?
Is there something I can set in the code to fix this?
Here are screenshots of both images for comparison:
IE10:
Firefox:
These are both based upon the same image file. As you can see, the quality of the IE10 image is completely unacceptable. I tried .png and .bmp, same problem.
ASKER
Ok, have done a bit more research and have stumbled across a weird solution.
If I put the image into the HTML using the correct dimensions, like so:
<img alt="" src="images/web_mitchellbi
then Firefox renders properly and IE 10 renders blurry.
However, if I increase the image height and width by just one pixel like so:
<img alt="" src="images/web_mitchellbi
the IE 10 renders properly and Firefox renders blurry.
Weird.
If I leave any dimensions out completely, Firefox is clear and IE 10 is blurry.
If I put the image into the HTML using the correct dimensions, like so:
<img alt="" src="images/web_mitchellbi
then Firefox renders properly and IE 10 renders blurry.
However, if I increase the image height and width by just one pixel like so:
<img alt="" src="images/web_mitchellbi
the IE 10 renders properly and Firefox renders blurry.
Weird.
If I leave any dimensions out completely, Firefox is clear and IE 10 is blurry.
Is that a real screenshot with the light gray border?
The images are not the same size. The FF image is larger with a smaller border. But overall is still smaller.
The images are not the same size. The FF image is larger with a smaller border. But overall is still smaller.
What doctype are you using?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks,
Figured it out. I am running this on a Surface Pro with an external monitor at 125% zoom. It is the weird zoom factor that was making images in IE look strange. When I went to 100% zoom everything was fine.
Strange.
Will give you credit for the answer as what you have suggested would work.
Figured it out. I am running this on a Surface Pro with an external monitor at 125% zoom. It is the weird zoom factor that was making images in IE look strange. When I went to 100% zoom everything was fine.
Strange.
Will give you credit for the answer as what you have suggested would work.
Oh yet another bug in IE10? The zoom is supposed to rescale without distortion according to the spec. However no expects IE to be to spec...
Cd&
Cd&
In general IE rendering has always been inferior to other browsers.
Cd&