Images make websites more attractive, engaging, and informative. A webpage filled only with text can feel boring, while images help explain ideas, showcase products, and improve the overall user experience.

Whether you're building a blog, portfolio, online store, or company website, you'll likely use images to communicate information visually.

What Are HTML Images?

HTML images allow you to display pictures on a webpage. Images are added using the img element.

Unlike many HTML elements, the img tag does not have a closing tag because it doesn't contain any content.

Basic example:

<img src="mountain.jpg" alt="Beautiful Mountain" />

In this example:

• The src attribute specifies the image file location.
• The alt attribute provides a description of the image.

The browser reads these attributes and displays the image on the page.

Understanding the src Attribute

The src, or source, attribute tells the browser where to find the image file.

<img src="images/profile.jpg" alt="Profile Picture" />

The browser looks for the image in the specified location and displays it.

Without the src attribute, the browser would not know which image to show.

Understanding the alt Attribute

The alt, or alternative text, attribute describes the image.

<img src="cat.jpg" alt="A white cat sitting on a chair" />

The alt text is important because:

• It helps visually impaired users using screen readers.
• It appears if the image cannot be loaded.
• It improves website accessibility.

Always provide meaningful alt text whenever possible.

Setting Image Size

You can control the size of an image using the width and height attributes.

<img src="logo.png" alt="Company Logo" width="200" height="100" />

This displays the image with a width of 200 pixels and a height of 100 pixels.

Images from External Sources

Images can also be loaded from another website.

<img src="https://www.devbrainbox.com/photo.jpg" alt="Sample photo" />

The browser downloads the image from the specified web address.

Common Image Formats

Websites commonly use these image formats:

Choosing the right format helps improve website performance.

Best Practices

When using images:

• Always include the alt attribute.
• Use clear and descriptive file names.
• Optimize image sizes to improve loading speed.
• Avoid using excessively large images.
• Choose the correct image format for the purpose.

Good example:

<img src="product-laptop.jpg" alt="15-inch Gaming Laptop" />

Less helpful example:

<img src="img1.jpg" alt="image" />

Key Takeaways

• Images is an important topic to understand.
• Start with small examples and practice one step at a time.
• Use the idea in simple projects so it becomes easier to remember.