.png?w=3840&q=75)
.webp?w=3840&q=75)
.webp?w=3840&q=75)
When working with HTML, incorporating images into your web page is a fundamental skill. The <img> tag is the primary HTML element used to add image in HTML page. The <img> tag does not have a closing tag; instead, it is a self-closing tag. Here's a basic example:
1<img src="path/to/your/image.jpg" alt="Description of Image">
In this example, the <img> src attribute specifies the file path or the image URL of the image file, and the alt attribute provides alternate text that describes the image.
The src attribute is crucial because it tells the browser where to find the image file. The src attribute can point to a local file path or a URL from the internet. Using relative file paths is common when the image file is located in the same directory as the HTML file.
1<img src="images/photo.jpg" alt="Sample Photo">
In this code, the image file is located in the images folder, which is in the same directory as the HTML file.
The alt attribute is essential for accessibility and SEO. It provides a textual description of the image for screen readers, which assists visually impaired users. It also helps search engines understand the content of the image.
1<img src="images/logo.png" alt="Company Logo">
Here, if the image fails to load, users will see the text "Company Logo," which can be helpful for understanding the context.
The title attribute provides additional information about the image. When a user hovers over the image, the title text appears as a tooltip.
1<img src="images/banner.jpg" alt="Banner" title="Our Company Banner">
Here's a complete example demonstrating the <img> tag with various attributes:
1<img src="https://example.com/image.jpg" alt="Beautiful Landscape" title="Landscape Photo" width="400" height="300">
To insert images into your HTML, you'll use the <img> tag along with the src attribute. This attribute specifies the source of the image file. You can use either relative file paths or absolute URLs. Once the image is inserted, you can also control the size of your HTML images, center the image, and add hyperlink to the image.
For example, using a relative file path:
1<img src="images/example.jpg" alt="Example Image">
Here, the image file is located in the images folder within the same directory as the HTML file. If you're using an absolute URL, it looks like this:
1<img src="https://example.com/images/example.jpg" alt="Example Image">
This approach is useful when you're pulling images from third-party sites or a content delivery network (CDN).
Adding a favicon to your web page helps in branding and makes your site easily recognizable in browser tabs. To add a favicon, you include a link tag in the head section of your HTML file:
1<head> 2 <link rel="icon" type="image/png" href="images/favicon.png"> 3</head>
Here, the href attribute points to the favicon image file.
Using CSS, you can set a background image for various HTML elements. Background images are particularly useful for adding visual appeal to divs or the entire body of a web page. The background-image CSS property is used for this purpose.
1body { 2 background-image: url('images/background.jpg'); 3 background-size: cover; 4 background-position: center; 5}
In this example, the body of the web page will have a background image that covers the entire page and is centered.
You can control the position and size of your background image using the background-position and background-size properties.
1.header { 2 background-image: url('images/header.jpg'); 3 background-position: top left; 4 background-size: 100% 100%; 5}
This CSS will position the background image at the top left of the header and stretch it to cover the entire header area.
Loading images efficiently is crucial for improving the performance of your web pages, especially for users with slow connections. Here are some tips to optimize image loading:
1<img src="images/photo.jpg" alt="Photo" loading="lazy">
When an image fails to load, it can create a poor user experience. Handling broken links properly ensures that your web pages remain visually appealing and functional.
The alt attribute provides alternate text for images that fail to load. This text will be displayed in place of the image, giving users context.
1<img src="images/nonexistent.jpg" alt="Image not found" title="This image is missing">
Make sure the file paths to your images are correct. Double-check that the image files exist in the specified location and that there are no typos in the file names or paths.
1<img src="images/correct-path.jpg" alt="Correct Image Path">
Here’s a comprehensive example that demonstrates optimized image loading and accessibility considerations:
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Optimized and Accessible Images</title> 7</head> 8<body> 9 <h1>Welcome to Our Web Page</h1> 10 <p>Here is an example of an optimized and accessible image:</p> 11 <img src="images/example.jpg" alt="Example Image of a Sunset" title="Sunset Image" width="800" height="600" loading="lazy"> 12 <p>Even if the image fails to load, you will see this text.</p> 13</body> 14</html>
In this example:
The image uses the loading="lazy" attribute for lazy loading.
The alt attribute provides meaningful alternate text.
The title attribute gives additional information about the image.
The width and height attributes ensure the image is displayed at the correct size.
Incorporating image in HTML web pages is a fundamental skill for creating visually engaging and informative content. By mastering the use of the <img> tag and its attributes, you can enhance the user experience and accessibility of your web pages.
Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!
You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.
