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 display an image in HTML?
Use the <img> tag in HTML to display an image. The <img> tag is a self-closing element that embeds images into web pages. It requires the src attribute to specify the image location and the alt attribute for accessibility.
Syntax
Following is the basic syntax for the <img> tag −
<img src="image-url" alt="description" width="value" height="value">
The <img> tag is self-closing, meaning it doesn't require a closing tag. The src and alt attributes are essential for proper functionality and accessibility.
IMG Tag Attributes
The <img> tag supports several attributes to control image display and behavior −
| Attribute | Value | Description |
|---|---|---|
| src | URL | Specifies the path or URL to the image file (required) |
| alt | text | Provides alternative text for screen readers and when image fails to load |
| width | pixels or % | Sets the width of the image |
| height | pixels or % | Sets the height of the image |
| loading | eager, lazy | Controls when the image should be loaded (HTML5) |
| crossorigin | anonymous, use-credentials | Allows images from third-party sites for canvas usage |
| usemap | #mapname | Associates the image with a client-side image map |
| ismap | ismap | Defines the image as a server-side image map |
Note: Attributes like align, border, hspace, vspace, and longdesc are deprecated in HTML5. Use CSS for styling and positioning instead.
Basic Image Display
Example
Following example shows how to display a simple image −
<!DOCTYPE html>
<html>
<head>
<title>Basic Image Display</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Welcome to HTML Images</h2>
<img src="https://www.tutorialspoint.com/html5/images/html5-mini-logo.jpg"
alt="HTML5 Logo"
width="270"
height="250">
<p>This is an HTML5 logo image displayed using the img tag.</p>
</body>
</html>
The image displays with the specified dimensions and includes alternative text for accessibility.
Responsive Images with CSS
Modern web development uses CSS for responsive image sizing instead of fixed width and height attributes.
Example
<!DOCTYPE html>
<html>
<head>
<title>Responsive Images</title>
<style>
.responsive-img {
max-width: 100%;
height: auto;
border: 2px solid #ddd;
border-radius: 8px;
padding: 5px;
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<div class="container">
<h2>Responsive Image Example</h2>
<img src="https://www.tutorialspoint.com/html5/images/html5-mini-logo.jpg"
alt="HTML5 Tutorial Logo"
class="responsive-img">
<p>This image automatically adjusts to different screen sizes while maintaining its aspect ratio.</p>
</div>
</body>
</html>
The responsive image scales down on smaller screens while maintaining its aspect ratio and includes a decorative border.
Image with Loading Attribute
HTML5 introduced the loading attribute to control when images are loaded, improving page performance.
Example
<!DOCTYPE html>
<html>
<head>
<title>Lazy Loading Images</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Lazy Loading Example</h2>
<p>Scroll down to see more content...</p>
<div style="height: 400px; background: #f0f0f0; margin: 20px 0; padding: 20px;">
<p>Some content here...</p>
</div>
<img src="https://www.tutorialspoint.com/html5/images/html5-mini-logo.jpg"
alt="HTML5 Logo with Lazy Loading"
loading="lazy"
width="270"
height="250">
<p>This image loads only when it comes into the viewport, improving initial page load speed.</p>
</body>
</html>
The loading="lazy" attribute delays image loading until the user scrolls near the image, reducing initial page load time.
Common Use Cases
Images in HTML are commonly used for logos, illustrations, photographs, icons, and decorative elements. Always include meaningful alt text for screen readers, and consider using modern attributes like loading="lazy" for better performance.
Conclusion
The <img> tag is essential for displaying images in HTML. Always include the src attribute for the image source and alt for accessibility. Use CSS for styling and positioning instead of deprecated HTML attributes, and consider modern features like lazy loading for optimal performance.
9K+ Views
