Save for Web quality low, worse than screenshot

[kmerrow]

I've often run into frustrations using the Save for Web feature regarding color shifts, but I am currently experiencing a loss of quality/high pixelation that I can't quite comprehend. I recently switched to a new Macbook Pro with retina display, so I understand to a degree why the images appear smaller in Photoshop than they do when transferred to the web (although I find this to be a struggle / misleading), but I don't see why the quality would diminish as much as it appears to on my screen.

This first image is using Save for Web:

This is a screenshot of the image within Photoshop CS6:

And here is a screenshot of them both open in Preview (top is after using Save for Web, bottom is screenshot of open Photoshop file):

It almost looks as if I sharpened it (too much) and then enlarged it. I am using Bicubic Sharpener as I'm reducing the image size. Within the Save for Web feature my settings are at Max, 100, Progressive, Embed Color Profile, and Convert to sRGB. I've tried lowering the number, but it just makes it look terrible.

Is there something I'm missing here? Any tips?

[gener7]

See if these settings help and make sure the Image Size in the Save for Web dialog matches your original.  100% view is best, any other magnification would not be as sharp.

[kmerrow]

That doesn't seem to make much of a difference in the appearance. I'm wondering if this issue is a result of my retina display. Is this possible? I'm hoping it is for the client's sake...although, for my sanity, that's a nightmare.

[gener7]

Have you tried Bicubic instead of Bicubic Sharp for your reduction?

[gener7]

I'll also admit I don't use a retina display on my 2012 MBP. Are you able to view it better on your old Mac?

[gener7]

I also hope your monitor is calibrated. Here you see my Photoshop color settings. Beyond that, I hope 21 shows up, he really knows color management matters.

[D Fosse]

Photoshop displays the image correctly. Web browsers and photo viewers don't have the same requirements for critical accuracy, so they scale images to whatever makes them display at the same screen size people are used to.

If the image is already a bit oversharpened, this scaling may not play out well. Bicubic sharper is commonly regarded as overdoing it, and many people (myself included) avoid it.

As for the Save For Web settings, preview should be Use Document Profile, not Monitor Color. The latter is the non-color managed version, and if you use a color managed browser the two won't look the same.

Much has been said and written about the "mysterious web color shift", but it's just the difference between color managed and not. There's nothing mysterious about it.