C:\StickyStatic_
  • Home
  • Modems & Routers
    • Best DOCSIS 3.1 Modem
    • Best Modem for Comcast
    • Xfinity Voice Modem Comcast Triple Play
    • Best Spectrum Modems
    • Best Spectrum Routers
    • Best Router for Cox Modem

Home » How to Guides

Updated: Apr 25, 2021 | By Gerry D

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.

About The Author Gerry D

gerry d networking tech support

Gerry D worked a long career in technical support for internet providers with a strong networking background. With his advanced computer knowledge, he founded StickyStatic to help others make the right choice when it comes to tough networking decisions.

Gerry D was a Tier II Internet Tech Support Agent for many years working for the 2 largest internet providers in the United States. After that, he went on to high-end Tech Support in a large educational institution. So modems and routers are some of his favorite toys. He wants to make sure you leave here with the right choice for your home wireless, happy enough to recommend StickyStatic to your friends.

Follow Us On Social Media


Subscribe to StickyStatic

StickyStatic© 2009 - 2021
About | Contact | Subscribe | Privacy Policy | Terms of Service| Sitemap

As an Amazon Associate I earn from qualifying purchases