When placing an image on a web page your image should be only as large as it needs to be to display correctly on the page. If your image is too large (800 x 600) and you resize it within the Dreamweaver application by dragging its corners, the file size is not reduced, just the visual size of the image. If you reduce the image size in Photoshop to display the correct size on the web page, you can save file space/size and allow the viewer to view the image much quicker. (For example: An image sized at 800 x 600 could be a 2MB file. If that file is reduced to the size needed on the page, e.g., 360 x 413, the file size can be brought down to 436k. This file is easier for someone to view on a web page through their network connection and saves space on the server.

You may also crop an image to remove extraneous content of the image that you may wish to eliminate. If you wish to crop content, it is always best to crop first and then resize the image.
1. Open Photoshop.
2. From the File menu, select Open and navigate to the photo you wish to resize. For the purpose of this tutorial, navigate to the images folder of this tutorial and select the image called 01_female_faculty_original.jpg or 03_male_faculty_original.jpg (Do NOT select 02_female_faculty_small.jpg or 04_male_faculty_small.jpg since these are the finished products already cropped and resized.)
3. If the image is large, Photoshop may open the image at a smaller percentage such as 25% or 33%. Make sure your image is at 100% size by clicking on the percentage number at the bottom left of the image and changing the value to 100% and then hit Enter to set it at this size.

Download