Skip to main content

Inserting Images in HTML

Images are vital for modern web design. They break up text, guide the user's eye, and often convey information faster than words can. In HTML, the tool for adding any image, from a small logo to a full hero background, is the <img> (image) tag.

The <img> tag is unique because it's a void element (it's self-closing), meaning it doesn't wrap content, but simply points to an external image file to be displayed.


1. The Two Non-Negotiable Attributes​

While the <img> tag has many optional attributes, only two are truly required for a valid and functional image: src and alt.

A. src (Source)​

The src attribute is the most fundamental. It stands for Source and tells the browser exactly where to find the image file.

  • Value: A path or URL pointing to the image file (e.g., logo.png, images/profile.jpg, or a full web URL).

B. alt (Alternative Text)​

The alt attribute provides a short, descriptive string of text for the image. This attribute is mandatory for several reasons:

  1. Accessibility: Screen readers use the alt text to describe the image to users with visual impairments.
  2. Error Handling: If the image fails to load (due to a broken link or slow internet), the browser displays the alt text instead.
  3. SEO: Search engines use alt text to understand the image content, which helps with search visibility.

Basic Image Insertion Example​

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Image Example</title>
</head>
<body>
  <h1>Meet Our Mascot</h1>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Dog_Breeds.jpg/800px-Dog_Breeds.jpg" alt="A friendly golden retriever dog looking directly at the camera" />
</body>
</html>
http://.../index.html

 

Meet Our Mascot

  A friendly golden retriever dog looking directly at the camera

2. Controlling Image Dimensions​

While you can (and usually should) control image size using CSS, the width and height attributes are a critical part of modern HTML best practices.

The width and height Attributes​

These attributes specify the image's dimensions, typically in pixels.

  • Best Practice Alert! Always include static width and height values directly in the HTML. This reserves space for the image before the image file loads, preventing a jarring effect called Cumulative Layout Shift (CLS), which dramatically improves performance scores.
AttributePurposeExample Value
widthSets the width of the image.width="400"
heightSets the height of the image.height="300"

Example with Sizing Attributes​

index.html
<img src="/assets/photo.jpg" 
     alt="A scenic view of a mountain range" 
     width="400" 
     height="300" 
/>

3. Other Useful Image Attributes​

The <img> tag supports many Global Attributes, but here are a few particularly useful ones for images:

  • title: Adds a tooltip that appears when the user hovers the mouse over the image. This is purely visual and does not replace the alt attribute.

    <img src="photo.jpg" alt="Photo" title="Click to enlarge">

  • loading="lazy": A performance optimization that tells the browser not to load the image until it is about to enter the user's viewport. Use this for images that are far down the page.

    <img src="footer-ad.png" alt="Advertisement" loading="lazy">

  • style and class: Used to apply CSS. class is preferred for external styling, while style applies inline styling.

Advanced Example with Styling​

index.html
<img src="/assets/avatar.png" 
     alt="User profile picture" 
     class="rounded-image"
     width="100" 
     height="100" 
     style="border: 3px solid #007bff;" 
/>

Why Images Matter: The Power of Visuals​

Images are not just decoration; they are a key part of the user experience and site performance:

  1. Engagement: Visuals are processed much faster than text, instantly capturing user attention.
  2. Accessibility (The alt MVP): Providing alternative text ensures that everyone, regardless of their viewing method (screen reader, slow connection), can understand the content.
  3. Performance: Properly optimized images (correctly sized and using width/height) drastically improve your site's load speed and overall quality score.

Conclusion​

The <img> tag is deceptively simple. While you only need src and alt to make it work, using the additional attributes like width, height, and loading are essential to create a fast, compliant, and accessible web page.