Working With Images

Often, the difference between a “blah” looking webpage and a good looking one comes down to the images used. Images are used not only to accent your text, but also for the actual design and layout of your web page. We will get into how to actually design a web page a little later in this course, but for now it is necessary to know how to insert images into your HTML.

In the Introduction to Website Files, I talked about what a JPEG, GIF and PNG image file is. These are image files, and these files are SEPARATE from your HTML file. You use an HTML tag to reference the external image into your HTML document.

[hidepost=1]

The IMG tag

Images are referenced in HTML using the IMG tag. The IMG tag has several attributes that go along with it:

  • Src. This is the SOURCE of the image you are including. The source is simply the location of the image.
  • Width. The width, in pixels, of the image you are including.
  • Height. The height, in pixels, of the image.
  • Border. Thickness of any border which will surround the image.
  • ALT. This will be a textual phrase which will appear if your visitor hovers their mouse over the image in the web browser. Also, if for any reason the image is unable to load, the person would still see your ALT text.
  • Align. Controls the alignment of the image in your document.
  • Vspace. Controls the vertical spacing between your image and any text around the image.
  • Hspace. Controls the horizontal spacing between your image and any text around the image.

Sample Usage

OK, let us take an image of a flower. This image is a file called flower.jpg. It is a JPEG image. Let’s insert this image onto the HTML document using the following code:

<img src=”flower.jpg”>

Now, this is the most basic way of including the image. It will work, however you are giving no additional information. Also, note that the above HTML would only work if your image is in the same directory as your HTML document. If, for instance, you had a folder on your server called images just to hold all of your site’s images, you would need to reference the image from that folder using the following code:

<img src=”images/flower.jpg”>

Now, let’s expand use of this IMG tag to include an ALT, width and height attribute:

image

Note that the image would appear in the browser without using these attributes, but it is always proper to use them. In this case, it tells the browser to reserve 150×150 pixels of space for this image. This is the size of the image.

Expanding upon this, I will now throw in a border around the image as well as align it to the right. I will place text around the image so that you can see how it aligns around the image.

image

Now, you can see how the words almost hit the image itself. It looks better if the words are spaced around the image in order to give it a visual buffer. In this next example, I have given the image both horizontal and vertical spacing of 5. You can see that it “puffs” the border out 5 pixels from the image.

image

Now, if I had border set to zero here and left the spacing in place, you would accomplish giving the image an invisible space around the image.

Image Size

When you specify a width and height in your HTML for an image, you’re telling the browser what size to display the image. This does NOT affect the actual size of the original image file. For example, here’s what it would look like if I took this same 150×150 image of the flower and, using HTML, told the browser to display it as 125×200.

image

You can see that it warps the image.

Many beginners to web design make use of the width and height attributes to make large images appear smaller in their web pages. For example, suppose this image of the flower was actually 800×800. I could still make it appear as 150×150 by simply re-sizing it in my HTML code. However, the browser is actually still loading up a 800×800 pixel image. The effect is that the image could take longer to download even though it appears small on the page. If you ever see a seemingly small image seem to take forever to show up (perhaps it shows slowly starting at the top and working down), it is undoubtedly because a much larger image is being included on the page and they are making it look small using HTML. A MUCH better alternative is to use an image editing program to re-size the actual image file. This will lead to much lower download times for the image.

To find the actual width and height of an image, you have two ways:

  • You can load the image into a image editing program and have it tell you the height and width of the image.
  • You can right-click on the image in your web browser and select “Properties”. The window will tell you the width and height of the image.

Image Location

As mentioned above, the image source (src) is the location of the image. That image can be in another directory or even on another website. For example, you could reference this same flower image from another site. Let’s say this image came from a hypothetical site called www.flowers.com. You could reference the image as follows:

<img src=”http://www.flowers.com/flower.jpg” width=”150″ height=”150″>

It is not good manners to reference images off of other people’s websites, so I wouldn’t recommend doing it. If you are going to use an image you found from another site, I would recommend first saving it to your own computer, then uploading it to your own web server.

[/hidepost]

Free eBook!

Like what you read?

If so, please join over 28,000 people who receive our exclusive weekly newsletter and computer tips, and get FREE COPIES of 5 eBooks we created, as our gift to you for subscribing. Just enter your name and email below:

Post A Comment Using Facebook

What’s Your Preference?

Daily Alerts

Each day we send out a quick email to thousands of PCMECH readers to notify them of new posts. This email is just a short, plain email with titles and links to our latest posts. You can unsubscribe from this service at any time.

You can subscribe to it by leaving your email address in the following field and confirming your subscription when you get an email asking you to do so.

Enter your email address for
Daily Updates:

Weekly Newsletter

Running for over 6 years, the PCMECH weekly newsletter helps you keep tabs on the world of tech. Each issue includes news bits, an article, an exclusive rant as well as a download of the week. This newsletter is subscribed to by over 28,000 readers (many who also subscribe to the other option) - come join the community!

To subscribe to this weekly newsletter simply add your email address to the following field and then follow the confirmation prompts. You will be able to unsubscribe at any time.

Enter your email address for
Free Weekly Newsletter: