HTML Image Tag

The image tag (<img>) is the standard way to embed visual media into your web pages. In modern web development, images do more than just make a site look "pretty"—they are crucial for branding, conveying complex data via infographics, and improving user engagement. Since HTML is a text-based language, the <img> tag doesn't actually "insert" an image into the code; instead, it creates a holding space that links to the image file's location.

Usage:

To display an image, you must use the src (source) attribute to tell the browser where the file lives. Without this attribute, the browser won't know what to render. While the src is mandatory for the image to show up, the alt attribute is equally important for accessibility and SEO.

<img src="https://www.example.com/assets/banner.jpg" alt="Company summer marketing banner">

Src Attribute:

The src attribute acts as the address for your image. Developers generally use two types of paths depending on where the image is hosted:

• Absolute URL: This links to an image hosted on a different website. It must include the full protocol (https://).

  <img src="https://cdn.pixabay.com/photo/nature-789.jpg" alt="Forest landscape">

• Relative URL: This links to an image hosted on your own server, relative to the current HTML file. This is the preferred method for internal site assets because it won't break if you change your domain name.

  <img src="assets/images/logo.png" alt="Company Logo">

Alt Attribute:

The alt (alternative text) attribute is a text description of the image. It serves three vital purposes:

1. Accessibility: Screen readers read this text aloud to visually impaired users.
2. Fallback: If the user has a slow connection or the image file is missing, the alt text appears in its place.
3. SEO: Search engines use this text to understand what the image is about, helping your site rank better in image searches.

<img src="mountain-peak.jpg" alt="Snow-capped mountain peak during sunrise">

Width and Height Attributes:

You can define the size of an image directly in the HTML using the width and height attributes. These values are interpreted as pixels by default.

<img src="profile.jpg" alt="User Profile" width="300" height="200">

While CSS is often used for styling, providing these attributes in the HTML is highly recommended. It reserves the correct amount of space on the page before the image even loads, which prevents the page layout from "jumping" around while loading (a concept known as Cumulative Layout Shift).

Responsive Images:

In the modern era of smartphones and tablets, images need to look good on all screen sizes. A static width of "800px" will break your layout on a mobile phone. To make an image responsive, we typically use CSS to ensure it never exceeds the width of its container.

Example using a percentage value directly in the tag (less common today):

<img src="landscape.jpg" alt="Valley view" width="100%">

Accessibility Considerations:

Beyond the alt text, consider the context of your images. If an image is purely decorative (like a background flourish or a spacer), you should still include the alt attribute but leave it empty: alt="". This tells screen readers to skip the image entirely rather than reading out the file name.

Styling with CSS:

CSS gives you full control over the presentation of your images. You can add borders, rounded corners (using border-radius), and shadow effects to make your UI feel modern.

<style>
   .user-avatar {
       width: 150px;
       height: 150px;
       border-radius: 50%; /* Makes the image circular */
       border: 3px solid #007bff;
       object-fit: cover; /* Ensures the image fills the circle without distorting */
   }

   .responsive-img {
       max-width: 100%;
       height: auto; /* Maintains aspect ratio automatically */
       display: block;
   }
</style>

<img src="avatar.jpg" alt="John Doe" class="user-avatar">
<img src="office-header.jpg" alt="Modern office space" class="responsive-img">

The <img> tag is a foundational tool for any web developer. By mastering its attributes and combining them with modern CSS techniques, you can ensure your website is visually engaging, accessible to everyone, and optimized for performance across all devices.