HTML Images

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) 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.

Example of Image Usage

CodeResult

Smile

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. I don't recommend specifying a different size for the image, as it will lose quality. It's better to make sure the image is the correct size to start with.
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.

CodeResult

Smile

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.

CodeResult

Boracay, Philippines

Removing the Border

Some browsers create a border around the image when it's clickable. If you don't want the border, specify border="0". You can also use the CSS border property to remove the border (i.e. border:0;).

CodeResult

Boracay, Philippines

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.

Enjoy this page?

  1. Link to this page (copy/paste into your own website or blog):
  2. Link to Quackit using one of these banner ads.

Thanks for supporting Quackit!

Sponsored Link: Design CODE-FREE Websites

Check a Domain:

ZappyHost Logo