On a couple of my recent posts I have noticed a remarkable difference in sharpness between the image on my screen when working in Photoshop and the image on the screen when posted. When prepping images for the web I'm working at a resolution of 72ppi and using the Save For Web feature. I have made no changes in workflow and it doesn't seem to happen to every image. I can understand color variations that come from converting to sRGB but the loss of sharpness puzzles me. Any suggestions other than over-sharpening the original and hoping it looks OK on a gallery?>=))>
The most recent image can be found here. The details in the implements are really soft compared to the PS version
Are you posting on NPN or linking to a photo stored elsewhere? If the former, then your softening may be a JPEG compression artifact. It can be especially troublesome in high detail shots like yours. When you posted the shot linked in your message, what image quality percentage did you use?
Bill, it's hard to understand if you've not changed your work flow at all, unless some item got changed accidentally.
However, the amount of detail in the field of Bluebonnets can be a real challenge. I get that all the time with Aspen Tree detail. The compression really hurts the poor things.
Jim and Paul: Not sure what the quality setting was, I always use the optimize to file size option to get as close to 200kb as possible. I am posting through the NPN server. The area that bugs me the most is actually on the implements. In the PS version the spokes on the wheels and the holes in the seat are very sharp and well defined. Would the NPN software be doing something? Another thing that puzzles me is I never see the same problem on my Flora or Weekly Challenge posts.
The softness surely looks like loss of fine detail due to compression. The image has a large amount of fine detail and it's been my experience that, at file sizes required for web posting, such images really suffer from compression.
After saving the image, one thing I now do before posting is to view the image on my screen in another application such as MS Office Picture Manager, or upload it to my web site and take alook at it in a browser. If anything is goofy, it will be apparent.
You might also review your sharpening and saving for web workflow, being sure to check the settings to see if you accidentally changed something.
Hmmmm, not sure at all on this one, Bill.
Just as a thought I've listed how I Sharpen for all my NPN posts, including the Aspen trees that always show compression issues.
Here is what I do for sharpening. Not sure how large your original images are, and I'm sure there will be some differences in the process and ending results too. However, here is what I do and have never really seen anything go wrong using this procedure. For the larger version at 1200 x 500k I take my original image from large MF or LF scans and size it to 1600 long side with the original resolution unchanged. Then I use one step of Marc's sharpening procedure. I use the "Sharpen" once. Then scale size down to 1200 long side, original resolution still unchanged. Convert the image from Adobe RGB 98 to sRGB. Then "Save For Web" which I size to the optimize 500k and is also set for 72ppi resolution.
I use the same for processing for standard size image of 720 x 200k with scaling first to 1200 and then the same follow up steps. Once "Sharpened" then drop to the 720 long side.
Some find it necessary to use the "Sharpen" step twice before stepping down to the finished size, but once seems to work for me. Again convert to sRGB and "Save For Web".
OOOOOps, for got to ask. Have you changed browsers at all? I learned the hard way on a couple things with web viewing as I use three different browsers on my PC. AOL, Mozilla-Firefox, and IE8.
Bill, also Preston's comment on testing by mounting and reviewing with a browser is a good one. I think the neutral back ground of our own NPN Portfolio area works excellent for that.
Bill, I'm probably the least informed of those who have responded here, but as soon as I clicked on your link I thought it must be a compression issue. I had a very detailed post a while back that was killed by compression in the same manner. I was actually a bit embarassed when I pulled it up a while after I posted it.
I don't think there's a good fix for this problem -- it's just one of those things. Compression really hurts scenes with loads of fine detail like that. It doesn't happen all that often, fortunately, as it really takes a lot of detail to create the situation you're encountering.
If you mean in the Save for Web preview pane, not necessarily. That's an approximation.
"Optimize for File Size" means you minimize the amount of JPEG compression required. Depending on the level of detail in the photo, that doesn't mean there won't be defects. JPEG is a "lossy" compression algorithm. Some of those losses appear as loss of detail; others as artifacts.
There's no way around the problem of complex detail, JPEG compression and image quality, short of posting a link instead of through NPN.
Yep, that seems to have been a key point overall Bill in review of the scene you have linked. There is a lot of small fine detail there in the plants. I always have compression show up as I mentioned earlier with aspen tree images. Sadly, as Jim states, no fix for that item at this time.
Maybe magically fixed in CS5.....
Glad this topic has been brought up. I've noticed that the smaller display photos on the forum pages seem to be very soft compared to what my original - 720px on the long side @72dpi, 200Kb max - is. I know how to sharpen and compress expertly as I was a pre-press electronic lab tech at a major daily paper for a few years. But no matter; the images posted do not seem to reflect the sharpness I sent them off with. I'm not commenting on areas of detail,, but rather the overall sharpness of the "thumbs" and to a lesser degree, the larger display image. I'm new to the NPN, but that's the first thing I noticed when I posted my first photo.
It's been my experience that every single image I've resized downward has needed to be resharpened a bit.
Marc Adamus' web sharpening technique described above fixes things right up for me.
Posted by Richard Ditch on April 5, 2010 at 11:25 PM
I think the basic issue here has been covered by many comments: the original has too much detail/texture to survive jpeg compression to get under the 200Kb size limit.
but I see a lot of things presented here that trouble me about people's understandings of some basic stuff. So, here's a list of things that need to be said:
1. dpi in an image has no meaning for an image viewed on the web. Use what dpi setting you want as it does not affect the viewed image. Forget about setting 72 dpi.
2. the only way to conclude that "NPN software has changed the image" is to compare the uploaded image with the displayed image. Open the "saved for web" version on the computer in whatever viewer application you have (Preview and Graphic Converter are the ones I used most on my Mac) to she exactly what you have uploaded to NPN. If the image you view in a web browser after posting looks different then and only then should you suspect either NPN algorithms or your ISP or your browser.
3. the image viewed in Photoshop prior to Save for Web is not the same as the output of Save for Web.
4. Jpeg compression works by taking groups of similarly valued pixels close to each other and replacing the individual RGB values of each pixel with a single RGB value that applies to the range. When there is a lot of smooth color without a lot of variation (like a plain sky or monotone color background) then it is easy to compress the image without introducing a lot of artifacts along color/detail transitions in the image. When there's lots of texture in the image then compression doesn't work very well - it is impossible to have a single RGB value represent a large area. But to meet a target file size (< 200Kb) the compression algorithm must include more variation in the "close" pixels. This is how a compressed image loses detail. When the compression is increased, the area considered "close" expands.
That's a very nice summation, Richard. Thanks for that.
I usually set the resolution images for Web images at 72 dpi because it works nicely with text layers with font sizes in points. Also, if some goofball tries to make a big print of one my images, it will look pretty crummy.
Also, I hope Jim sees this and can comment on whether or not the gallery software does any resizing. I don't know if it does so or not, becauee I host all my images on my site's server.
I usually set the resolution images for Web images at 72 dpi because it works nicely with text layers with font sizes in points. Also, if some goofball tries to make a big print of one my images, it will look pretty crummy.
Hey Preston, you mean like the little old lady who came through here a few years ago and made numerous greeting cards from NPN images to sell on line. Yep, short of watermarking it dead center the 72ppi does slow them down somewhat.....
Also, I hope Jim sees this and can comment on whether or not the gallery software does any resizing.
I think this used to happen (and might still happen) if an image that is larger than allowed is selected for uploading. And there might have been a severe penalty built into the resizing to make it obvious that something was done incorrectly. But only Jim or someone else involved can say for sure.
Posted by Rodney Ninow on April 9, 2010 at 12:53 AM
Photoshop's save for web automatically reduces files to 72dpi. If you are using the save for web also to reduce the pixel dimensions, I suggest not doing it that way. Reduce the pixels in Photoshop first, then resharpen. Often times, when reducing pixels, images lose sharpness. Then go to save for web, no need to make the image 72 dpi first, since save for web does this for you.
You have made conflicting statements, here, I think. First, you say to set resolution to 72 dpi in PS, and then, in the last sentence you say, "Then go to save for web, no need to make the image 72 dpi first, since save for web does this for you. "
I always convert my color space to sRGB, set resolution and pixel dimensions, sharpen and then go to Save for the Web. I believe this is a better procedure.
==P
Posted by David Bostedo on April 9, 2010 at 11:25 AM
I usually set the resolution images for Web images at 72 dpi because it works nicely with text layers with font sizes in points. Also, if some goofball tries to make a big print of one my images, it will look pretty crummy.
The font issue is true, until you flatten and finalize the image, then, again, the 72 dpi thing is completely meaningless. And as far as printing, it's also meaningless, since selecting a particular print size will let the driver choose whatever dpi (ppi actually) it wants to.
In addition to Richard's post above, here's a fantastic thread () detailing why 99.9% of the time, your dpi/ppi settings are meaningless.
The takeaway? 72 dpi settings are meaningless in web images
EDIT : Added the thread link...sorry about forgetting it
Posted by Rodney Ninow on April 9, 2010 at 1:36 PM
Preston, I think you read it wrong. I said reduce the pixels in Photoshop, meaning going down from 4000x3000 (or whatever) to your desired smaller dimensions. Then when you go to Save for Web, it automatically changes it to 72dpi. I don't like using Save for Web to reduce the resolution (pixel dimensions) because then I can't sharpen before it is saved.
There are many ways to skin a cat, and we all think ours is the best way. Whatever works for each individual is the best way.
Discussion
20 repliesThe most recent image can be found here. The details in the implements are really soft compared to the PS version
However, the amount of detail in the field of Bluebonnets can be a real challenge. I get that all the time with Aspen Tree detail. The compression really hurts the poor things.
The softness surely looks like loss of fine detail due to compression. The image has a large amount of fine detail and it's been my experience that, at file sizes required for web posting, such images really suffer from compression.
After saving the image, one thing I now do before posting is to view the image on my screen in another application such as MS Office Picture Manager, or upload it to my web site and take alook at it in a browser. If anything is goofy, it will be apparent.
You might also review your sharpening and saving for web workflow, being sure to check the settings to see if you accidentally changed something.
--P
Just as a thought I've listed how I Sharpen for all my NPN posts, including the Aspen trees that always show compression issues.
Here is what I do for sharpening. Not sure how large your original images are, and I'm sure there will be some differences in the process and ending results too. However, here is what I do and have never really seen anything go wrong using this procedure. For the larger version at 1200 x 500k I take my original image from large MF or LF scans and size it to 1600 long side with the original resolution unchanged. Then I use one step of Marc's sharpening procedure. I use the "Sharpen" once. Then scale size down to 1200 long side, original resolution still unchanged. Convert the image from Adobe RGB 98 to sRGB. Then "Save For Web" which I size to the optimize 500k and is also set for 72ppi resolution.
I use the same for processing for standard size image of 720 x 200k with scaling first to 1200 and then the same follow up steps. Once "Sharpened" then drop to the 720 long side.
Some find it necessary to use the "Sharpen" step twice before stepping down to the finished size, but once seems to work for me. Again convert to sRGB and "Save For Web".
Bill, also Preston's comment on testing by mounting and reviewing with a browser is a good one. I think the neutral back ground of our own NPN Portfolio area works excellent for that.
I don't think there's a good fix for this problem -- it's just one of those things. Compression really hurts scenes with loads of fine detail like that. It doesn't happen all that often, fortunately, as it really takes a lot of detail to create the situation you're encountering.
"Optimize for File Size" means you minimize the amount of JPEG compression required. Depending on the level of detail in the photo, that doesn't mean there won't be defects. JPEG is a "lossy" compression algorithm. Some of those losses appear as loss of detail; others as artifacts.
There's no way around the problem of complex detail, JPEG compression and image quality, short of posting a link instead of through NPN.
Maybe magically fixed in CS5.....
Marc Adamus' web sharpening technique described above fixes things right up for me.
but I see a lot of things presented here that trouble me about people's understandings of some basic stuff. So, here's a list of things that need to be said:
1. dpi in an image has no meaning for an image viewed on the web. Use what dpi setting you want as it does not affect the viewed image. Forget about setting 72 dpi.
2. the only way to conclude that "NPN software has changed the image" is to compare the uploaded image with the displayed image. Open the "saved for web" version on the computer in whatever viewer application you have (Preview and Graphic Converter are the ones I used most on my Mac) to she exactly what you have uploaded to NPN. If the image you view in a web browser after posting looks different then and only then should you suspect either NPN algorithms or your ISP or your browser.
3. the image viewed in Photoshop prior to Save for Web is not the same as the output of Save for Web.
4. Jpeg compression works by taking groups of similarly valued pixels close to each other and replacing the individual RGB values of each pixel with a single RGB value that applies to the range. When there is a lot of smooth color without a lot of variation (like a plain sky or monotone color background) then it is easy to compress the image without introducing a lot of artifacts along color/detail transitions in the image. When there's lots of texture in the image then compression doesn't work very well - it is impossible to have a single RGB value represent a large area. But to meet a target file size (< 200Kb) the compression algorithm must include more variation in the "close" pixels. This is how a compressed image loses detail. When the compression is increased, the area considered "close" expands.
I usually set the resolution images for Web images at 72 dpi because it works nicely with text layers with font sizes in points. Also, if some goofball tries to make a big print of one my images, it will look pretty crummy.
Also, I hope Jim sees this and can comment on whether or not the gallery software does any resizing. I don't know if it does so or not, becauee I host all my images on my site's server.
-P
Hey Preston, you mean like the little old lady who came through here a few years ago and made numerous greeting cards from NPN images to sell on line. Yep, short of watermarking it dead center the 72ppi does slow them down somewhat.....
I think this used to happen (and might still happen) if an image that is larger than allowed is selected for uploading. And there might have been a severe penalty built into the resizing to make it obvious that something was done incorrectly. But only Jim or someone else involved can say for sure.
You have made conflicting statements, here, I think. First, you say to set resolution to 72 dpi in PS, and then, in the last sentence you say, "Then go to save for web, no need to make the image 72 dpi first, since save for web does this for you. "
I always convert my color space to sRGB, set resolution and pixel dimensions, sharpen and then go to Save for the Web. I believe this is a better procedure.
==P
The font issue is true, until you flatten and finalize the image, then, again, the 72 dpi thing is completely meaningless. And as far as printing, it's also meaningless, since selecting a particular print size will let the driver choose whatever dpi (ppi actually) it wants to.
In addition to Richard's post above, here's a fantastic thread (
The takeaway? 72 dpi settings are meaningless in web images
EDIT : Added the thread link...sorry about forgetting it
There are many ways to skin a cat, and we all think ours is the best way. Whatever works for each individual is the best way.