Resizing Images

One of the most common things you will probably want to do with an image is change its size. One way to do this in Photoshop is with the Image->Image Size menu option. Some programs call this Scaling, as well.

There is an important thing you need to remember when changing an image's size, though, and that has to do with what palette mode you use. Take a look at these examples:

In the middle column, you see what happens when an image's size is changed in Indexed Color (paletted) mode. Photoshop only has a limited number of colors to deal with, so you either get jaggedness or lose information.

However, if the image is first converted to RGB (true color) mode, this gives Photoshop a lot more freedom. When resizing the image, it can use intermediate shades of gray to create a more pleasing look. This is called anti-aliasing.

Many of Photoshop's tools can also be configured to automatically blur edges when you use them. In fact, the text tool was used with anti-aliasing turned on to create both original images. Anti-aliasing produces a much more pleasing result, without jaggedness.

Another way to resize images is to have the Web browser do the work. This is done in HTML by use of the WIDTH= and HEIGHT= options of the IMG tag. Some HTML editors will automatically insert this information into the HTML code as new images are added. Essentially, this tells the Web browser to scale the image for you. However, there is one distinct disadvantage to doing it this way: file size. If the image needs to be scaled smaller, why bother sending more picture data to the browser than it needs? That just makes your page load more slowly. You should (almost) always create images which are exactly the size you want them to be displayed at. It should also be noted that some Web page design programs allow you to resize images; for the most part these programs do not change the actual image, they change the WIDTH= and HEIGHT=, so this should be avoided.

But that doesn't mean you should avoid using WIDTH= and HEIGHT= in your HTML files; to the contrary! Believe it or not they do serve an important function. By telling the browser how large the image is in advance, the text of your HTML page will draw on the screen before all of the images are loaded, and the browser will reserve the correct amount of space on the screen for the unloaded images. As they load, they are drawn-in a little at a time, without the position of any of the text changing. (This is true of Netscape 2.0 and newer, and of Internet Explorer.) You just need to make sure that the WIDTH= and HEIGHT= exactly match that of the image, otherwise it may appear distorted.

Before saving an image, it is a good idea to use Photoshop's crop tool to make the image area as small as possible. If you need more space around the image so that text does not come too close to it, you can use the HSPACE= and VSPACE= options of the IMG tag in your HTML code, as described in the Step by Step Instructions.

Top | Previous Page | Next Page