Adding Images

Organizing Image Files

Typically Web masters store image files in their own folder underneath a site's main folder. For example, in your journal you may want to have an "images" folder to store the various images you will use in your entries and design. Some sites have so many images that the "images" folder needs to have more sub-folders, such as "design" for layout-based images and "content" for informational images.

For your template, you do not need to have an images folder. For your journal, part of the level 4 grade will be organizing your images in a folder.

Using the <img> Tag

1. Open you template.
2. Copy this line of code into the template: <img src="filename.ext" alt="description" />.
3. Save!
4. The source ("src") attribute specifies which image file should be displayed.
5. The alternate text ("alt") is a description of the contents or purpose of the image.
6. This assignment is due at when you turn in your template this Thursday.

The Importance of ALT Text

Alternate text or "alt" text is one of the attributes of the <img> tag. It is important for users who have visual impairments or who have text-only browsers. Alternate text is also important so that search engines understand what your image content really is.

Always provide a brief but precise description of your image in the altnernate text. It is so important that it will be a part of any level 3 grade that involves the <img> tag.

In some browsers, the alternate text is also a tooltip for when visitors hover over the image. To get this to happen in other browsers, also add a title attribute.

Crediting the Author/Artist

1. Let's face it: We borrow most of our images from other sources. In this class you should always make an effort to credit that source.
2. The alternate text is a great place to do this. You could also put a link tag around the image that links back to the original site where it was found. Or you could simply put a note somewhere near the image.
3. No matter how you do it, you should credit images to their original artists whenever possible.

Avoiding Hotlinking

Hotlinking is the act of using an external URL in the source ("src") attribute of the <img> tag. See the code below for an example of hotlinking.

Hotlinking is bad for several reasons. First of all, it is a bandwidth cheat. It was once popular back in the late 90s and early 2000s as a way to reduce bandwidth usage, but those image had to be downloaded from somewhere! The original site hosting the image would then have excessive bandwidth usage, and it was very expensive. Thus, hotlinking is like stealing bandwidth.

To combat this problem, many Web hosts have some kind of blocker against hotlinks. So if you try to use a hotlinked image, it won't even work.

Hotlinking is also bad for your Web site's visitors. A hotlink means that their Web browser has to go find another server to download the image from, so it increases download times.

Finally, hotlinking is bad because Web sites are notorious for disappearing. You wouldn't want to link to an image that won't be there later on!

To avoid hotlinking, always save images into your Web folder and use a relative path in the source ("src") attribute of you <img> tag. Basically, if your source starts with "http://" then you are doing it wrong!