Resize/Sharpen for Web

[David Chauvin]

Sharpening/Resizing for the Web

This is a method that I ran across on the web for resizing/sharpening images for the web. I'm sure there are better ways to reach the same result, but I find that this is quick, easy and fairly consistent. The basics are presented here and there are a multitude of tweaks to make it more effective.

- Take full res, unsharpened image and reduce size to approximately one half the length of the longest edge in pixels. This size will vary on an image by image basis so some trial and error may be needed to find the sweet spot. Apply the SHARPEN filter twice or even three times at this size. I use the generic FILTER>SHARPEN with the default bicubic option.

- This will create a very oversharpened, noisy, mid-size image.

- Futher reduce image size to your web preference, such as 800 pixels on the longest edge.

- When reduced, Photoshop applies an ultra-fine USM.

- A very light final sharpening may be done if needed.

Your mileage may vary.

 

[Alfred Forns]

Have seen that method before but rather use the conventional way David !!! Boils down to what works for you !!! Thanks for posting much appreciated !!

 

[Fabs Forns]

Thanks so much for sharing this, David. In a few days, I'll move to the Edu Resources Forum.

 

[Jeffrey Sipress]

Sounds pretty basic to me. General opinion among experienced editors and PS people who create for the web is to use a stepped reduction routine, reducing about 5% per step and sharpen at the end. For this I use Fred Miranda's (fredmiranda.com) WP Pro (WebPresenter Pro) plugin that has a nice user interface and allows sharpening along the way if you want it. It's a steal, too. Then I sharpen with Fred's IntelliSharpen II plugin. Every image I post here and on my site is done that way. I include these routines in an action I created that also sets color space, resolution, 8-bit mode, and framing if I choose. The whole event takes less than 10 seconds.

 

[Robert Amoruso]

Interesting process. Thanks for posting.

 

[David Chauvin]

Jeff,,,,,,In a tutorial done by Jeff Schewe (of PixelGenious/PK Sharpen), he states that the incremental decrease method once had a distinct advantage but that the downsizing routine in PSCS3 is now just as good. I used to use the Fred Miranda tools, but have gone with the tools in ACR and PSCS3. I don't know enough about the technical side of this to argue one way or the other, but I trust Schewe's judgement and testing.

I like to recommend the method above for folks struggling with sizing and sharpening for the web because it is very straight forward, gives good results and can be built upon as the user gets more comfortable with the tools. It seems that sizing and sharpening are one of the biggest obstacles for folks just getting into digital.

 

[Jeffrey Sipress]

Thanks, David. Are you referring to the basic image size window in CS3, or an actual reduction routine somewhere in the program that I don't yet know about? Perhaps PS is now using a stepped approach in the resize window?

 

[David Chauvin]

Jeffrey,,,,,,He states that the basic image sizing tool has been improved to the point that there is no advantage to the stepped downsizing technique.

 

[Zenon Char]

This is a bit of an old thread but I wound up stumbling upon it. I hope me posting here is this is OK. I really struggled with this a few years ago until I realized it was not just a sharpening issue but a mass downsampling issue. David's method is one that is used by Marc Adamus.

http://pacificnw.naturephotographers.net/tips/photoshop.htm

Then I found this great little free action. It tends to over sharpen but you can back up the steps in the history in PS.

http://news.deviantart.com/article/20250/

I found the last two methods at probably the best forum I ever read at Digital Photography Review. During that thread there was a challenge to see who could come up with the best method. This is the one I use but I must admit that lately just downsizing to 800 on the long side by the using the basic image size/bicubic sharper has yielded rivaling results. Not sure it if is improved algorithms in CS4 , my Canon 50D or both.

My method. I call Liminosity Resize

1. Flatten Image

2. Pre Sharpen with USM. Not too much 100, 0.3, 0. Note if the image is over
sharpened at step 8, start over and exclude this step. I find every image is
different.

Here is the original authors write up on step one. I never did find out who’s proprietary sharpening it was so I use USM or, FM Intellisharpen. You can use whatever you normally use for this step.

Sharpen at 100% size with our propietary sharpening (I targeted mid-frequencies to "boost" this range, so it the most important detail survives the most after massive downsampling). MINIMAL boost of edge-contrast (dark/bright edges) at this stage, so, after downsampling, we can still go for powerful mid or high frequency sharpening, without further aggravating under/over shooting of edges.

3. Downsize to final desired image size in one step

4. Duplicate Layer and set to "Luminosity"


5. Exclude (0-32 ) and (216-255) tonal ranges. Double click on the image in the
duplicate Layers Pallet and this comes up.

http://i33.photobucket.com/albums/d74/Zenon1/1-1.jpg

MAC Press option and drag the “this layer sliders”. PC you’re on your own. They
have to split.

http://i33.photobucket.com/albums/d74/Zenon1/2-1.jpg

This prevents over sharpening of highlights and shadows.

6. Final sharpening. 3 x USM (50,0.3,0), sequentially, one after the other. 


7. Optional (I added this) . USM 10,20.0 I use this to bump up the contrast a bit.

8. Flatten image.

9. If the image looks over sharpened in the history go back a few steps in the
final sharpening and when you are happy re-apply step 7 if you wish.


This was the entire authors original post.

...The recipe is:
1. Sharpen at 100% size with our propietary sharpening (I targeted mid-frequencies to "boost" this range, so it the most important detail survives the most after massive downsampling). MINIMAL boost of edge-contrast (dark/bright edges) at this stage, so, after downsampling, we can still go for powerful mid or high frequency sharpening, without further aggravating under/over shooting of edges.
2. Downsize in a SINGLE stroke (standard bi-cubic) to 600x900 

3. Final sharpening is done via this automated routine: 
 a. Duplicate Layer and set to "Luminosity" 
 b. Exclude (0-32 ) and (216-255) tonal ranges. 
 c. 3xUSM (50,0.3,0), sequentially, one after the other. 
 d. Flatten image. 
 e. Convert, then, to sRGB 
 f. Save in Photoshop, .JPG, optimized, Level 11.

Technology changes so I am just looking for new improved software that is good at handling mass down sampling.