Resizing and optimizing images

This section will explain how to use Adobe Photoshop to resize and optimize images for a website. We will also look at free web-based services that instantly optimize images. At the moment, there is only one way to optimize groups of pictures at the same time (batch optimization) and that is with Macromedia’s Fireworks.

Adobe Photoshop

You can get a free trial of this graphics software at: www.adobe.com/products/photoshop/main.html. However, you won’t be able to save anything you work on in this trial version. You’ll have to use a full version if you want to be able to save during your steps below.

Photoshop is the most popular software application for professionals for changing images. It costs about $1000.00 CDN. The answer to, "What exactly can I do to an image in Photoshop?" is "Anything". We don’t have to learn all the features of Photoshop at this time. Let’s just learn how to change the size of an image, and to optimize it for a webpage.

To change the size of an image in Photoshop:

1. Start up Photoshop.
2. Click on File at the top left.
3. Select Open.
4. Browse to the picture you want to work on and highlight it. You will then be able to see the picture at the bottom of this browsing window, along with its file size.
5. Click Open.
6. Now that your picture is open, click on Image on the top of the screen.
7. Choose Image Size. A window will open where you can change the size.
8. In the Pixel Dimensions section, choose a smaller width. By default the height will automatically adjust to keep the proportions relative.
9. Click OK.
10. If this new size is what you want, go to File and Save As. Save your image under a different (and descriptive) name. If it isn't what you want, go back to step 6.

To optimize an image for the web in Photoshop:

1. Open the image in Photoshop.
2. Click on File.
3. Choose Save for Web.
4. A window will open where you can choose 2-up or 4-up on the top right; this will change how many copies of the image you can view at once. Below each image will be what type of image it is (jpeg or gif), the file size in K, and the time it will take to download on a modem.
5. On the right you can use the pull-down menu to change the type of image from jpeg to gif. You can also change the quality of the image by choosing low, medium, high or a number. As you change these settings, you can see the effect on the images on the left.
6. Find a happy medium between the quality of the image and a fast download time.
7. Highlight the image you want to save.
8. Click OK.
9. On your computer, browse to the location where you want to save your newly optimized image (choosing the Desktop is an easy way to be able to find it again).
10. Change the name of the image to something descriptive.
11. Click OK.

Jasc Paint Shop Pro

Paint Shop Pro is a cheap and capable alternative
To change the size of an image in Paint Shop Pro:

1. Start up Paint Shop Pro.
2. Click on File at the top left.
3. Select Open.
4. Browse to the picture you want to work on and highlight it.
5. Click on Open.
6. Click on Image at the top.
7. Choose Resize.
8. The Resize window will open. Adjust the size of the image in the Pixel Size box.
9. Select OK to see the changes.
10. If this new size is what you want, go to File and Save As your image under a different (and descriptive) name. If it isn't, go back to step 6.

To optimize an image for the web in Paint Shop Pro:

1. Open the image in Paint Shop Pro.
2. Click on File.
3. Go to Export and choose either JPEG or GIF optimizer.

   
   

     If you are using the JPEG Optimizer:

You will see two images. The one on the left is the original uncompressed image. The image on the right is how the image will look once it is compressed at the current settings. This second view allows you to see if the quality of the image is high enough.
There are three tabs in the lower part of the window: Quality, Format, and Download Times.


1. The Quality section allows you to set how much the image should be compressed. Experiment to see what works best.
2. The Format section allows you to select either Standard or Progressive. Progressive is preferable as it allows viewers to see the full image as it continues to download and improve in quality.
3. The Download Times section explains how long it will take to download your image at the current compression for various bandwidths.

• You have an option to use the Wizard at the bottom left of the window. This feature presents the above options one-by-one. It's easier to use the tabs described above instead.

 

    If you are using the Gif Optimizer:

You will see two images. The one on the left is the original uncompressed image. The image on the right is how the image will look once it is compressed at the current settings. This second view allows you to see if the quality of the image is high enough.

• In the Transparency section, you probably want to keep the default setting that allows the image to be transparent. This means that if the background of your web page is light blue, any clear part of your image such as the boarders will allow the blue to show through.
• In the Colors section, the default setting of Standard/Web-safe colours is a good idea.
• In the Format section, choose Interlaced instead of the default setting of non-Interlaced. This will allow people to see the full image as it continues to download and improve in quality.
• The Download Times section explains how long it will take to download your image at the current compression for various bandwidths.
  

  You have an option to use the Wizard at the bottom left of the window. This feature presents the above options one-by-one. It's easier to use the tabs described above instead.

4. Once you have optimized the image to your liking, click OK.
5. Browse to your Desktop and save your image with a descriptive name.

Microsoft Photo Editor

Windows Office includes a program called Microsoft Photo Editor. To get to it, right-click on an image, go to Open With, and select Microsoft Photo Editor.

To change the dimensions of the image:

1. Click on Image at the top.
2. Choose Resize.
3. A window will open where you can change the dimensions of the image.
4. Click OK.
5. Go to File.
6. Select Save As and give your image a descriptive name.

IrfanView image editor for resizing

For a free image editor that will let you resize and image quickly and easily, try IrfanView. To resize an image:

1. Open IrfanView.
2. Click on File.
3. Choose Open.
4. Browse to your picture and double-click it.
5. Click on Image.
6. Select Resize/Resample.
7. Set your new size.
8. Click OK.
9. Click on File.
10. Choose Save.
11. Give your image a descriptive name.
12. Save it on your Desktop.
    

Also see my section on Online Image Optimizers.

Further resources:

• Optimizing Your Images at Webmonkey. Explains how to optimize images using Macromedia's Fireworks and Adobe's ImageReady.
• Photoshop Crash Course at Webmonkey. Covers much of what you can do with Photoshop.
  

Thumbnails

Online image optimizers