2

I came across this site and saw that it had a couple of blurry images. I checked my browser zoom in Firefox and Chrome and they were both 100%. I copied the images to look at them in Photoshop and Paint, and they were both sharp and displayed smaller.

My first thought was that it was browser zooming, but it's not. As far as I can tell, there's no CSS coding to make the images bigger in the browser. It's nice and sharp at 75% zoom in Chrome. What's that about? Screen Resolution?

Browser Capture

Photoshop Capture

Browser Capture

Photoshop Capture

screen resolution

Improve this question
5
  • 1
    it's possible the HTML was enlarging the images.. there's really no way to tell without examining the code or the original images. – Scott Jun 18 '15 at 0:27
  • You're right Scott, it could be. It's clear on some of the site pages, but not on their main page... nib.com.au Also, are you saying that if I save the image, it doesn't show me the original image? – Hudoo Jun 18 '15 at 0:33
  • 4
    Based upon the site, and your attached images, it appears as though your browser zoom is set greater than 100%. – Scott Jun 18 '15 at 6:50
  • Seems to have been a resolution issue affecting my browsers in Windows 8.1. Set my display to Medium - 125% and that fixed Chrome. For Firefox I did a work around and got the Default Zoom Level add-on and made the default zoom 80% to match Chrome. At least now I know it's the display and not the code or images... Safari on the Mac showed the images at the proper size. – Hudoo Jun 18 '15 at 11:42
  • Yup, there are lots of issues with some Windows browsers having weird default zoom levels on some high pixel density devices. Firefox is the worst because it pretends it's not zoomed in when it actually is. There's some discussion and possible workarounds here - How do you handle client's browser zoom ? tldr; consider doubling image file dimensions while holding image size with CSS, or, using SVG – user56reinstatemonica8 Jun 18 '15 at 17:00
2

I copied the images to look at them in Photoshop and Paint, and they were both sharp and displayed smaller.

There's the key to your problem. If you just copy-pasted the images to PS, and they're smaller there than they are in browser, your browser is upscaling them, thus enlarging the pixels and giving you the blurry view.

Check your CSS again. Somewhere, you're telling the browser to display the images larger than the actual size. Based on the images you included in your post, the original is about 250 x 290 px, while the browser displays it at 435 x 380 px. (if your included images are 100%)

Improve this answer
0

Thanks for the suggestions, guys. If it were the code making it zoom, then it would be zoomed on another device and it's not(I checked it on a mac). It's my Windows 8.1 combined with a high rez screen that is zooming the browsers independent of the usual in-browser zoom controls as I checked that the in-browser zoom was at 100%.

Improve this answer
-2

That means, the pictures have no problems. The HTML/CSS code is enlarged the image from its actual size.

Check the size how its defined by the Source code by using the Browser's Inspect Element. The width and height might be differ from the actual size of the image.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.