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

Home » How to Guides

Fix for blurry browser images in Chrome and FireFox

gerry d networking tech support
By Gerry D
Updated: Aug 30, 2020

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.

Subscribe For Free Giveaways

About Gerry D

Gerry D worked a long career in technical support 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.

Comments

  1. Dasvid says

    Can anyone tell me how in easy steps, not GEEKY how to do this?

    Reply
    • StickyStatic says

      Yes, in Windows, hit the Windows Key, type Display Settings, change from 125% to 100%.

      Reply
  2. Seyed says

    Uncheck Use hardware acceleration (Menu> Settings> Show Advanced Settings > System menu).

    Reply
  3. Jerry Parsons says

    I had this issue and I tried everything. As a last resort I changed the image width property in my CSS from 45% to 46% and viola… sorted. I was using flexbox, not sure if this makes any difference. I hope this helps someone.

    Reply
  4. simon says

    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.

    Reply
    • Darla says

      My display was blurry at 100% but then when I went to 110% it was great! Just have to try different zoom percentages I guess.

      Reply
  5. Phillip says

    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!

    Reply
  6. David says

    How about recognising the viewers’ reading requirements rather than the designer’s? A foundation of accessible design.

    Reply
  7. Kristi says

    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?

    Reply
  8. Sov says

    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.

    Reply
  9. Eric says

    Awesome! Thanks so much! I thought I was going crazy.

    Reply
  10. Rob says

    thank you – I had exactly the same experience as you – doubting photoshop. Image was correct size – it was my PC display settings – 125% !!

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

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

As an Amazon Associate I earn from qualifying purchases