1. HTML4 Tutorial
2. The Web
3. HTML and URLs
4. HTML Element Structure
5. HTML Document Structure
6. HTML - Create Your First HTML Document
7. HTML Text Formatting Elements
8. HTML Entities
9. HTML Lists
10. HTML Links
11. HTML and Images
12. HTML Tables
13. HTML Forms
14. HTML div and span Elements
15. HTML iframe
16. HTML Meta Tags
17. CSS Introduction
18. JavaScript Introduction
19. XHTML Introduction

• Image Formats
• The img element
• The alt Attribute
• The height and width Attributes
  • Keeping Image Aspect Ratio
• The border Attribute
• Images as Links
• The align Attribute

Jakob Jenkov Last update: 2014-07-10

It is possible to include images in HTML documents. This is done using the img HTML element. Her is a simple example:

<img src="myImage.png">

The src attribute contains the URL to the image to include. The image is included in the document at the point where the img element is located.

Here is an example image included in this HTML document:

You can style images using CSS too. Some aspects of an image can be styled both using HTML attributes on the img element and CSS properties. I prefer to use the CSS properties whenever possible. Some aspects can even only be styled via CSS (like margin).

Image Formats

The browsers currently support 4 different image formats:

• .jpeg
• .gif
• .png
• SVG

JPEG was originally best suited for photos. It is format containing lossy compression of the image, so the image becomes lower quality when JPEG compressed.

GIF images can only contain up 256 different colors. Therefore GIF is mostly used to create simpler images with less color nuances. GIF also compresses the image, but the compression is lossless, meaning when decompressed the image is displayed in full quality. GIF images can also be animated, meaning you can pack multiple images into the same GIF image, and have them displayed as an animation.

PNG (Portable Network Graphics) is an open standard intended to replace JPEG and GIF, which are not open standards.

SVG is short for Scalable Vector Graphics. It is a vector graphics format instead of a pixel image format. Vector graphics is defined using vectors, which are lines, curves etc. A vector image thus consists of shapes (lines, squares, triangles, circles etc). Being definitions of shapes, it is possible to scale these shapes, meaning it is possible to zoom in and out of a vector graphics image, without it looking bad.

Pixel images are define using a 2-dimensional grid of dots. Each dot (pixel) in the image has a color. The way you normally zoom into such an image is by simply displaying 1 dot (pixel) of the image as 2x2 (4) pixels on the screen or 4x4 (16) pixels etc. When you zoom into a pixel image, the image typically starts to look like blocks.

The method used to include SVG graphics in your HTML pages is a bit different than pixel images. This text only covers including pixel images. You can read more about SVG in my SVG Tutorial.

The img element

To include an image in your HTML document you need to use the img element as shown earlier:

<img src="myImage.png">

The src attribute of the img element contains the URL to the image. You can use either relative URL, or a full URL. A relative URL will be interpreted as being relative to the URL of the HTML document.

Here is an image included using an img element:

The alt Attribute

The img element has an attribute named alt. This attribute gives alternative information about the image used. This information can be displayed if the image cannot be displayed correctly, or read aloud by page readers used by blind people.

The value of the alt attribute is also used by Google and other search engines to find out what your page is about.

Here is an img example with an alt attribute:

<img src="myImage.png" alt="A diagram of XYZ">

The height and width Attributes

The height and width attributes are used to tell the browser how much space you want the image to take up in your HTML document. Here is an example:

<img src="myImage.png" width="200" height="300">

This example tells the browser to scale the image to a size of 200 pixels in the width, and 300 pixels in the height. A pixel is one dot on your screen.

Keeping Image Aspect Ratio

When you scale the image to a specific width and height, you risk destroying the original aspect ratio between the image's natural width and height.

You can also set either the width attribute or the height attribute. If you so do, the browsers typically scale the image to the given width or height, while at the same time preserving the aspect ratio between the width and height. Here are two examples:

<img src="myImage.png" width="200">

<img src="myImage.png" height="300">

Here is the image from earlier, with a width of 500 and a height of 200:

You can also set the width and height of an image using the width and height CSS properties.

The border Attribute

The border attribute sets the border thickness around the image when displayed in the browser. Here is an example:

<img src="myImage.png" border="1">

This example creates a 1 pixel wide border around the image. If you want to have no border, set the border attribute value to 0.

Here is an image example with a border of 2 pixels:

You can do a whole lot more border styling of images using the border CSS property.

Images as Links

You can use an image as a link by embedding the img element inside an a element. Here is an example:

<a href="newPage.html"><img src="anImage.png" border="0"></a>

Here is an example as it looks in the browser:

This image is now a link. You can move the mouse over it, and see how the pointer changes to the characteristic hand. You can click the image, but the link just takes you back to this page.

Notice how the border attribute is set to 0. Some browsers create a blue border around images when they are used as links. To remove that blue border, you can set the border attribute to 0.

The align Attribute

The img element has an align attribute that defines how the text following the image should wrap around the image. Here is an example:

<img src="myImage.png" align="right" width="200">

Here is what the above code looks like, when included in a real HTML page:

Here is a lot of text that is wrapping nicely next to the image shown here. Here is a lot of text that is wrapping nicely next to the image shown here. Here is a lot of text that is wrapping nicely next to the image shown here. Here is a lot of text that is wrapping nicely next to the image shown here. Here is a lot of text that is wrapping nicely next to the image shown here. Here is a lot of text that is wrapping nicely next to the image shown here.

As you can see, the images is aligned to the right of the text, which flows besides the image, instead of starting again under the image, which is the default if the align attribute is omitted.

Here is a list of the values you can use inside the align attribute:

left	Aligns the image to the left of the surrounding text.
right	Aligns the image to the right of the surrounding text.
middle
top
bottom

Of these, align left and right are probably the alignments you will use most. Anyways, once you start making fancy layouts, it is better to use CSS. Therefore I have left out the explanations of the rest of the attributes.

Next: HTML Tables

All Trails

Trail TOC

Page TOC

Previous

Next