Resizing an Image

The quality of an image deteriorates when it has been resized due to the addition or removal of pixels. Even if Paint Shop Pro makes an effort to minimize this problem by interpolating the pixels ... However, we are not going to go into that.

Let's just suppose that your image has been loaded into the space set aside for it using the following command:

<IMG SRC="Image.jgp" WIDTH=300 HEIGHT=400>

The browser automatically resizes the image so that it fits into the frame, pulling it into shape in one direction or the other if the proportions are not the same. Hence the reason for preparing the image beforehand.

In the following example, the problem is the same as the previous one: an image measuring 345 x 464 pixels has to go into a space measuring 300 x 400 pixels. The two frames are not identical. The image has a ratio of 1:0.74 while that of the space is 1:0.75. The difference is so small that we could even ignore it. All we need to do is reduce the size of the image in Paint Shop Pro.

Which side do we start with? On the one where the ratio is lower, so as to optimize resizing. For the width, it is 345/300 = 1.15 ; in height it is 464/400 = 1.16. So we are going to use the width side. To reduce the image to the right size, proceed as follows:

1. Select Image > Resize.
   
   
2. In the dialog box that appears, enter 300 in the Width box. By default, Paint Shop Pro automatically calculates the height: 403 pixels (see Figure 3). Click on OK to validate.
   
   

Figure 3: Paint Shop Pro automatically recalculates the other side of the image during resizing.

The image is 3 pixels too high. You are presented with three possible solutions:

• don't touch anything. The browser will squeeze the image slightly to make it fit into the reserved space. The distortion will hardly be noticeable;
  
  
• crop the image. Three rows of pixels will be sacrificed at the top or the bottom of the image;
  
  
• don't specify the WIDTH and HEIGHT attributes in the <IMG>tag. In this case, the browser uses the image at its normal size. However, this solution is not recommended. As a general rule, note that it is always better to indicate an image's format in the HTML code;
  
  
• correct the HTML code by specifying the following values for the tag attributes:
  
  
WIDTH=300 HEIGHT=403

This is the neatest solution, and the one that best maintains the image in its entirety.

And there you go. You have just mastered the essential techniques for producing a site with legible images.