How to Resize and Contrain Multiple Images for Web in Photoshop

In this tutorial, we'll use Photoshop's Web Photo Gallery feature to resize and constrain images in just a few clicks. If you still frequently resize several images one by one before publishing it on your website or blog, I'm sure you'll find this tutorial useful.

Step 1. Go to File > Automate > Web Photo Gallery



Step 2. On the Styles dropdown menu, choose Flash - Gallery 1. You may skip this step unless you'll be resizing images higher than 450 pixels.

Step 3. Under Source Images, click the 'Browse' tab to locate the directory of the images you want to resize.



Step 4. Now click the 'Destination' tab and create a new directory. This is where your resized images and HTML files will go at the end of this tutorial. I usually make the new folder on my Desktop. Easier to find.

Step 5. On the Options dropdown menu, choose Large Images.

Step 6. Make sure Resize Images is checked and replace the default number on the field with the maximum pixel size you want for your images.

Step 7. On the Constrain row. Choose which dimensions of the image you want to constrain. Selecting Both will resize your images to a maximum width or height depending on the number you specified earlier. Selecting Width will only resize your images to a maximum width and the same process goes with Height. Eitherway, it will resize the width or height proportianally and will not distort the images.

Step 8. For JPEG Quality, choose an option from the dropdown menu, enter a value between 0 and 12, or drag the slider. The higher the value, the better the image quality and the larger the file. I suggest you leave it at 10.

Step 9. Click OK and Photoshop will resize your images automatically. The process will also place HTML and JPEG files in the destination folder and you'll see the automated Web Photo Gallery pop-up when it's done.

Step 10. You can close the Web Photo Gallery and Photoshop itself because you no longer need them at this point. Now to find your resized images, go to the destination folder you made in Step 4 and look for the 'images' folder.

Done. You may also set your preferred dimension for the Thumbnails in Step 5 if you need to resize smaller versions of your images at the same time. Another way to resize batch images quickly is through the image processing feature (File > Scripts > Image Processor). You'll figure it out when you get there.