Resizing image to smaller now is blurry

[Crispuchita]

Hi there I'm new here yet I have been using photoshop for years and now I'm finding myself with something that had never happened to me before. Usually when I resized a image, jpg, to smaller size it went fine. 
But now I make images smaller and it turns out blurry and tbh Idk what to do to fix this issue...

please help 

thanks in advance 

Cristina

[Chris 486]

Hi!

That stinks to hear! We'd love to help and could use some more specific info. can you tell us the step you are taking to resize your image and provide screen shots of your panels and screen so we can look with you on your process? The more detail the better!

[Crispuchita]

Hi Chris, the original size is 2592x3872, i want to resize it to 321x480

I have the last version of photoshop

[Conrad_C]

Have you tried any of the different Resample methods, such as the Bicubic Sharper option which Adobe suggests for reduction?

[D Fosse]

So the question is - resize from what to what, exactly? Pixel size before, pixel size after.

[Crispuchita]

hi D Fosse please see above,

you guys are fast, I wasnt expecting such  a speedy answer from anyone, what a wonderful community.

[Chris 486]

Those settings seem ok to resize. Could you post your result after the resize? 

[Crispuchita]

Hi Chris, here the pic. idk if im doing something wrong or im going cucu XD

[D Fosse]

While that's a small image, there's no reason it shouldn't be crisp and sharp.

Do you have a retina screen? In that case it matters where you see the finished result, because all "consumer-oriented" applications will scale the image up to 2x linear dimensions when they detect a high density screen. This includes all the native MacOS apps. This is the industry-standard workaround to ensure the same material can be used regardless of screen technology. Photoshop OTOH will show you the true native size of the image (much smaller).

The point is that such a small image, scaled up, will appear blurry.

I don't see anything particularly wrong with the image as such, but scaled up it will be blurry because of the small pixel size.

[Crispuchita]

Hi Chris, I do have a retina screen indeed, is there anything I can do to make it sharp and crisp? I'm making my website and the pics are very important in the portfolio as you can image. I use the iMac 24 inch retina screen idk if that matters, but you never know. 
or is there maybe an step I can do to improve the quality. 

[Crispuchita]

Sorry I meant D Fosse 🙂

[D Fosse]

Not as such. You can't stop the scaling - nor would you really want to; because this is how we can all look at the same images on the same webpages, and see about the same thing. If not for this scaling, we'd need to have separate internets for those with retina displays, and those with standard displays*.

All the common image viewers follow the same practice just to keep things consistent. Except Photoshop, which displays accurately.

So what can you do? First of all, it's not going to look as bad as you think. On these screens, everything will display this way. Yours won't be any worse.

But if it was me, I'd go a final round of careful sharpening in Photoshop. When assesing this, it's imperative that you view at 100% in Photoshop for the most accurate view, and then also check at 200% to see how it will look in other browsers and viewers. Try to tighten up edges as much as you can without introducing halos and other edge artifacts. Personally I think the ACR filter is still the best for this, because you can control halos very effectively with the detail slider.

----

*There is an alternative approach where you upload two images  to the site, and the browser then chooses which one to display based on the detected screen. But this requires special coding for each site, and so it's probably never going to get universally implemented.

[Zesty_wanderlust15A7]

" it's probably never going to get universally implemented."

Tons of sites are using this and AFAIK all major browsers understand it?

So the implementation is really up to the webdev. In that way you are right: not all sites will have it, but she could implement it.

[Zesty_wanderlust15A7]

Maybe you have chosen one of the softer methods in Preferences (not sure Auto will then select that or Bicubic Sharper...)

Anyway... From reading a lot of nerds, you ideally have to resharpen every time you downsize, so it's good to use the least damaging method — Bicubic (best for smooth gradients) — then apply your favorite sharpening method.
Greg Benz still has a free version of his Web Sharpening panel too, AFAIK. Tons of options out there better than what's available in Image Resize. If you want to keep it simple, maybe try Smart Sharpen instead — it can give a nice result w/o obvious edges (when set to Lens Blur it's actually deconvolution [refocusing], IIRC).

[D Fosse]

I agree. I don't like Bicubic Sharper, I think it oversharpens, and at too high radius at that, leaving a lot of artifacts. I always use Bicubic Smoother, which sharpens very little if at all - and then run sharpening afterwards. As I said above, my favorite is still the ACR filter, which gives a lot of control over halos and artifacts.

[Zesty_wanderlust15A7]

Tidbit on the side...
IMO, people on hi-res screens have to develop more care when sharpening. Let's say they use "90ies sharpening" with Unsharp Mask. It may look fine on their screen with smaller pixels, but the countless people on HD monitors with good eyes may see this...

This sight mostly went away for quite some years (people seemed to have learned better methods), but IMO seems to have returned since 4K monitors came to market. Not a ton, but I regularly see it.