How to include image in HTML

Images are an internal part that is widely used to depict any concept in a simplified manner. They are used to enhance the design and the display of a web page.HTML language provides many inbuilt tags for easily inserting an image in a webpage.

In this tutorial, we will learn the various tags to include images in HTML.

HTML Images Syntax

1. <IMG>

Technically, Images are never inserted in any webpage. Rather, they are linked to their respective web pages. The HTML <img> tag is commonly used to insert an image in any web page. The <img> tag works by creating a holding space for the selected image. By default, the HTML <img> tag is empty and doesn't hold any value. It only contains attributes that do not include a closing tag.

The two attributes of the <img> tag are as follows:

IMG src attribute- This attribute defines the path to the specified image.
IMG alt attribute - This attribute fetches an alternate text for the given image

2. IMG src Attribute

The HTML <img> src attribute defines the path (URL) to the image.

Note: Whenever your browser loads any web page, at the same moment, it is the responsibility of your browser to fetch the web pages' images from a web server and include it into the website. Therefore, the HTML programmer should always ensure that the image lingers in the same spot concerning the web page. Otherwise, your users will receive a broken link icon which further displays a text showing the browser cannot find the image.

Syntax

Code:

<!DOCTYPE html>
<html>
<body>
<h2>HTML  Image </h2>
<p>The <img> alt attribute is sued to display the specific image content, so the HTML users who cannot load the image in time can atleast get an idea of what the image include:</p>
<img src="javaTpoint_logo.jpg" alt="Welcome to JavaTpoint" width="360" height="145">
</body>
</html>

Output

3. alt Attribute

The HTML alt attribute is used to provide an alternate text for the given image, if the website user cannot view the image due to delay in loading, slow internet connections or any other reason.

The content of the alt attribute should be precise and it should describe the purpose of the image.

Syntax

Code:

<!DOCTYPE html>
<html>
<body>
<h2>Alternative Image text</h2>
<p>The <img> alt attribute is sued to display the specific image content, so the HTML users who cannot load the image in time can atleast get an idea of what the image include:</p>
<img src="javaTpoint_logo.jpg" alt="Welcome to JavaTpoint" width="360" height="145">
</body>
</html>

Output

4. Image Size - Width and Height

After inserting the image, it is important to specify the height and width, so it fits in the webpage properly. Therefore, HTML provides the style attribute to define the height and width of an image.

Syntax

<img src="javatpoint.jpg" alt="Welcome to JavaTpoint" style="width:600px; height:600px;">

Code:

<!DOCTYPE html>
<html>
<body>
<h2>Image with Specified Height and Width </h2>
<p>In the following code, we have use the HTML style attribute to define the width and height of our webpage's image:</p>
<img src="C:\Users\REEMA\OneDrive\Desktop" alt="Welcome to JavaTpoint" style="width:400px;height:135px;">
</body>
</html>

Output

5. HTML Image as a link

HTML provides the feature to use the image as a link. For this the HTML programmer need to use the <img> tag inside the HTML <a> tag:

Syntax

<a href="https://www.javatpoint.com/">
<img src="C:\Users\REEMA\OneDrive\Desktop" alt="Welcome to JavaTpoint" style="width:400px;height:135px;">
</a>

Code:

<!DOCTYPE html>
<html>
<body>
<h2>Link an Image</h2>
<p>In the following code, we have use the HTML <a> tag to link an image.</p>
<a href="https://www.javatpoint.com/">
<img src="C:\Users\REEMA\OneDrive\Desktop" alt="Welcome to JavaTpoint" style="width:400px;height:135px;">
</a>
</body>
</html>

Output

6. Include Image in Another folder

Many times the user have a requirement to include the images in a sub-folder, in that case you must contain the folder name in the src attribute:

Syntax

<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

Code:

<!DOCTYPE html>
<html>
<body>
<h2>Images in Another Folder</h2>
<p>We often store the main image in any sub-folder. Therefore the HTML programmer must contain the folder name as well in the HTML src attribute:</p>
<img src="/images/javatpoint.gif" alt="Javatpoint Icon" style="width: 200px;height:200px;">
</body>
</html>

Output

7. HTML Animated Images

HTML enables its users to embed moving images or GIF as well in the code.

Syntax

<img src="javatpoint_logo.gif" alt="GIF Format" style="width:48px;height:48px;">

Code:

<!DOCTYPE html>
<html>
<body>
<h2>Animated Images or GIF</h2>
<p>The below code enables moving images:</p>
<img src="javatpoint_logo.gif" alt="GIF Format" style="width:48px;height:48px;">
</body>
</html>

Output

Commonly used Images Format

.png

.svg

Image File Format abbreviation	Full Form	File extension
APNG	APNG stands for Animated Portable Network Graphics	. apng
GIF	GIF stands for Graphics Interchange Format	.gif
ICO	ICO stands for Microsoft Icon	.ico .cur
PNG	The abbreviation PNG stands for Portable Network Graphics
SVG	The full form of SVG is Scalable Vector Graphics
JPEG	The full form of JPEG is Joint Photographic Expert Group image	.pjp .jpg .jpeg .pjpeg .jfif

How to include background images?

An HTML programmer can also specify a background image for any HTML code by using "background-image" property.

1. Background Image on a HTML element

The HTML programmer can implement a background image on any HTML element by using the HTML style property and the background-image feature.

Syntax

Code:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-image: url('img_girl.jpg');
}
</style>
</head>
<body>
<h2>Background Image Example</h2>
<div>
The background images can be specified<br>
<br>
for any visible element.<br>
<br>
<br>
In this code, we have applied the background image<br>
<br>
<br>
for an element named as div.<br>
<br><br><br><br>
</div>
</body>
</html>

Output

2. Background Image on a Page

If the HTML programmer wants to incorporate the background image to its entire page, they must use the background image inside the HTML <body> element:

Syntax

<style>
body {
  background-image: url(javatpoint_logo.jpg');
}
</style>

Code:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url('img_little_girl.jpg');
}
</style>
</head>
<body>
<h2>How to insert Background Image on a Page</h2>
<p>By default, HTML repeats the specified background image if the size of the image is smaller than the element where it is mentioned.</p>
</body>
</html>

Output

3. Background Image Repeat

If the specified background image is small in size than the element, in that case, the image will automatically replicate itself in both ways (horizontally and vertically), unless and until it extends to the end of the page:

Syntax

<style>
body {
  background-image: url('example_img_girl.jpg');
}
</style>

Code:

<html>
<head>
<style>
body {
  background-image: url('example_img_girl.jpg');
}
</style>
</head>
<body>

<h2>Example for Background Repeat</h2>

<p>By default, the background image will repeat itself if it is smaller than the element where it is specified, in this case the body element.</p>

</body>
</html>

Output

4. Background Cover

HTML provides the background-size property, which helps the user set the entire element with the given background images. This method covers the entire element without stretching the image and therefore retaining the original proportions of the image.

Syntax:

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

Code:

<html>
<head>
<style>
body {
  background-image: url('example_img_girl.jpg');
  background-attachment: fixed;  
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
</head>
<body>
<h2>How  to Cover the background</h2>
<p>To enable the background cover set the background-size property to "cover" and the background image will automatically cover the entire HTML element.</p>
</body>
</html>

Output