HTML Images

Images can improve the design and the appearance of a web page.

HTML Images Syntax

The HTML <img> tag is used to embed an image in a web page.

Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding space for the referenced image.

The <img> tag is empty, it contains attributes only, and does not have a closing tag.

The HTML <img> tag is used to embed an image in a web page.

This tutorial will take you through simple steps to use images in your web pages.

Images are not technically inserted into a web page; images are linked to web pages.

The <img> is empty element, it contains attributes only, and does not have a closing tag.

Syntax

<img src="URL" alt="alternateText">

src: Specifies the source to the image. (URL can be absolute or relative)

alt: Specifies an alternate text for the image if image is unable to load for some reasons.

This example demonstrate src and alt attributes:

Example

<h1>src Example</h1>
<img src="flowers.jpg" alt="flowers">

<h1>alt Example</h1>
<img src="flowers.jpg" alt="flowers">

Try this code ❯

HTML Image Size - Width and Height

You can use the style or width and height attributes for <img> tag.

This example shows how to set width and height for <img> tag:

Example

<h1>Style Attribute Example</h1>
<img src="flowers.jpg" alt="flowers" style="width: 300px;height: 150px;">

<h1>Width and Height Attribute Example</h1>
<img src="flowers.jpg" alt="flowers" width="300px" height="150px">

Try this code ❯

Note: Always specify the width and height of an image. If width and height are not specified, the web page layout might be disturbed while the image loads.

Image Map

The <map> element is used to implement client-side image maps.

The element is used to define a map that associates locations on an image with a destination URL. Each hot spot or hyperlink mapping is defined by an enclosed area element. A map is bound to a particular image through the use of the usemap attribute in the element, which is set to the name of the map.

Example

<img src="desk.jpg" usemap="#image-map">

<map name="image-map">
  <area target="_blank" alt="Computer" title="Computer" href="computer.png" coords="112,31,285,246" shape="rect">
  <area target="_blank" alt="Cup" title="Cup" href="cup.png" coords="327,212,31" shape="circle">
  <area target="_blank" alt="Mobile" title="Mobile" href="mobile.png" coords="296,121,326,176" shape="rect">
  <area target="_blank" alt="Book" title="Book" href="book.png" coords="53,132,115,157,72,237,2,211" shape="poly">
</map>

Try this code ❯

Note: When the name attribute is used, it should be the same as the id attribute(it must be unique).

Learn in detail, <map>.

Image Background

A background image can be specified for almost any HTML element.

To add a background image on an HTML element, use the HTML style attribute and the CSS background-image property:

Example

<div style="background-image: url('flowers.jpg');">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

Try this code ❯

Background Image on a Page

You can insert entire page to have a background image, you must specify the background image on the <body> element:

This example shows how to insert background image for entire page:

Example

<body style="background-image: url('flowers.jpg');">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>

Try this code ❯

Background Cover

You can cover the background image as entire element, you can set the background-size property to cover.

Also, to make sure the entire element is always covered, set the background-attachment property to fixed:

This example shows how to set background image to cover the entire element, with no stretching:

Example

<style>
body {
  background-image: url('flowers.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
</style>

Try this code ❯

Background Stretch

You can stretch the background image to fit the entire element, you can set the background-size property to 100% 100%:

This example shows how to stretch the background image to fir entire element:

Example

<style>
body {
  background-image: url('flowers.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}
</style>

Try this code ❯

HTML Picture Element

The <picture> element control which image resource a user agent presents to a user, based on media query and/or support for a particular image format.

Note:

The picture element is not a general replacement for the <img> element. When there is only a single image source, authors should use <img> as usual.
The picture element requires <img> nested as the last child; don't ommit <img> element it will render if media query doesn't match.

Example

<picture>
  <source media="(min-width:650px)" srcset="computer.png">
  <source media="(min-width:465px)" srcset="clock.png">
  <img src="mobile.png" alt="computer" style="width:auto;">
</picture>

Try this code ❯

The <img> element serves two purposes:

It describes the size and other attributes of the image and its presentation.
It provides a fallback in case none of the offered <source> elements are able to provide a usable image.

HTML Image Related Tags

Tags	Description
<area>	Defines a hotspot region on an image and associates it with a hypertext link.
<img>	Defines a media object to be included in an HTML or XHTML document.
<map>	Defines client-side image maps.
<picture>	Defines a control which image resource a user agent presents to a user, based on media query and/or support for a particular image format.

A complete list of all HTML tags, see HTML Tag Reference.