There is always some confusion when it comes to how best to resize images for web display. I have made several custom Actions for my own use - that handle all of the steps that I prefer - - - without much effort or thinking on my part. The only time effort and thinking were involved was when I first created them or when I adapt one for a new use. But that is one time instead of the thousands of times that I have to save images for web use.
So I decided to create an Action Set that anyone is free to use. It gives a few options - even though many of not most will probably be happy with the All-in-One Resize action that allows you to select the final image size that you want (thus no need for 2 different actions for Vertical and Horizontal), has a Sharpen Fade Setting so that you can cut back on the sharpening if it is too strong, allows for a custom size and colour border line (stroke) if you like, and puts you right into the Save For Web dialogue so that you just have to select the folder to save to - and then the image closes automatically.
The other action that included, is the Photoshop resizing using Bicubic Sharper - - -and some may find this to be perfect for their needs. Much depends on how much sharpening has been done in-camera or in post-processing before you save for the web. This is only available in PS versions that support Bicubic Sharper.
All images below and my personal setting for saving JPEG images - is to use 60% setting. 80% would be a maximum and will make a slightly larger file to download. Anywhere between 60 and 80 will be adequate for all web display.
As can be seen from the first image, just allowing Photoshop to Resize without any consideration for sharpening - produces less than desirable results. Many complain about their web images being too soft and unsharp and wonder why. The solution is sharpening after resizing. Any of the following methods will improve the results of the standard Photoshop resizing.
Using Bicubic for resizing
Using Bicubic Sharper for resizing
All-in-One Resizing and Sharpening (similar to Heidi's but with Flatten, Canvas Border, and Export) - Fade set at 100%
This 3 step resizing has always been my favorite method - and that type of resizing is what I always use for my web work and forum posts. Compared to the All-in-One action that is popular - that uses a very low Radius and a very high Amount of Sharpening - - - I personally find the 3 step to provide nicer sharpening all over and to have slightly less haloing for the same amount of sharpening.
For my own Custom Resize Actions, I like to have a Horizontal and a Vertical resize method so that I can quickly click one or the other without having any Image Size dialogue boxes coming up. Also I have a folder on my desktop where all of my resized files get Saved to. That way I can add the full export functionality and closing of the image file after save - without having any dialogues open. I literally open the image and click Horizontal for landscape images or Vertical for portrait images - and the all the steps are run and the image saves and closes so that I can press the Play button for the next one that is open. It is very fast to go through 300 or 400 images without having to have any input except to decide the orientation and click the button.
The 4 variations of the "3 Step Resize and Sharpen" actions -all are preset at a common web viewing size of 650 pixels at the longest dimension. It is difficult to allow the Image Size dialogue box to be used for selecting the size, because the user would have to calculate up to the first measurement. Example would be that you would have to make the first measurements 3 times the size of your final web image - so if you final output is 650 pixels, the first resize step is 2600 pixels with the second step being 1300 pixels and then the third 650 pixels. Of course any of these actions can easily be customized by the user.
So here we go - - ->
3 Step Resize and Sharpen
3 Step Resize and Sharpen with logo
I use a file for my Logo that is large enough to cover the greatest width I will use for the web. This one is 1000pixels wide by 25 pixels high. I save as a PNG 24 if I want transparency - a PNG 8 if transparency isn't required. With the action above, the Logo is aligned to the bottom right of the image. However a small square Logo will work just as well ad be placed in the bottom right side corner.
As a little BONUS - I have included 2 Sharpening Actions that I made and have used for years when more specialized sharpening is required. They are at the Bottom of the Action Set. These 2 actions do not resize the image. The first is an Edge Sharpener where you are presented with an overlay where the sliders can be moved to reveal just the parts of the image that you want affected by the sharpening (those areas are black and grays). Te second sharpening action works on a LAB layer. Fun to play with and see f they suite some of your needs.
--- > The Photoshop action can be downloaded here. Drag the file into your Actions Pallet or in the Actions Pallet Menu, select Load Action.
And of course - what goes perfectly with such talk about web images - - - is my great little File Upload Utility (FLU) that allows quick uploading of web resized images to your own server, for inclusion on forums and other places where you show such sized work.
Part of the functionality that makes it so suitable for Forum use - is that the returned URL that is displayed after you upload an image file - - - is already wrapped in [img] tags, so that you just have to copy the whole line and paste it in a forum.
The simplest part is that you just create a folder on your web server (where you have your website) and drop in the unzipped script - - - and it works and even auto recognizes the path to the folder where it resides. You can get the free FLU download here - Free Web Apps for Photographers