HTML Images: How to add Images to a Web Page

Images make up a large part of the web — most websites contain images. HTML makes it very easy for you to embed images into your web page.

To embed an image into a web page, the image first needs to exist in either .jpg, .gif, or .png format. You can create images in an image editor (such as Adobe Photoshop, GIMP, Adobe Illustrator, etc) and save them in the correct format.

Once you've created an image, you need to embed it into your web page. To embed the image into your web page, use the <img> tag, specifying the actual location of the image.

This means that for a live website, any images need to be uploaded to the web, just like the HTML files. Most websites have a separate directory for image files, called images or similar.

Example of Image Usage

<img src="/pix/samples/18m.jpg" width="166" height="101" alt="Photo of three cats">

Try it with the Online Editor

This example uses a forward-slash at the start of the image location. This specifies that the path to the image starts from the current domain.

So if it's on the quackit.com domain, the image location will resolve to quackit.com/pix/smile.gif.

The <img> element above contains a number of attributes. These attributes tell the browser all about the image and how to display it. Here's an explanation of these attributes:

srcRequired attribute. This is the path to the image. It can be either an absolute path, or a relative path (remember these terms from our last lesson?)
widthOptional attribute. This specifies the width to display the image. If the actual image is wider, it will shrink to the dimensions you specify here. Likewise, if the actual image is smaller it will expand to your dimensions.
heightOptional attribute. This specifies the height to display the image. This attribute works similar to the width.
altAlternate text. This specifies text to be used in case the browser/user agent can't render the image.

Dimensions Using CSS

Instead of using the width and height dimensions as above, you could choose to set the size using CSS. This can give you extra flexibility.

For example, it can sometimes be useful to specify a max-width or max-height instead of an absolute size. This can prevent large images from ruining your layout (eg, if it's too big to fit inside the content area). This can happen especially if someone tries to view your website on a device with a small screen (such as a mobile phone).

In the following example, we use max-width:100% to ensure that the image is never too big for its context. When you only use max-width (without using max-height), the browser will rescale the image proportionally. In other words, the height will be rescaled along with the width, and the image won't become squashed. When you do this, make sure you remove the HTML width and height attributes, otherwise they will conflict with the CSS.

Click the button to compare this example and the above one in the editor. If you have a large enough screen, the image should be displayed at different dimensions.

<img src="/pix/samples/18m.jpg" style="max-width:100%" alt="Photo of three cats">

Try it with the Online Editor

Image Links

You can make your images "clickable" so that when a user clicks the image, it opens another URL. You do this by simply wrapping the image with hyperlink code.

<a href="http://www.travel-explorer.com/boracay-philippines/">
<img src="/pix/samples/14s.jpg" style="max-width:100%;" alt="Boracay, Philippines">
</a>

Try it with the Online Editor

Creating Images

The above examples assumed that you already had an image to embed into your web page. To learn about creating images for the web, check out the Web Graphics Tutorial.