Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Insert an Image in HTML Page?
To insert an image in HTML page is a very common and easy task that enhances the appearance of any web page. It makes a web page look more attractive and visually engaging.
In this article, we will explore three different approaches to insert an image in HTML page using HTML tags and CSS properties. Each method serves different purposes and offers unique advantages depending on your specific requirements.
Approaches to Insert an Image in HTML Page
Here is a list of approaches to insert an image in HTML page which we will be discussing in this article with stepwise explanation and complete example codes −
- Insert an Image using img Tag
- Insert an Image using background Property
- Insert an Image using embed Tag
Insert an Image using img Tag
The most common and recommended way to insert an image is using the HTML img tag. The HTML img tag is an inline and empty element used to embed images in HTML documents.
Syntax
Following is the syntax for the img tag −
<img src="image-path" alt="description" width="value" height="value">
Key attributes of the img tag include −
- src − Specifies the path to the image file (required)
- alt − Provides alternative text when the image cannot be displayed (required for accessibility)
- width − Sets the width of the image
- height − Sets the height of the image
Example
Here is a complete example implementing the img tag to insert an image in HTML page −
<!DOCTYPE html>
<html lang="en">
<head>
<title>Inserting Image Using img Tag</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
img {
width: 100%;
max-width: 600px;
height: auto;
margin-top: 15px;
border: 2px solid #ddd;
border-radius: 8px;
}
</style>
</head>
<body>
<h2>Insert an Image in HTML Page</h2>
<p>
In this example we have used HTML <strong>img</strong>
tag to insert an image in HTML page.
</p>
<img src="/css/images/css.jpg" alt="CSS Tutorial Image">
</body>
</html>
The output displays the image with responsive sizing and styled borders −
Insert an Image in HTML Page In this example we have used HTML img tag to insert an image in HTML page. [CSS Tutorial Image displayed with border and rounded corners]
Insert an Image using background Property
In this approach, we use CSS background property with url() function to set an image as the background of an HTML element. This method is ideal for decorative images or when you need to overlay text on images.
Syntax
Following is the syntax for using background property with images −
.element {
background-image: url('image-path');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
Example
Here is a complete example using CSS background property to insert an image −
<!DOCTYPE html>
<html lang="en">
<head>
<title>Inserting Image Using Background Property</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.img-container {
background-image: url('/css/images/css.jpg');
width: 100%;
max-width: 600px;
height: 300px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
border-radius: 8px;
margin-top: 15px;
}
</style>
</head>
<body>
<h2>Insert an Image in HTML Page</h2>
<p>
In this example we have used CSS <strong>background-image</strong>
property with <strong>url()</strong> function to insert an image.
</p>
<div class="img-container"></div>
</body>
</html>
The output shows the image as a background with proper sizing and positioning −
Insert an Image in HTML Page In this example we have used CSS background-image property with url() function to insert an image. [CSS Tutorial Image displayed as background with cover sizing]
Insert an Image using embed Tag
The HTML embed tag is used as a container for external applications, multimedia, and interactive content. While not commonly used for static images, it can display images and is particularly useful for embedding various media types.
Syntax
Following is the syntax for the embed tag −
<embed src="image-path" type="image/format" width="value" height="value">
Example
Here is a complete example using the HTML embed tag to insert an image −
<!DOCTYPE html>
<html lang="en">
<head>
<title>Inserting Image Using embed Tag</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
embed {
width: 100%;
max-width: 600px;
height: 300px;
margin-top: 15px;
border: 2px solid #ddd;
border-radius: 8px;
}
</style>
</head>
<body>
<h2>Insert an Image in HTML Page</h2>
<p>
In this example we have used HTML <strong>embed</strong>
tag to insert an image in HTML page.
</p>
<embed src="/css/images/css.jpg" type="image/jpeg">
</body>
</html>
The output displays the image through the embed element −
Insert an Image in HTML Page In this example we have used HTML embed tag to insert an image in HTML page. [CSS Tutorial Image displayed via embed tag]
Comparison of Image Insertion Methods
Following table compares the three methods for inserting images in HTML −
| Method | Best Use Case | SEO Friendly | Accessibility | Browser Support |
|---|---|---|---|---|
<img> tag |
Content images, photos, illustrations | Yes | Excellent (alt attribute) | Universal |
background-image |
Decorative images, hero sections, overlays | Limited | Poor (no alt text) | Excellent |
<embed> tag |
Multimedia content, plugins | Limited | Limited | Good (depends on content type) |
Best Practices for Image Insertion
When inserting images in HTML pages, consider these best practices −
-
Use img tag for content images − Always use the
<img>tag for images that are part of your content - Include alt attributes − Always provide meaningful alt text for accessibility and SEO
- Optimize file sizes − Use appropriate image formats (JPEG for photos, PNG for graphics with transparency)
- Use responsive images − Set max-width: 100% and height: auto for responsive behavior
- Choose background-image for decoration − Use CSS background-image for purely decorative images
Conclusion
The <img> tag is the most recommended method for inserting images as it provides the best accessibility, SEO benefits, and semantic meaning. Use CSS background
95K+ Views
