Blurry pngs when placed in the site

[danielle.forrest]

I have screenshots taken from both a 15" Retina MacBook Pro, and a large monitor. When I put them through Photoshop & save them as pngs (or jpegs) they end up looking blurry in the website.

The images in the site are smaller than the originals. I have tried exporting them @x2 size.

Any thoughts?

[bzareenk]

What is the resolution of the pngs that you are using?

[danielle.forrest]

144 pixels/inch

[bzareenk · Accepted solution]

That's how a 144 pixel image would look in its actual size which is not so bad quality wise but if you zoom in obviously it will blur out and pixelate.

[danielle.forrest]

The issue is when it is placed into the code.

It goes from perfectly clear in Photoshop to blurry when I view it in Chrome.