Difference in apparant sharpness when JPEGs are viewed in Photoshop and in a Browser

I have noticed my uploaded images look a bit softer than I expected.

Checking the difference seems to be due to more to the browser rather than the down-sampling or JPEG encoding.

Below a screen capture from left to right:

Left: Full resolution capture sharpened TIFF viewed in Photoshop, Adobe colour space, zoomed to match the on screen size of the JPEGS.
Middle: Down-sampled JPEG sRGB colour space viewed in Photoshop zoomed to 200%.
Right: Same down-sampled JPEG sRGB colour space viewed in a browser zoomed to 200%.

I am guessing that the difference in the display of the two JPEG images is due to different handling of the conversion from the sRGB to monitor colour space between photoshop and the browser.

It's nothing to do with the browser, your browser is just displaying the info that the web server sent it. What happened to your file after it was uploaded and before it is sent back to you for display? What site is it uploaded to and how do they handle what you upload in terms of further compression?

Thanks for taking an interest, curious isn't it.

So the file in the browser is exactly the same as the upload, I have my own server space that does nothing to it I just upload it.

The local copy and the downloaded browser copy are the same but just look different when displayed in Photoshop and a browser.

NB the OS is Windows 10 so I am fairly sure the browsers ignore the colour space info anyway, even so the JPEGs are all set to sRGB.

Try evaluating the images at 100% or 1 pixel per screen pixel, otherwise your are introducing display scaling into the mix on a per-application basis.

Kirk

Lester Wareham wrote in post #18762865
Thanks for taking an interest, curious isn't it.

So the file in the browser is exactly the same as the upload, I have my own server space that does nothing to it I just upload it.

The local copy and the downloaded browser copy are the same but just look different when displayed in Photoshop and a browser.

NB the OS is Windows 10 so I am fairly sure the browsers ignore the colour space info anyway, even so the JPEGs are all set to sRGB.

So what happens when you open the local copy with your browser? Is the difference still there?

kirkt wrote in post #18762940
Try evaluating the images at 100% or 1 pixel per screen pixel, otherwise your are introducing display scaling into the mix on a per-application basis.

Kirk

This.

I have a client who displays 1200px square images in a 400px square HTML page then complains about bad color and moire patterns. Most frustrating thing ever.

http://www.zen20934.ze​n.co.uk/photography/in​dex.htm

This (from your sig line) is a zen site, is this the site you're evaluating?

Same complaint about soft images in browsers here: https://medium.freecod​ecamp.org/-898b38a6c0e1

kirkt wrote in post #18762940
Try evaluating the images at 100% or 1 pixel per screen pixel, otherwise your are introducing display scaling into the mix on a per-application basis.

Kirk

100% is where I first noticed the issue, I just used 200% for screan shot.

sidknee wrote in post #18762941
So what happens when you open the local copy with your browser? Is the difference still there?

Yes, the local DS JPEG looks the same through the browser, it has the same byte count also.

I can do a file compare but I expect it to be the same as I just FTP the local copy to my server space.

Left Handed Brisket wrote in post #18762954
http://www.zen20934.ze​n.co.uk/photography/in​dex.htm

This (from your sig line) is a zen site, is this the site you're evaluating?

This is the server space but as noted above the issue seems to browser vs photoshop rather than anything to do with the server space.

The example image is http://www.ware.myzen.​co.uk …te%20A01_001_18​-10-18.jpg

What browser? Some browsers are better than others. Also, some browsers such as Firefox need to be configured to work at their best.

Without knowing what browser you are using, it is hard for us to make any recommendations if there is something that could help you with your problem.

drmaxx wrote in post #18762973
Same complaint about soft images in browsers here: https://medium.freecod​ecamp.org/-898b38a6c0e1

Interesting, not sure it applies to my case, the webpage is static.

My web workflow takes a sharpened full scale TIFF, constrains it to 1024x1024 using bicubic-sharper, converts to 8bit sRGB and adds output sharpening using r=0.6 high pass sharpening. Finally the image is saved as JPEG (compression level 6 I think.)

So the browser “should” not have to do anything for a 100% view.

Nogo wrote in post #18763288
What browser? Some browsers are better than others. Also, some browsers such as Firefox need to be configured to work at their best.

Without knowing what browser you are using, it is hard for us to make any recommendations if there is something that could help you with your problem.

So I am running windows 10, I see the same issue using EDGE or iexplorer, but as I say above the browser should not need to do any processing for 100% view unless it is limiting the amount of detail it extracts.

I would be interested for people to compare the linked file on their browser with the screenshot.

The image looks about the same as yours using my Firefox browser. Is it possible to load the image to this forum's server so we can eliminate the problem being due to your server? The reason I say that, if the problem was strictly a browser problem, I would think the browser should also make the screen shot dull like the image on your server. On my end it (the first screen shot) is not.