This article was written in response to a request for information on the <img> tag. Naturally I'm assuming that you're using HTML-Kit as your HTML editor.
Let's take a look at the <img> tag and displaying images on our web pages.
Getting Started
First we need a place to work. You can use any folder (directory) you wish or create one. We'll refer to our working folder as "MyWebFiles."
Now we need an image. You can use one of yours or you can use one of mine shown here.
- right-click on this link to the image (flower01.jpg)
- select "save target as" (the exact wording may be slightly different on your system but should be similar).
- save the image to the MyWebFiles folder.
It's worth mentioning here that it is highly recommended that you keep your folder tree on your pc the same as on your web server. This makes it much easier to ensure things will work correctly in both places.
Let's Display an Image
Launch HTML-Kit. Let's create a new HTML document. From the menu select File | New Document. Save this HTML file in your working directory (i.e. MyWebFiles). Name it whatever you like. Can't think of a name? Then just call it "hkimg.html"
Between the <body> and </body> tags type in:
<img src="flower01.jpg" alt="Yellow Flower" width="125" height="125" >
We'll explain what all this means in a little while.
Now click the Preview tab in HTML-Kit. You should see something like this;
Congratulations! You now can display images on your web pages. But wait, there's more...
The Attributes
Inside your <img> tag we used the two required attributes; src and alt.
src tells the browser where the image is located. In our exercise the image and the web page are in the same folder so all we had to do was to type in the name of the image file and its extension, in this case .jpg. We'll talk more about the src attribute in a minute.
The alt attribute stands for "alternative" and is the text that is displayed if the image isn't displayed for some reason, such as the src path is wrong or the user has their browsers image display turned off.
Width and Height
Two other important attributes are width and height.
The main use of these attributes is to reserve space on the web page for the image(s) as the page is rendered, or loaded. Another use is to scale the image (adjust its visual size). Here's an example img tag using the width and height attributes:
<img src="flower01.jpg" alt="Yellow Flower" width="150" height="100">
Setting these values prevents the image(s) and other elements of the page (e.g. other images) from moving around all over the place while the page is being loaded. The browser "sees" these values and holds that much space on the screen while the page loads.
Having stuff move around can be frustrating for a user. Imagine a user who may be trying to click a thumbnail image link and having to chase it around the page as the page is loading up.
The above width and height settings tell the browser to display this image 150 pixels wide by 100 pixels tall, which in this case is the actual size of the image. However, you can change these values to something else to display the image at a different size. This is called scaling.
Keep in mind that scaling images too much can cause image distortion. Meaning the quality of the image will be degraded. So pay attention to your results.
It's important to understand that changing these values does not change the actual size of the image itself. It only sets the size (or dimensions) used in displaying the image.
Let's explore this issue for a moment. Using a made up example let's say you have an image whose true actual size is 800px X 600px and whose file size is 1meg. You set the width and height attributes to 400px X 300px. Now, how large is the actual image now? 500K you say? No, it's true size is still 800px X 600px and 1meg. We did not change the actual file size, we only changed how it will show on the page.
So why is this so important? Well think about it. Your wasting the users time and and your bandwidth. Why force a rather large file to download to only display it at a fraction of its true size? This could help eat up the bandwidth your web host has allotted you and it forces the end user to wait unnecessarily for the page to load.
Oh, I know what you're thinking. It's only one image, so big deal. But wait! What if you scale the image to display thumbnail images as links. Now imagine if there were 10 of these on a page. The user would have to download 10 megs of pictures just to see a few small images! And what if the user has a dial up connection? Ouch!
I suggest that you resize the image(s) to the size you want to display and create a second image for the thumbnail if necessary. I think it's ok to do some scaling but keep it reasonable, ok?
So remember; Resize your images if necessary, create separate thumbnail images for links, and give them all a width and height!
SRC - going a little deeper
What if your images are kept in a different folder than your web pages? In this case we still have to tell the browser where the file is by providing it with the path to the image file. We have two different methods we can use to accomplish this, we can use a relative path or the absolute path.
Let's pretend you keep all of your web site related files under the folder MyWebFiles. And under MyWebFiles you have these two folders: MyWebPages that holds your HTML files and MyImages that holds all of your image files.
Relative Path
"Relative path" means the file path to where the image is located "relative" to the HTML page. In other words you determine the path to the image with the HTML page as the starting point. Using our example folder structure mentioned above we would modify our src attribute so that our <img> tag looked like this:
<img src="../MyImages/flower.jpg" alt="Yellow Flower" width="125" height="125">
The "../" tells the browser to go up one folder from where the HTML page is located. Then it goes down the folder structure into the "MyImages" folder where our image file is located. If you need to go up two folders then use "../../" and so on.
Let's say you had to go up two folders up from where your web pages are and had to go down several folders deep to get to your image. In this case your relative path would look something like this:
"../../MyImages/Folder/Folder/flower.jpg"
Pro: Easy to type in the path. It works on your local pc and on your web site (assuming you have the same folder structure in both places).
Con: It won't work if you relocate your image or HTML files into different folders or change your folder structure. The browser won't be able to find the image file. It will no longer be located in the same relative position.
Absolute Path
Absolute paths are a different than Relative paths in that it doesn't matter where the image files are located relative to your web pages. This is because you tell the browser exactly where the file is on the web.
Let's say your web site is named "www.mysite.com" and you have two folders set up as we talked about earlier; MyWebPages and MyImages.
To use the absolute path in your HTML page you would change your src attribute in your <img> tag to look like this:
<img src="http://www.mysite.com/MyImages/flower.jpg" alt="Yellow Flower" width="125" height="125">
Pro: It doesn't matter where you move your HTML file, it will find your image file. Unless you move the image file of course.
Con: If working with files on your computer you won't see the images unless you have a "live" internet connection (you're connected to the internet). This is because the browser won't be able to get to the image. Some people use a local file path (e.g. C:\folder1\folder2...) to get things to work on their local computer but forget to change this to the actual URL before uploading their page (e.g. http://www.mysite.com/folder1/folder2/...).
Images as links
When using images as links if you simply plop an image in as a link it will have a border around it by default.
This is done on purpose to give the user a visual indication that it's a link. But sometimes this isn't desirable. To prevent the border from displaying use some Style. Styling is getting outside the scope of this article but since I brought it up I'll show you one of the most basic ways to do this.
Place the following style declarations between the <head> and </head> tags of your web page (located near the top of your page) to remove the border.
img {border: none;}
There is an old attribute called border that has been deprecated. This basically means it shouldn't be used anymore, so we'll just leave that one alone. You can read more about "deprecated" on the W3C web site.
Inline
The <img> tag is an inline element. The differences between
block
and inline elements is a different discussion, but to sum it up, inline elements are treated like text as far as how and where they are displayed in your document. The anchor tag
(<a href= "http://www.mysite.com">My Link</a>) is
an example of an inline element. It is kept inline with text.
So this means that you put your images where you want them to show up within in your documents text. Let's play around a little so we can see it in action.
We'll use flower01.jpg again.
Create a new HTML document and save it in the same folder you've been working in.
You can name this file whatever you'd like.
We'll be working between the <body> and </body> tags again.
Type this in your new HTML document (remember to keep this between the
<body> tags):
<p>This is my image <img src="flower01.jpg" alt="Flower"></p>
Now click the Preview tab. Your page should look something like this:
Now let's go back and change things a little. Click on the Editor tab and try these different combinations to see where the image shows up:
<p>This is <img src="flower01.jpg" alt="Flower"> my image</p>
<p><img src="flower01.jpg" alt="Flower"> This is my image</p>
Now, add in a lot more text and move the image around inside the text so you can see how the image displays.
There are many ways to control how and where images are displayed on your web page. One of the most common is using Style. We're not going to get into all of that here but I do want you to know you have options available to you.
Closing comments
We've only covered the basics here regarding the <img> tag. Once you feel you've got a handle on these basics I would encourage you to spend some time learning the rest of what's available. I've provided some links below for you to explore. But don't forget that you can use your favorite internet search engine to find lots more.
Many thanks go out to the people in the HTML-Kit community for their assistance in offering suggestions for improvements to this article.
Your feedback is appreciated
I would appreciate your feedback on this tutorial. Was it too simple? Was it too complicated? Was it really good? Did it suck? Was it somewhere in between?
I'd especially appreciate it if you'd let me know if you find errors in what was presented here. Although I'm striving for simplicity I still want it to be accurate.
Have questions? Feel free to post them on the HTML-Kit Support Forums.