Posted by Jack Garrett on March 1, 2011 at 7:25 PM
I am trying to help a friend post images to his website. These were drum scanned files and the resulting size was anywhere from 250-450MB. He used PS to resize the photos to 800 or so pixels on the long side and converted to S-rgb and used save for web. He needs to get to roughly 200-300kb and still have sharp images but these don't look good at all. any ideas on what to do? Can large files like this actually be reduced and still look OK?
Depends on how much fine detail is present. The less fine detail, the better the resized image may look.
When he uses Save for Web, he should use the Bicubic Smoother option in the Quality window and then choose None in the Metadata window to strip off the EXIF data in order to lose information irrelevent to the image.
I always use Save As.. instead of SfW because all images need more sharpening to one degree or another after resizing downward, and I don't have that control in Save for Web.
The most critical part of the work flow is keeping the photos in a lossless format until the very last step: saving for the web. If you convert to a lossy format earlier you can't get good results.
The next most critical part is to make certain you have set Image Reside function ((Image -> Image Size) correctly. The checkboxes fro Scale Styles, Constrain Proportions and Resample Image should all be checked. You'll want to select Bicubic or Bicubic Sharper from the pop-up at the bottom. For reducing image the best one varies with the photo content.
A warning: you can't get 800px on the long side and get decent images at 300KB unless the shots have little or no detail. It's hard getting images to look decent at 200KB that are 720px for NPN. On the parameters you've described, you are risking JPEG artifacts.
But at your last step, when saving for the Web, make certain the "Optimized checkbox is selected, the Embed Color Profile is not and the Quality pop-up in the lower right hand corner is set for Bicubic. The little list icon in the upper right hand gives you an Optimize to File Size dialog where you can set your target file size.
It can be a challenge, but can be done. I do all the time with those size files and I'm dealing with scan files as well. My image size though is 600 + frame gets me to 684, which is a bit smaller than 800.
Of course the biggest factor is the type of image. A sunset with few and simple continuous color will have smaller size than say a very detailed image if trees with a gazillion leaves in full autumn color. That kind of image requires lots of space because there are so many different pixels as opposed to a continuous-toned image with only couple colors. A big blue sky is an example.
A couple obvious things to make sure you're doing to reduce file size. Remove all the alpha channels you don't need in the channels palette. Make sure you convert to 8 bit. I'm sure the drum scans are 16 bit.
You can do a search in the Digital forum here or Google about web sharpening and re-sizing techniques. There are many. Many folks here use some sort of variation of the following technique. It's a two-step resizing technique:
1. Flatten image, discard uncessary layers, channels, make sure 8bit.
2. If your final size is 800px, the intermediate size for first step should be about 1.67X or ~1,300px.
3. Menu > Image > Image Size. Make sure "resample image" is checked. Set the longest dimension to 1,300 in the Pixel dimension box.
4. Go to Menu>Filter>Sharpen>Sharpen. Now this part is image dependent and you can certainly experiment with SmartSharpen, but this the basic premise. Perform Sharpen twice. This will grossly oversharpen the image, but hang on.
5. No resize to your final dimension: Image > Image Size. Resample is still checked.
This will get you started. Of course you can reduce the opacity if it appears oversharpened. Also, you could do the sharpening on a duplicated bg layer and you can mask out sharpening in the sky, etc. But that's a basic technique.
I now use some actions created by Tony Kuyper. If you're not yet familiar with Tony's Tutorials, masks and actions I highly recommend them. He has some sharpening actions that are included in his bundle of actions. They're great because they're actions and automated. You just have to enter your size values and change opacity to taste.
After resizing and sharpening, make sure you've converted to srgb, or you can check that in the save-for-web dialog.
I believe you can either specify the file size, OR you can just select the jpg quality and see what size you get. You "should" be able to get an average image below 300k. I've saved as low as 50% quality and for the web that can be acceptable. If you can save at 8 or 80%(depending on your dialogue) you're doing good.
It's a big topic and I've only brushed the surface. Hope this has helped a little.
Lon
edit: Since I wasn't working with final sizes of 800px, I went and did that on an image that has so much tiny detail that it would be a good challenge just to see if I could get a big file under 300kb. This was a 4x5 slide scanned at 2400ppi. My working PSD file is 865MB. Here is the image 800px and only 280kb. You can see some image degradation, but I think it looks pretty good considering all the factors getting this to the web. It can be done.
"..make certain... the Embed Color Profile is not (selected) and the Quality pop-up in the lower right hand corner is set for Bicubic."
I disagree. You actually want to embed the sRGB profile in the image and you want to choose Bicubic Smoother over plain Bicubic, as Smoother has proven to be a better resampling algorithm.
Discussion
4 repliesThanks
When he uses Save for Web, he should use the Bicubic Smoother option in the Quality window and then choose None in the Metadata window to strip off the EXIF data in order to lose information irrelevent to the image.
I always use Save As.. instead of SfW because all images need more sharpening to one degree or another after resizing downward, and I don't have that control in Save for Web.
The next most critical part is to make certain you have set Image Reside function ((Image -> Image Size) correctly. The checkboxes fro Scale Styles, Constrain Proportions and Resample Image should all be checked. You'll want to select Bicubic or Bicubic Sharper from the pop-up at the bottom. For reducing image the best one varies with the photo content.
A warning: you can't get 800px on the long side and get decent images at 300KB unless the shots have little or no detail. It's hard getting images to look decent at 200KB that are 720px for NPN. On the parameters you've described, you are risking JPEG artifacts.
But at your last step, when saving for the Web, make certain the "Optimized checkbox is selected, the Embed Color Profile is not and the Quality pop-up in the lower right hand corner is set for Bicubic. The little list icon in the upper right hand gives you an Optimize to File Size dialog where you can set your target file size.
Hope this helps.
It can be a challenge, but can be done. I do all the time with those size files and I'm dealing with scan files as well. My image size though is 600 + frame gets me to 684, which is a bit smaller than 800.
Of course the biggest factor is the type of image. A sunset with few and simple continuous color will have smaller size than say a very detailed image if trees with a gazillion leaves in full autumn color. That kind of image requires lots of space because there are so many different pixels as opposed to a continuous-toned image with only couple colors. A big blue sky is an example.
A couple obvious things to make sure you're doing to reduce file size. Remove all the alpha channels you don't need in the channels palette. Make sure you convert to 8 bit. I'm sure the drum scans are 16 bit.
You can do a search in the Digital forum here or Google about web sharpening and re-sizing techniques. There are many. Many folks here use some sort of variation of the following technique. It's a two-step resizing technique:
1. Flatten image, discard uncessary layers, channels, make sure 8bit.
2. If your final size is 800px, the intermediate size for first step should be about 1.67X or ~1,300px.
3. Menu > Image > Image Size. Make sure "resample image" is checked. Set the longest dimension to 1,300 in the Pixel dimension box.
4. Go to Menu>Filter>Sharpen>Sharpen. Now this part is image dependent and you can certainly experiment with SmartSharpen, but this the basic premise. Perform Sharpen twice. This will grossly oversharpen the image, but hang on.
5. No resize to your final dimension: Image > Image Size. Resample is still checked.
This will get you started. Of course you can reduce the opacity if it appears oversharpened. Also, you could do the sharpening on a duplicated bg layer and you can mask out sharpening in the sky, etc. But that's a basic technique.
I now use some actions created by Tony Kuyper. If you're not yet familiar with Tony's Tutorials, masks and actions I highly recommend them. He has some sharpening actions that are included in his bundle of actions. They're great because they're actions and automated. You just have to enter your size values and change opacity to taste.
After resizing and sharpening, make sure you've converted to srgb, or you can check that in the save-for-web dialog.
I believe you can either specify the file size, OR you can just select the jpg quality and see what size you get. You "should" be able to get an average image below 300k. I've saved as low as 50% quality and for the web that can be acceptable. If you can save at 8 or 80%(depending on your dialogue) you're doing good.
It's a big topic and I've only brushed the surface. Hope this has helped a little.
Lon
edit: Since I wasn't working with final sizes of 800px, I went and did that on an image that has so much tiny detail that it would be a good challenge just to see if I could get a big file under 300kb. This was a 4x5 slide scanned at 2400ppi. My working PSD file is 865MB. Here is the image 800px and only 280kb. You can see some image degradation, but I think it looks pretty good considering all the factors getting this to the web. It can be done.