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?
Answer
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%)
Attribution
Source : Link , Question Author : Hudoo , Answer Author : PieBie