HTML Images

❮ Previous Next ❯

Images help create more attractive websites.

Appropriate use of images in an HTML document can help convey messages in a better way to users.

One can show product images, brand logos and ideas with the help of HTML images.

Images help set the sensitivity and emotions a website wants to convey to its users.

Let's learn the syntax used to embed an image in HTML documents.

HTML Image Syntax

Let's see few examples.

A Garden Image

HTML Code

Example

<!DOCTYPE html>

<html>

<head>

<title>Garden Image</title>

</head>

<body>

<h1>Garden Image</h1>

<img src="garden.jpg" alt="Garden Image">

<p>To embed this garden image we have used HTML's img tag.</p>

</body>

</html>

Result on Editor

An Aloe Vera Image

HTML Code

Example

<!DOCTYPE html>

<html>

<head>

<title>An Aloe Vera Plant</title>

</head>

<body>

<h1>An Aloe Vera Plant</h1>

<img src="aloevera.jpg" alt="An Aloe Vera Plant">

<p>To embed this Aloe Vera image we have used HTML's img tag.</p>

</body>

</html>

Result on Editor

To display an image at a particular location on a web page, we use HTML <img> element in our HTML document.

The <img> element is an empty element.

By empty element, we mean that it does not contain an ending (closing) tag. It only contains HTML attributes that provide styles and other features.

Web Browsers, while rendering the HTML document, load the image from the URL and display it in the space allotted.

The src attribute specifies the URL of the image. It is a required attribute, and the <img> tag must define the path of the image to be embedded.

The alt attribute provides an alternate text for the image and is required.

Let's discuss the <img> src attribute and the <img> alt attribute in detail.

<img> src Attribute

We provide the path of the image in the src attribute of <img> tag.

If the image, and the HTML document in which we are embedding the image, are present in the same folder, then we will write only the name of the image file in the src attribute.

HTML Code

Example

<!DOCTYPE html>

<html>

<head>

<title>An Image in the Same Folder Example</title>

</head>

<body>

<h1>An Image in the Same Folder Example</h1>

<img src="chromelogo.png" alt="Logo of Google Chrome Browser">

<p>The image chromelogo.png is available in the same folder. Hence we only require the name of the image in src attribute.</p>

</body>

</html>

Result on Editor

If the location of the image and the HTML document is different, but they are on the same server or website.

Then we will specify the image file in the src attribute with the folder name as follows:

HTML Code

Example

<!DOCTYPE html>

<html>

<head>

<title>An Image in the Different Folder Example</title>

</head>

<body>

<h1>An Image in the Different Folder Example</h1>

<img src="/html/edgelogo.png" alt="Logo of Microsoft Edge Browser">

<p>The image edgelogo.png is available in the html folder. Hence we require the name of the image with complete path in src attribute i.e. '/html/edgelogo.png'.</p>

</body>

</html>

Result on Editor

The HTML document can also embed an image file from another website or server.

To add such an image, we need to provide the absolute URL of the image in the src attribute.

See the HTML code:

HTML Code

<img src="https://resultuniversity.com/html/garden.jpg" alt="Resultuniversity.com">

Example

<!DOCTYPE html>

<html>

<head>

<title>An Image on Other Website</title>

</head>

<body>

<h1>An Image on Other Website Example</h1>

<img src="https://resultuniversity.com/html/garden.jpg" alt="Resultuniversity.com">

<p>The image garden.jpg is available on resultuniversity.com. Hence we need to provide the absolute URL of the image.</p>

</body>

</html>

Result on Editor

Note:

One should always make sure that the image is available at the resource (URL) provided.

If the image is not found in the location specified, then the browser shows a broken link icon with alt text.

We should be cautious while using images from external servers and websites. As we have no control over these images and they can anytime get removed or altered.

Sometimes there can be an issue of copyright infringement.

The Image File Extensions

The file name of the image must include its extensions like .png, .jpg, .gif etc.

Let's see some of the most common image file types and their corresponding extensions that are also supported by widely used web browsers.

Extension	Format	Abbr.
.jpg	Joint Photographic Expert Group	JPEG
.jpeg	Joint Photographic Expert Group	JPEG
.png	Portable Network Graphics	PNG
.svg	Scalable Vector Graphics	SVG
.gif	Graphics Interchange Format	GIF
.ico	Microsoft Icon	ICO
.apng	Animated Portable Network Graphics	APNG

The alt attribute

The alt attribute of the <img> tag specifies the text description of the image embedded.

HTML Code

Example

<!DOCTYPE html>

<html>

<head>

<title>Alt Attribute of an Image Example</title>

</head>

<body>

<h1>Alt Attribute of an Image</h1>

<img src="aloevera.jpg" alt="An Image of Aloe Vera Plant">

<p>Above image has an alt attribute with value: 'An Image of Aloe Vera'.</p>

</body>

</html>

Result on Editor

If the image specified in the src attribute fails to load, this alternate text in the src attribute is shown at the place of the image with the image broken link icon.

See the example below. Click on result on editor to view the result of the code.

Example

<!DOCTYPE html>

<html>

<head>

<title>Image Fails to Load Example</title>

</head>

<body>

<h1>Image Fails to Load Example</h1>

<img src="noimage.jpg" alt="Garden Image">

<p>The text in the alt attribute is shown.</p>

<p>We have deliberately written wrong name of the image. So that image fails to load.</p>

</body>

</html>

Result on Editor

An image fails to load due to various reasons.

The most frequent factors behind this are a slow internet connection and typing errors in the file name.

HTML Image Size

The CSS can set the size of an image in an HTML document.

Depending on the best suitable need we can use external, internal or inline CSS.

Let's take an example of inline CSS where we have used the style attribute on <img> tag to specify width and height.

HTML Code

<img src="aloevera.jpg" alt="An Image of Aloe Vera Plant" style="width:400px;height:500px;">

Example

<!DOCTYPE html>

<html>

<head>

<title>HTML Image Size Example</title>

</head>

<body>

<h1>HTML Image Size</h1>

<img src="aloevera.jpg" alt="An Image of Aloe Vera Plant" style="width:400px;height:500px;">

<p>Using the style attribute we have set the width of the image to 400px and height to 500 px.</p>

</body>

</html>

Result on Editor

Width & Height Attribute

We can also use width and height attributes to set image size. See the example below.

HTML Code

<img src="aloevera.jpg" alt="An Image of Aloe Vera Plant" width="400" height="500">

Example

<!DOCTYPE html>

<html>

<head>

<title>HTML Image Size by Width and Height Attribute</title>

</head>

<body>

<h1>Width and Height Attribute</h1>

<img src="aloevera.jpg" alt="An Image of Aloe Vera Plant" width="400" height="500">

<p>Using width and height attribute we have set the width of the image to 400px and height to 500 px.</p>

</body>

</html>

Result on Editor

Though width and height attributes can set the size of the image it is always a good practice to use CSS.

It is important to note that the CSS can override the size set by width and height attributes.

See the example below.

Example

<!DOCTYPE html>

<html>

<head>

<title>HTML Image Size Override Example</title>

<style>

img {

width: 100%;

}

</style>

</head>

<body>

<h1>HTML Image Size Override Example</h1>

<p>The size of the below image has been set using the width and height attributes. Width is set to 200 px but the internal CSS written in head section overrides the width to 100%.</p>

<img src="chromelogo.png" alt="Chrome Logo" width="200" height="200">

<p>The size of the below image has been set using the style property. Width is set to 200 px. Here the internal CSS written in head section does not overrides the width.</p>

<img src="chromelogo.png" alt="Chrome Logo" style="width:200px; height:200px;">

</body>

</html>

Result on Editor

HTML Image Border

We can use the CSS border property in the style attribute of <img> tag to define a border around the image.

HTML Code

Example

<!DOCTYPE html>

<html>

<head>

<title>Border around an Image Example</title>

</head>

<body>

<h1>HTML Code for Border around an Image</h1>

<img src="garden.jpg" alt="A Garden" style="border:4px solid red;">

<p>Above image has a green color solid border of 4px.</p>

</body>

</html>

Result on Editor

HTML Image Link

To make an image link, all we need to do is to place the image element <img> inside the opening <a> and closing </a> tags.

HTML Code

<a href="web-browser">
<img src="chromelogo.png" alt="chrome browser" style="width:50px;height:50px;">
</a>

Example

<!DOCTYPE html>

<html>

<head>

<title>HTML Image Link Example</title>

</head>

<body>

<h1>HTML Image Link</h1>

<a href="web-browser">
<img src="chromelogo.png" alt="chrome browser" style="width:50px;height:50px;">
</a>

<p>This is an example of an image link. Click on the link to see where it opens.</p>

</body>

</html>

Result on Editor

HTML Image Float

The CSS float property can make an image float left or right to the text.

See the example below to understand image floating.

HTML Code

Example

<!DOCTYPE html>

<html>

<head>

<title>HTML Image Float Example</title>

</head>

<body>

<h1>HTML Image Float</h1>

<p><img src="chromelogo.png" alt="Chrome Logo" style="float:right;width:40px;height:40px;">We have set the float property to right.</p>

<p><img src="chromelogo.png" alt="Chrome Logo" style="float:left;width:40px;height:40px;">We have set the float property to left.</p>

</body>

</html>

Result on Editor

What did we learn in this chapter?

The <img> element defines an image in an HTML document.
The URL of the image is written inside the src attribute.
We should always include alternate text for the image in the alt attribute.
When an image fails to load, then web browsers show a broken link icon with alt text.
Though width and height attributes can set the image size, it is advisable to use CSS.
The CSS border property in the style attribute can set the border around an image.
An image placed inside the <a> and </a> tags makes an image link.
Use CSS float property to set image floating.