HTML Images - Image Links, Backgrounds, Image Maps, Picture Element

1. Introduction to HTML Images

Images are an ideal source of enhancing the beauty of web pages. Infact images can rank your website high with proper usage. Therefore HTML provides us facility to insert images into the web pages. Also we can use HTML images in a number of ways to produce useful documents. See the list below:

• We use HTML images to make our pages beautiful
• HTML images may also be used as HTML links
• Images can also be used as image map
• We can also style our HTML elements with images as background
• Images can have different sizes which we can adjust with CSS styles
• We can also display figures to present self explaining images

1.1. HTML Image Syntax

An HTML image tag has following features and syntax:

• We use <img /> element to insert images
• The slash at the end of the tag is must in XHTML
• An <img> has no closing tag
• HTML Images use attributes to define the images
• src attribute is used to specify the url of the image
• alt attribute defines the alternative text

<img src="coast.jpg" alt="Coast - HTML Image Tutorial" />
<img src="ship.jpg" alt="Ship - HTML Image Tutorial" />
<img src="taj-mahal.jpg" alt="Taj-mahal - HTML Image Tutorial" />
<img src="plane.jpg" alt="Plane - HTML Image Tutorial" />

1.2. The Alt Attribute

An alt attribute is an alternative text and it has following properties:

• The alt text will display in case images are missing or browser fails to load the image due to poor connection
• The alt attribute is also helpful for blind people and search engines
• Also, the text of alt attribute should describe the image
• A browser will not validate an image correctly without alt text

<img src="coast.jpg" alt="This is a coast." />

1.3. HTML Images Size

We can adjust the size of HTML images by following way:

• We can use <style> attribute to define the size for images
• The width and height attributes can also be used to define the size for an image
• Also the width and height attributes do not take any size unit
• Importantly, the width and height attribute always defines size in pixels

<img src="coast.jpg" alt="This is a coast." width="200" height="150" />
OR
<img src="coast.jpg" alt="This is a coast." style="width:200px;height:150px;" />

2. HTML Image Links

Interestingly, HTML allows us to add links to HTML images. In this way, an image will appear as a clickable HTML element. Learn more about image links in HTML links tutorial. See the below example to understand the usage of the HTML image as a link.

Click the above image, it will open a new window.
For more understanding, go to codelab and do more practice.
Also, images can float right or left using css float property. To learn more about css float, visit CSS float tutorial to understand this beaviour.

3. HTML Image Map

Furthermore HTML images has an other feature to use them as HTML image map. Image map is an image with different clickable area that points to different pages or sections. All the areas are specified within the image map.

3.1. HTML Image Map Features

Usually, an image map has following features:

• HTML image map uses <map> element to define image map
• The name attribute in map element has connection with usemap attribute in image element
• Whereas the map element contains certain <area> elements that define clickable areas
• Also, the area element uses coords attribute to define the coordinates
• It also uses href attribute to define link of the hotspot
• And shape attribute to select the shape of the area
• These regions or areas are also named as hotspots

See the below example to understand the image map and practice in codelab to understand more: Try clicking on any of below section to navigate to appropriate url. Its basically a navigation menu created by using image map. Further try it in codelab.

<img style="width: 100%; height: 100%; brder: none;" src="images/image-map.png" alt="Imagemap" usemap="#Map" /> 
<map name="Map"> 
	<area coords="0,0,200,500" shape="rect" href="https://www.tutsinsider.com/" /> 
	<area coords="201,0,400,500" shape="rect" href="https://www.tutsinsider.com/codelab" /> 
	<area coords="401,0,600,500" shape="rect" href="https://www.tutsinsider.com/about" /> 
	<area coords="601,0,800,500" shape="rect" href="https://www.tutsinsider.com/contact" /> 
</map>

3.2. Image Map Explanation

Folowing image explains the coordination representation as shown in the above example. Also the above image is an example of image map using rectangles only. An image map can have other shapes also:

• We use shape attribute to select any of the following shape
• Rectangle
• Circle
• elipse
• Triangle
• Polygon

4. HTML Images Background

Luckily we can use images as the background of HTML elements. Also, we use HTML images as background to enhance the page beauty and sometimes to display a banner. Actually, there are several uses of images as a background.  See detail in CSS backgrounds tutorial. The following example depicts it clearly:

<body style="background-image: url('images/taj-mahal.jpg');" alt="HTML Images Background" />
	<h2>This page has a background image. Try yourself</h2>
</body>

5. HTML Picture Element

Whenever we want more flexibility and want to make our web pages responsive, we use HTML picture element.

5.1. Characteristics of Picture Element

A picture element in HTML can have following characteristics:

• Picture element is introduced in HTML5
• A picture element has multiple <source> elements that specifically point to certain image source
• The source element has media attribute to define the screen size of the browser
• It also specify the location of image using srcset attribute
• In this way the browser will choose best image that fits the current screen size
• All the remaining images will be ignored
• The last child element of the picture element should be img element
• Image element is added for the browsers that do not support picture element or no source fits the screen size properly

Consider the following example in which we created three different childs for picture element. See the results in codelab and clear your concepts:

<picture>
  <source media="(max-width: 640px)" srcset="red_flower.jpg">
  <source media="(max-width: 420px)" srcset="pink_flower.jpg">
  <img src="waterfall.jpg" alt="Flowers" style="width:auto;">
</picture>

6. HTML Figure Element

Whenever we need to share some self-explaining image, we use <figure> element. We can use this element to display illustrations, diagrams, images, flowcharts, etc. Furthermore the content of figure element is independent of the surrounding content and if removed there will be no effect. It also uses <figcaption> to display the caption for the image. see the below example:

<figure>
  <img src="lang_tutorials.png" alt="Tuts Insider Languages Tutorials" />
  <figcaption>This image is about programming languages.</figcaption>
</figure>