HTML Image Tag: Beautify Your Site!

• Page Index
• The HTML Image Tag SRC Attribute
• Setting Image Size
• The HTML Image Tag alt and title Attributes
• Common Problems with the HTML Image Tag

The HTML image tag is, perhaps, one of the more important tags. I mean, what’s the Internet without images? Images help to make our site more interesting and more inviting.

One way to put images on a webpage is with the HTML image tag. This tag not only tells the Internet browser to insert an image into the webpage, but it also tells the browser where on the Internet to find the image file. The image tag is an empty tag: that is to say, it doesn’t have any content; it only has attributes.

Well, read on to learn more about this interesting little guy, the HTML image tag!

The HTML Image Tag SRC Attribute

The HTML image tag can have various attributes, but the most important one is the SRC attribute. The SRC attribute takes a URL, which lets the browser know where on the Internet to find the image file.

For an image that is within your site’s own directory, you should use a relative URL. For an image that is outside your site, you should use an absolute URL.

In the example below, the URL points to a file named loaf-of-bread.jpg in the root directory of my Web site.

Example of an HTML Image Tag
code	<img src="/loaf-of-bread.jpg" />
results

If the URL points to an image file that does not exist, then your browser will typically insert some type of generic error image that kind of lets everyone know that the Internet browser couldn’t find the referenced picture file at the location specified. Again, we’ll get more into this when we discuss how URLs work, but for now let’s take a look at how your Internet browser displays an image it can’t find.

Example of an HTML Image Tag with an SRC that Has a Bad URL.
code (misspelled bread as bred)	<img src="/loaf-of-bred.jpg" />
results

Setting Image Size

One can specify the width and height of an image by using attributes in the HTML image tag. There are two basic ways to do this: (1) using the width and height attributes or (2) using the style attribute. It is actually prefered to use the style attribute, but I will show you both ways.

Set Size by the Width and Height Attributes

Now, the HTML image tag can also take a width attribute and a height attribute. The width and height attributes simply take whole numbers as their values. It is assumed that the values represent pixels.

Specifying image width and height (with the older width and height attributes)
code	<img src="/loaf-of-bread.jpg" width="160" height="160" />
results

Set Size by Style Attribute

Nowadays, it is preferable to specify width and height using the HTML style attribute, which can be used to do all kinds of things. However, here I will show you how to specify the width and height of an image using it.

The style attribute’s width and height properties do not assume that the values are in pixels. Therefore, if you wish that the values be in pixel units, you must specify that by using the “px” unit type. Believe it or not, when using the style attribute—even on images, it is not necessary to use pixel units. You may use any of the unit types available to the style attribute. However, I will use pixel units in my example below.

Specifying image width and height (with the newer style attribute)
code	<img src="/loaf-of-bread.jpg" style="width: 160px; height: 160px" />
results

Why Set Image Size?

Specifying the width and height of an image is important for two reasons: (1) it allows the Internet browser to allocate space on the webpage before actually downloading the image file and (2) it allows the Internet browser to display the image in a different size than the original image.

Specifying the size of the image in order to allow the Internet browser to allocate the space of a webpage before actually downloading the image is especially great for people whose Internet connection might be on the slow side. It allows the browser to position the non-image elements correctly while waiting for the actual images to download. If the image sizes are not specified, then the browser will have to continuously adjust everything on the page as it downloads the images and figures out how big they are.

Specifying a size that is different from the size of the original image is generally fine if you want to display the image slightly smaller or slightly larger than the original image. However, it can also be a source of certain problems, which I discuss a little later in this article (in section called Common Problems with the HTML Image Tag) .

Below, I have some examples of setting the image to slightly different sizes.

Example of a stretched image
code (smaller)	<img src="/loaf-of-bread.jpg" style="width: 120px; height: 120px" />
results (smaller)
code (original)	<img src="/loaf-of-bread.jpg" style="width: 160px; height: 160px" />
results (original)
code (larger)	<img src="/loaf-of-bread.jpg" style="width: 200px; height: 200px" />
results (larger)

The HTML Image Tag’s alt and title Attributes

Besides the src attribute, the HTML image tag has two other very important attributes: the alt and title attributes.

The alt Attribute

In the HTML image tag, the alt attribute is used to add text to the image that can be used in cases when the image cannot be displayed.

There are two main cases to use the alt attribute: (1) to describe images to blind people who use special web browsers that read the page to them and (2) to provide text in cases where the image can’t be displayed, like if the image file was removed.

Below is an example of an HTML image tag that is using the alt attribute. I have purposely used a non-existent image filename so that you can see the alt text, but generally the alt text will not appear (as you can see in the second example in the table below).

There might instances where it doesn’t make sense to provide alt text. For example, if you’ve got an image that is essentially a rounded corner of your page, there’s no need to describe that to anyone.

Alt attribute in action
code	<img src="no-image.jpg" alt="Here is some alt text." style="width: 200px; height: 60px" />
results	Since the image file could not be found, the alt text is displayed (in most browsers). Some browsers are text-only and do not display images. Such browsers would display the alt text instead. Search engines rely on the alt text to know what the image is about. Special browsers for visually impaired people will read out the alt text.
code	<img src="/loaf-of-bread.jpg" alt="A loaf of bread." style="width: 160px; height: 160px" />
results	As you can see, the alt text does not normally appear.

The alt text is also important in helping search engines like Google or bing to understand what the image is about. However, do not stuff your alt text with 1000 keywords in an attempt to boost your page’s search result rankings. The search engines have long since caught on to this sort of spamming, so it’s likely to lower your rankings. And should a blind person visit your page, keyword-stuffed alt text will probably be horribly annoying and make little sense.

The title Attribute

The title attribute is available for several HTML tags, not just the image tag. The title attribute is generally interpreted as a pop-up tool tip when you hover the element. Below is an example. Just hover your mouse over the image of the loaf of bread and see the tool tip.

Title attribute in action
code	<img src="/loaf-of-bread.jpg" title="This is a loaf of bread." />
results	Hover your mouse over the image to see how the title attribute works.

Common Problems with the HTML Image Tag

There are a few common problems people run into with the HTML image tag. The problem isn’t with the tag itself so much as how people sometimes use it.

Thumbnail Images from Large Images

Frequently, people create thumbnail images by setting the SRC to point to some huge image but then set the size to display very small.

The reason this is bad is because the browser still must download the huge file, which might take a while. If you wish to display a thumbnail image, then you should create a separate thumbnail image file using image editing software like Adobe Photoshop Elements or GIMP.

Large Images from Small Images

Setting the width and height to be larger than the actual image’s width and height might be okay, but it might cause the image to look pixelated.

Whenever setting the size larger than the actual image itself, be sure to see if it looks okay.

Overly-stretched Images

It might be okay to set the width and height in slightly different ratios than the original (like maybe adjusting only the width by a few pixels while leaving the height the same), but setting the width and height such that they are in a radically different ratio than the original image will cause the image to look oddly stretched or compressed in one direction.

Be sure to look at the final product if using a different width/height ratio than the original image has.

Non-existent Images

Nothing looks uglier than a website with an obviously missing image file. Always double-check your site after making changes.

Remember that images located outside your site can be removed without your knowing it; so, reference such images only when absolutely necessary.

Well, that wraps up our lesson on the HTML image tag.