Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It only takes a minute to sign up.
Sign up to join this community
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?
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%)
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%.
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.
