Visual elements are essential components utilized extensively to represent ideas in a more straightforward manner. They play a crucial role in improving the visual appeal and layout of a webpage. HTML offers a variety of built-in tags that facilitate the seamless insertion of images onto a webpage.
This guide will cover the different HTML tags used for inserting images.
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 src attribute in HTML serves to specify the location (URL) of 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
<img src="https://placehold.co/400x300/34495e/ffffff?text=Logo">
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="https://placehold.co/400x300/34495e/ffffff?text=Logo" alt="Welcome to our tutorial" width="360" height="145">
</body>
</html>
Output
3. alt Attribute
The alt attribute in HTML serves the purpose of offering an alternative text for an image in cases where the image cannot be displayed to the website visitor, whether due to slow loading times, poor internet connectivity, or any other issues.
It is important that the content within the alt attribute is accurate and effectively conveys the intended meaning of the image.
Syntax
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt="Flowers found in Chania">
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="https://placehold.co/400x300/34495e/ffffff?text=Logo" alt="Welcome to our tutorial" width="360" height="145">
</body>
</html>
Output
4. Image Size - Width and Height
Once you have added an image to your webpage, it is crucial to set the height and width attributes to ensure it displays correctly. In HTML, you can utilize the style attribute to specify the dimensions of the image.
Syntax
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt="Welcome to our tutorial" 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="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt="Welcome to our tutorial" style="width:400px;height:135px;">
</body>
</html>
Output
5. HTML Image as a link
In HTML, developers can create an image link by utilizing the anchor tag within the HTML markup:
Syntax
<a href="">
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt="Welcome to our tutorial" 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="">
<img src="https://placehold.co/400x300/3498db/ffffff?text=Sample+Image" alt="Welcome to our tutorial" style="width:400px;height:135px;">
</a>
</body>
</html>
Output
6. Include Image in Another folder
Often, users may need to incorporate images from a sub-directory. In such instances, it is essential to specify the folder name within the src attribute:
Syntax
<img src="https://placehold.co/200x150/1abc9c/ffffff?text=Sample+Image" 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="https://placehold.co/200x150/1abc9c/ffffff?text=Sample+Image" alt="C# Tutorial Icon" style="width: 200px;height:200px;">
</body>
</html>
Output
7. HTML Animated Images
HTML provides the capability for users to incorporate animated images or GIFs within the code.
Syntax
<img src="https://placehold.co/400x300/9b59b6/ffffff?text=Logo" 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="https://placehold.co/400x300/34495e/ffffff?text=Logo" alt="GIF Format" style="width:48px;height:48px;">
</body>
</html>
Output
Commonly used Images Format
| 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 |
- .ico
- .cur
- .pjp
- .jpg
- .jpeg
- .pjpeg
- .jfif
How to include background images?
A developer working with HTML can designate a background image for any HTML element by utilizing the "background-image" property.
1. Background Image on a HTML element
A background image can be added to an HTML element by an HTML developer through the utilization of the HTML style attribute in combination with the background-image property.
Syntax
<div style="background-image: url('img_little_girl.jpg');">
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
To apply a background image to the entire webpage, the HTML developer should insert the background image within the <body> tag in the HTML document:
Syntax
<style>
body {
background-image: url(C# Tutorial_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
In the event that the background image specified is smaller in dimensions compared to the element, it will duplicate itself automatically in both horizontal and vertical directions until it reaches the edge 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
The background-size property in HTML enables users to adjust the size of an element to fit the background images provided. This feature ensures that the entire element is covered by the background image without distorting it, thus preserving its original proportions.
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