Basic HTML Class: Working with Images on your Website

(with updates by editorial staff)

Just as I thought a primer was required explaining how to manipulate text, I also think one is needed on how to manipulate images. Believe it or not, manipulating images is much the same as manipulating text. So, here we go.

Placing the Image On The Page

First, let’s worry about placing the image somewhere on the page. If you place an image tag on a page randomly, the image will usually show up on the left side of the page. If you want to have an image placed in the center of the page, you use the CSS, ‘text-align: center;’ as described in Primer #3. But how do we get the image to show up on the right side of the page? Well, how did we get text to the right? By adding the ‘text-align: right;’ CSS code, right? Could it be that we do the same thing here? Why yes, it could.

Here’s the format:

<div style=”text-align: center;”><IMG SRC=”image.gif” ALT=”image”></div>

Here’s what you get using “sally.gif” in place of “image.gif”:

Aligning Text With Images

Images don’t always stand alone. You will often want text alongside them. Here you will floatthe image, and then allow the text to wrap around it. Clever stuff!

Here are the formats:

And here’s what it all looks like:

This is text wrapping around an image floated to the left. We will fill in lots of text here just to make the point…

This is text wrapping around an image floated to the right. It’s worth telling you now that you can’t float an image to the center. Odd really, but then, floating to the center usually involves a two column layout,

You may notice I’ve used an extra CSS property, ‘clear:left;’ on the second one.
<div style=”float: right; clear: left;”><IMG src=”/images/sally.gif”></div>
This is to ensure that the next float is clear of the one above it. You can use left, right or both as values.

Changing Image Size

To begin this discussion, let me state that images on a computer are not like photographs. Computer images are made up of a lot of little colored dots. They’re known as picture elements or “pixels” for short. So, just remember that during this part of the Primer, numbers refer to pixels rather than inches, or centimeters, or whatever. When I say pixels, I’m talking little colored dots.

Every image is made up of pixels. The more pixels per inch the image has the better, and more detailed, the image will appear. Of course, that also means the image will take up a whole lot more bytes on your hard drive. You’re going to find that most images on the Web are 72 and 100 pixels per inch. Yes, there are other settings, but 72-100 is a good trade-off between loss of detail and bytes required.

Okay, so every image is made of pixels. This means that you can also denote an image by number of pixels. For example, the “sally.gif” image is 97 pixels high by 64 pixels wide. How do I know that? I have an expensive graphics program that tells me so. How would you know? Easy! Right mouse click on any image that is displayed on a web page. Select Properties–look closely and you’ll see that the image’s width and height are displayed!

Before we go any further, keep in mind that by reducing the size of the images using pixel sizes, you are effectively downloading the same large sized image, which takes more time and bandwidth. A muchbetter practice is to reduce the size of the image using image editing software, and use the smaller image. If need be, you can link the smaller image to the larger image, which would allow visitors to see the large image if they so desired. Anyway, getting back to what we were discussing….

If you want to ignore my adviceand manipulate the image’s size using pixels, here’s what you do. Denote to the image command how many pixels high by how many pixels wide you want. The “sally.gif” image is 64X97 pixels. If I want the image to appear smaller, I will ask for the pixels to be smaller, say 30X55. If I want it bigger, I would set the pixels larger, say 100X250. Just remember form. If you make the image smaller or larger, you must keep the same general square, rectangle, or whatever, form.

Of course, if I want to, I can totally distort the picture.

Here’s the coding:

Notice the HEIGHT and WIDTH attributes nestled right where the ALIGN command went before. You will replace the “##” with a number of pixels for height and width. Here are the three examples:

This is normal size:

This is 30X55:

This is 100X250:

This is 100X23:

However, if the image is bigger than you need you are better off making it smaller in a graphics package, simply because it will be a smaller file size, so your page will load faster.

Making it bigger isn’t really a great idea either, because it will tend to go pixelly, if I can call it that!

Putting the actual dimensions of the image in is a good idea, because the page will load with the correct amount of space allocated to the images – otherwise the image will download and the page will move down and rearrange for every image that downloads.

The <HR> tag

The WIDTH command also works on the <HR> command, exceptyou’ll use percentages. Watch this:

<HR WIDTH=”40%”> gives you this:

<HR WIDTH=”64%”> gives you this:

You get the idea, yes?

That wraps it up. Try these in the comfort of your own home under the supervision of an adult. If you are an adult, then find a kid who can program a DVR to help you along. Images are what turns your impressive code into a beautiful, expressive, professional website–this is a skill you need to master.