HTML Images

<!DOCTYPE html>
<html>
<head>
	<title>HTML Images</title>
</head>
<body>
	<img src="//www.html.am/images/samples/4s.jpg" alt="Photo of Rob Roy Glacier">
</body>
</html>

Above is an example of the code used to embed an image into a web page.

How HTML Images Work

In HTML, you add images to a web page by using the <img> tag along with the src attribute, which is used to specify the image location. Like this:


<img src="image.jpg" alt="Alternative text">

The <img> tag does not have an end tag. Only the start tag is allowed.

The image must be at the specified location, otherwise you will end up with a "broken image". This means that, if the image doesn't already exist on the web, you'll need to upload it before it will work on the web. You can upload the image to your own website or you can use another website (such as an image storage service). As long as it exists on the web, you can link to it (unless the external website has disabled "hot-linking"—preventing other websites from linking directly to their images).

Later we discuss how to upload web pages and images to the web.

The alt Attribute

The image must have the alt attribute specified. This attribute is used to provide a description of the image. This is important, as it is possible that not all users will be able to see the image.

Here are some examples of where the alt attribute can be beneficial:

Attributes

As well as the src and alt attributes, there are several other (optional) attributes specific to this element (not to mention the global attributes and event handler content attributes that are available for all HTML elements).

To see a full list of attributes that you can use with this tag, here's more information about the <img> element.

About the Image Location

The image location (provided with the src attribute) must be a valid URL. A URL (which stands for Uniform Resource Locator) is the location of a resource on the web. This could be a web page, image, or some other file.

When embedding an image, you can use either an absolute URL or a relative URL (same as when creating hyperlinks).

For an explanation on absolute vs relative URLs see the previous page, HTML links.

Image Size

You should try to avoid resizing the image in HTML. If possible, resize the image to the correct dimensions first (using an image editor), then use those dimensions in the HTML code.

So if you need to display the image at 200x150 for example, resize it to that size in an image editor so that it is exactly those dimensions. Don't take a 300x200 image and use HTML code to "squeeze" it down to a 200x150 image.

The reason I recommend this is because, when you use HTML to resize the image, the browser still has to download the full file—regardless of how big your HTML specifies it. If you use HTML to make the image display smaller, you're wasting the user's bandwidth by downloading a large file, only to display it at small dimensions. And if you use HTML to display the image at a larger dimension, it will pixelate and lose quality.

Better to do the resizing in an image editor first.

Linked Images

You can link images in just the same way that you can link text. Simply insert the image code between the start and end <a> tags.

See exercise 3 for an example of linking an image.

Background Images

Background images are images that appear in the background while other elements can appear in front.

HTML doesn't provide the ability for background images—it doesn't have a background-image tag or anything like that. Background images can be added using CSS (Cascading Style Sheets). Here's an example of using CSS to add a background image to a <h1> element via the global style attribute.

<h1 style="background: url('//www.html.am/images/backgrounds/background-image-2.gif');">
	Text in front with background image behind...
</h1>

Don't worry if you don't understand this code. We'll be covering style sheets soon, so this code will make more sense then.