- HTML4 Tutorial
- The Web
- HTML and URLs
- HTML Element Structure
- HTML Document Structure
- HTML - Create Your First HTML Document
- HTML Text Formatting Elements
- HTML Entities
- HTML Lists
- HTML Links
- HTML and Images
- HTML Tables
- HTML Forms
- HTML div and span Elements
- HTML iframe
- HTML Meta Tags
- CSS Introduction
- XHTML Introduction
HTML and Images
It is possible to include images in HTML documents. This is done using the
img HTML element.
Her is a simple example:
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).
The browsers currently support 4 different image formats:
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
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
The alt Attribute
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
<img src="myImage.png" alt="A diagram of XYZ">
The height and width Attributes
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
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
height CSS properties.
The border Attribute
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
attribute value to
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
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
The align Attribute
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
attribute is omitted.
Here is a list of the values you can use inside the
||Aligns the image to the left of the surrounding text.|
||Aligns the image to the right of the surrounding text.|
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.