| 1. Open Image Editing Program |
|
This example uses Adobe Photoshop for preparing your images for the web.
Open Photoshop like you open any other program on your computer. You
should see something like the following.
 |
| 2. Open Image File |
| In Photoshop, click File > Open and browse to the file you'd like to
open. In this example, I'm opening a JPG image file of students
graduating and holding up their diplomas.
 |
| 3. Set Units to Pixels |
| Click Edit > Preferences > Units & Rulers and make sure the units
for the rulers is set to "pixels" as shown below.
|
| 4. Open the Info Window |
| Click Window > Info (or click F8) to open the "Info" window. Make
sure it is checked as shown below.
 |
| 5. View Image Size / Dimensions |
| Click on the image with your mouse and hit Ctrl+A or Select > All in
the main menu to select the whole image. You will then see the W (width)
and H (height) of the image in the Info box as shown below circled in
red. In this example,. this image is 3000 wide by 2000 pixels high which
is too large for displaying on the web. We'll need to shrink this image
down to size to at most 775 pixels wide to prevent users from scrolling
horizontally.
 |
| 6. Resize Image |
| Click Image > Image Size to open the "Image Size" window.
Then, change the image dimensions to 775 wide. Make sure "Scale Styles"
and "Constrain Porportions" are checked so that the height dimension
will be change proportionally. If the width of your image is less than
or equal to 775, you don't need to shrink it unless actually want to
make it smaller so as to create a thumbnail image or icon.
 |
| 7. Open "Save for Web" Window |
| Click File > Save for Web to open the "Save for Web" window.
 |
| 8. Save Image for Web |
| Click File > Save for Web to open the "Save for Web" window.
JPEG Images
If your image is a JPG file or if your image is a photograph with
millions of colors and shades like in the example here, select JPEG in
the drop-down and choose a quality for the image compression /
optimization. If you click the "2-Up" tab, you'll see the "before /
original" image before compression / optimization on the left and the
"after / compressed" image on the right, as shown below. You could then
slide the "Quality" slider to see how the quality of the image changes.
Choose an image quality that is as low as possible that still looks
good. If you can't make up your mind, just pick 50.
GIF Images
If your image has less than 256 colors like in Chabot's logo below,
choose GIF in the drop down and select the number of colors to save the
image in. Typically clip and vector type images have fewer than 256
colors and are best optimized in the GIF format.
 |
