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.
simon
Thanks I was really hopeful that you’d found the answer for me, but when I checked the Display setting it’s already set at 100%. So still looking for a solution to this. Also, Chrome seems considerably worse than IE in this regard…. Appreciate hearing any further ideas.
Phillip
This was driving me crazy too. But I think the correct answer is not to force your page to scale down. That will make the text on your webpage tiny compared to all other webpages they visit. That could turn them off worse than blurry photos.
Also, I like respecting the viewer’s settings and not overriding them.
However, this blurry image scaling is awful, so … what to do? I think the correct answer is:
1. Browsers should have an option to zoom/scale everything EXCEPT images. And the default should be to NOT scale images, until…
2. Browsers fix their image scaling to work much better and not be blurry!
David
How about recognising the viewers’ reading requirements rather than the designer’s? A foundation of accessible design.
Kristi
I’m still having issues when people open it in IE and Firefox from what I’ve been told.
Any additional code that might solve for that?
Sov
Thanks for this, but how do you fix this on a Mac, and Chrome?
Do I need to upload the images again, or will they adjust automatically?
Please advise. Thanks in advance.
Eric
Awesome! Thanks so much! I thought I was going crazy.
Rob
thank you – I had exactly the same experience as you – doubting photoshop. Image was correct size – it was my PC display settings – 125% !!