How to use high-quality photos for web

[Tepazi]

Hi dear forum!
I tried to design a Facebook cover photo (820x360) using some high-res photos I got from Pexels. I decreased their huge size to fit the small canvas and they became a bit pixelated. (I needed them to be really small in the overall banner).
I've used the free transform tool with holding shift to keep the width-height proportions, and I also tried to convert them into smart objects before.
The result is not too bad, but definitely not the best...Is there a better way to do it?

Thank you!

 

[Tepazi]

This is the picture I'm referring to, the model and the big dog remained fine, but I'm not very happy about the small dogs quality

 

[JeffK]

I think the problem is no matter how high a quality/resolution image you use, when posted on the web it will always render in 72 ppi.
The smaller you go, the greater loss in detail.

If you're going to post on the web, work in 72 ppi and make sure the color profile is set to sRGB. These settings will provide you the most
accurate representation of what the image will look like on the web.

 

[thebestcpu]

Hi @Tepazi
I agre with @JeffK that the low resolution is your worst enemy in this project with the small size of the dogs in the background. The technique you used is sound yet trying some others may be worth trying. Starting with high rez images use the Photoshop Image Resize command and try with different rendering options. It is hard to know which one will produce the best result for you.

You still end up with limited quality with small number of pixels. The small dog on the left of the three is only 30 pixels wide.

Once you get to a small image you could try some post processing tricks that fool the eye into thinking it is of a different quality (e.g. sharper, higher contrast) and see if any of those options give you a better feel. Just make sure you are not pixel peeping at the image (zooming far in) yet rather viewing as a normal viewer on FB would see it. Judge it that way.

In the animated GIF below, I compared the original image with one with a few Adobe Camera Raw Filter adjustments to enhance the contrast, clarity, and sharpness. I did it for the whole image yet you could limit changes to just part of the image if desired.

These are just some quick thoughts and hope they are helpful
John Wheeler

 

[JeffK]

@Tepazi - another option is to change your layout a bit. Make that trio of dogs larger to fill up the space.
I also ran the banner thru Topaz Gigapixel just to recover some detail and then brought it back do to your banner size.
One other art correction I made - underneath that trio of dogs is a "cloud" of white out-of-focus shrub. Maybe clone that out.
Just for demo.
- Jeff

 

[Tepazi]

Every time I am amazed by the level of help this forum provides!
Can't thank you enough... really amazing tips.