Resizing Images

How to resize your images

Okay, you have an image you want to use, but it's just not the right size to go where you want it to go. Maybe the image takes up the whole screen, or maybe you wanted a larger version of the image on the screen. Well, you can resize the image by adding width and height commands to your image tag. Let's take a look at an example. I have an image called "next.jpg". Well, suppose I want to make it smaller. All I need to do is know the original width and height of my image. The width and height are usually written in pixels. My image turns out to be 106 pixels wide and 65 pixels in height. The picture looks like this:

sample image

So, to change the size of the image, I'm going to add these two commands inside the image tag:

width="" and
height=""

I'm going to place the commands after the initial command, img src="next.jpg". The tag will now look like this:

Now, to make the image smaller, I'm going to place numbers inside those quotation marks. Well, let's say I wanted it to be 75 pixels wide and 40 pixels high. I would then place these numbers into the commands, like this:

Now, when I reload my page, the picture will be the new height and width I specified. Here's what it would look like:

Now, to make the image larger, we will just insert larger numbers for the width and height:

Now the image looks like this:

sample image resized

As you can see, the images became somewhat distorted when I resized them. One reason for this is that I didn't keep the aspect ratio the same. Since the image was originally 106x65, I would have to decide on a width, and then find a height that would keep the aspect ratio of 106/65. When you calculate 106/65, you get about 1.63. So, if you want to make the width 75, you need to find the height that will make the ratio as close as possible to 1.63 . You can guess at it for awhile, or if you like solving equations, here it is:

75/height = 1.63

Now take the answer and round up or down. In this case, it comes out to about 46.0123. So, I would use 46 as the height:

Now it looks like this:

If you don't want to deal with math all the time (like me), you can also resize it with a paint or image program (which will do the calculations for you) and upload the new version of the picture to your server. I usually use my image program to do this, just for the ease of use. Besides, if I'm making the image smaller, the paint program will make the file size smaller.

All right, now we will move on to the next section, Using an Image as a Link (and there won't be anything about aspect ratios or mathematical equations!).