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:
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:
Now, let’s expand use of this IMG tag to include an ALT, width and height attribute:
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.
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.
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.
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:
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]
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:
