Fix for blurry browser images in Chrome and FireFox

Well, I don’t know how long this has been going on but I noticed all of the images in my FireFox, Chrome and Internet Explorer web browsers were blurry! Slightly blurry so you almost don’t notice it. However I work on a few websites and did notice it when working on my photography page.

First try holding Ctrl and hitting – or +
Often it is just text zoom.

When I first noticed it I thought it was a problem with my website production process. I was optimizing an image with Photoshop. The image had text and was semi blurry I felt. I looked back in Photoshop and sure enough, crisp, clean and smooth. But for some reason in Fire Fox it was blurry and maybe even a little bigger? Strange. So I tried Save For Web Devices again and same thing, blurry web image.
So I thought it was a problem with Adobe’s Image Optimization Output and I searched and saw a lot of people having the same problem.
You save a graphic for web optimization. You choose PNG, JPG or GIF and it looks great, upload, preview in browser and it is fuzzy!
What on earth is wrong with Adobe?
So I tried another powerful free Image Optimizer by the name of RIOT and wow that thing is a little more advanced but I had the same problem.

Why were my images blurry?
You know what the problem was? Apparently my font size in Windows Control Panel under Display settings wast at “Medium 125%” and the browsers suddenly started respecting the Operating System font size and it was enlarging whole pages, images included which made them blurry and pixelated. You can go change that back to 100% easily.

So now I’m thinking that is probably happening to a lot of people and they really don’t notice. So just go check your Control Panel Display settings and make sure it says 100% then go view some webpages after. They may seem smaller at first but they will be so much more clear and laid out how the designer wanted you to see them.

CSS Text Size Adjust Reset

For us who build websites we want to make sure all users see the same clean layout so we need to add a little css in our stylesheet to normalize the browser.
The following code tells the browser to make sure it is at 100%. Not 125% and fuzzy or 80% and too small. But just where it should be at 100%.
html {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}

Please comment below and let us know if yours was on Small 100% or Medium 125% by default. And share if you think this could help your friends.