How can I make my website images look sharper and more professional using Photoshop?

[jason_6386]

Hi everyone,
I’ve been editing some photos for my website [removed by moderator], but I’m struggling to make them look as crisp and clean as I see on other professional sites.

I’m currently using Photoshop, and even though I adjust sharpness and lighting, the images still look slightly dull or pixelated after uploading them online.

Can anyone suggest the best Photoshop settings or export options for making website images look sharp, clear, and fast-loading?
Also, should I use “Save for Web” or export in a different way for better quality?

Thanks a lot for any advice — I really want to improve my site’s visual quality.

[D Fosse · Accepted solution]

First of all, do you have a high-resolution/4K/retina display - and is that where you want your audience to see them? 

In that case, you need to consider a few things and plan a little. All web browsers today automatically detect these displays and in response scale up 2x linear size. In fact, this is the current industry standard, to ensure that the same material can be used regardless of what screen technology the user happens to have. So if you just upload images without any special consideration, they will be scaled to double size, and thereby softened.

Unless.

A website can be coded to accomodate this, and in that case you can either upload two images, one for standard screens and one higher resolution for 4K screens. Or you can upload a high resolution image which is scaled down for standard displays. Either way, the browser picks which and what to display. But the site has to be coded to allow this (older sites usually aren't), and some file naming conventions and so on must be followed.

Another complicating factor, which I personally hate, is responsive web design, all the rage now, where images are automatically scaled to fit browser window width, whatever it is. This turns everything to mush, not much you can do about that.

If images are displayed at fixed size, find out what that is, and prepare at that size. Do sharpening at final size.