Hi,

 

I'm just finishing a project for a client. They are being quite a pain about the quality of the images in the image gallery.

 

The original images were supplied at 4000 X 2873px. The only thing I've done is scale them down to 800 X 530px.

 

I've tried jpg and png using no compression at all but they still look less sharp than the larger ones. But I think this is simply due to image size rather than resolution or any compression factor.

 

I've put up a couple of examples. Two images scaled to two sizes - original supplied size and scaled down web/mobile friendly size.

 

http://www.clearstreamdesign.co.uk/imagedemo/imagedemo.html

 

I'm pretty sure I know the answer to this. But I just want to rule any other possibility out because I'm getting pretty f'd off with my client.

 

Am I missing something? Can I improve the quality of the images.

 

I'm using photoshop and I've saved the images as jpg and png and not used any compression whatsoever.

 

Any advice gratefully received.

 

Thanks.

Looks like they should be .jpg's as they are photographic.

 

Have you tried turning off sub-sampling when you run them through your image optimiser? That can make a big difference, if you use sub-sampling that can often result in blurring.

 

Also I noted that the original 4000px versions you uploaded don't seem to be that good quality, the plate of food one starts to pixelate very quickly when you zoom in.

I've never used sub-sampling and I'm using Photoshop. So I don't think that's a factor.

 

I've tried saving as both jpg and png. The images in the example are jpg's.

 

These images are part of a series of 20 that are going in to a gallery. I need to consider file size and loading times.

 

I was a printer before I got in to the web so image quality has long been a challenge. Even on paper there's so many factors (print resolutions etc), but on screen, I don't think you're ever going to get a first class, flawless quality jpg. . . .

 

Or does anyone know better than me!?

I'm far from an expert on image processing but I will share some of my experiences with converting high resolution images to a web format.

• Make sure to convert the images to RGB if the source images is in CMYK.
• If you want the images to look the best on retina displays the image resolution should be twice the display-size.
• When converting images with high dynamic range to 24 bit make sure that they don't come out over-exposed. You might need to tweek the curves in PS first to avoid large areas to be “washed out” in white.
• When people view images from a media their photo-viewing software often supports colour management - browsers does not use color management (as far as I know) therefore the images in the browser does not have the same depth in saturation. A workaround can be to temporary convert the image to lab-colors in PS and optimize the saturation and then convert back to rgb

there are two basic methods that usually work for me - or then a combination of the two

 

1. if possible, downsize to 50% or preferably 25% first (rather than a random number like 17.6%) then use unsharp mask at something like unsharp mask 50%, radius 2, threshold though it depends a lot on the image to begin with, but so you're essentially bringing something like the same level of detail back into the photo as before but without causing any nasty visual effects.
   
   downsizing in a couple of stages from a large image and then applying unsharp mask works better than downsizing in one go and applying a a huge dollop of unsharp mask at the end.
   resize to 800 x 534, crop to 530 (you did resize proportionaly didn't you?) then unsharp mask a little less agressivbely now unsharp mask 25%, radius 1, threshold 2 (compare the progess with the original photo - the chili and food in the bowl, the highlights on the er blueberry looking stuff?!
   using this method i received fairly good results @ 174kb (using kraken io https://kraken.io/web-interface lowered it a further 50 but the chili looks poorer....
   
   

2. use the highpass filter - resize in one go and the unliock the layer in ps, duplicate it (ctrl +j i think) Filter > Other > highpass (see screenshot so that the details start to show in the grey) http://gekkoweb.com/stuff/food-photos/screeshot-highpass-filter.jpg then change the layer opacity of this new layer to overlay (you can then reduce the opacity of the layer to tweak the effect)

see http://gekkoweb.com/stuff/food-photos/highpass-before-and-after.jpg for a highquality jpeg of the screenshot of the before and after screenshot in PS)
this results in a pretty sharp image but without the over contrasty look that you can get with unsharp mask and nasty edge interference etc (228 kb)

 

 

or the lossless png from that before compression http://gekkoweb.com/stuff/food-photos/0016Chesters-Photos-uncompressed.png

 

3. alternatively you can use some gentle unsharp mask and then finish up with the high pass filter (with the contrast details just starting to show in the grey window).

 

link to folder of stuff is here http://gekkoweb.com/stuff/food-photos/

 

i usaually reserve highpass for hair or fur - things with fine detail that can tend to weaken and 'split' at the seams under unsharp mask

you could go further in the compression - it depends on the level of compromise between image quality and dl time. if they are hero images i.e. the main large image on a relatviely lean page then 200-300kb is not so bad. if they are part of a slideshow then i would aim for about 100kb (10 images and you're up to 1mb without breaking sweat)

 

***

using first unsharp mask then some highpass - 331kb (could go lower but it's a detailed pic and doesn't compress so well ; )

 

 

i tried kraken on this but i think it's more suited to conventional - more landscape style photos or portraits - and i've noticed it desaturates reds quite a lot - most noticable in the 'gift vouchers now available' bit so i didnt upload the kraken version of this

 

the other problem with the bar picture is that there is only Jamesons in the whisky section...

Edited July 10, 201412 yr by dap

Was it any help?!

Hi Dap, I've only just seen your previous message sorry. For some reason I didn't get the alert that there was a new post!!! Or maybe I just missed it.

I've just had a quick read through of your suggestions and I will try it when I've got a moment. It seems to make sense to me.

 

Before I was in to web design I was a pre-press lithographic print man so I'm very familiar with all the issues surrounding image quality . . . for print.

 

I'd already reached a solution with my client before I saw your post. I'll pm you the details of that incase you're interested to see. I compared what I'd done with the images on the website of the photographer he used. The images on the photographer's site were even lower quality than what I'd done.

But anyway, I persuaded my client that the issue is size basically. I could put the original huge files up and everything would be fantastically sharp, but we have to consider load time. There's a compromise to be reached. When I showed him his photographer's gallery, he finally accepted my point.

 

I'll pm you the details. Thanks for your advice I'll definitely try it when I've got time.