Everything About HTML Images: Insertion, Dimensions, and ALT Attribute Optimization

Images are a crucial element of any modern website. Not only do they enrich the text and enhance user experience, but they also play an important role in search engine optimization (SEO). A properly inserted image can drive significant traffic to your site directly from Google Image Search.

In this article, we will take a detailed look at how the HTML image tag works, why the alt attribute is essential, and how to properly manage image dimensions and turn images into functional links.

1. Basic Structure: The <img> Tag, src, and alt Attributes

Unlike most HTML elements, the image tag <img> is self-closing (it has no closing tag </img>). For proper functionality, it requires at least two key attributes: src and alt.

Basic syntax example:

<img src="images/my-computer.jpg" alt="A modern laptop on a work desk">

Code breakdown:

• <img> – The tag used to display an image on a web page.
• src="..." – The source attribute, which specifies the path to the image file (local path or full URL).
• alt="..." – The alternative text attribute, which contains a descriptive text of the image.

2. Why Is the ALT Attribute So Extremely Important?

The alt attribute is often overlooked or filled with meaningless text, which is a major mistake. It serves three essential functions:

• Accessibility: Blind and visually impaired users use screen readers. The reader will read the content of the alt attribute aloud so they can understand what the image displays.
• Display on error: If the image fails to load for any reason (wrong path, deleted file), the text from the alt attribute will be displayed in place of the image.
• SEO (Search Engine Optimization): Google search crawlers cannot "see" images like humans do. Through the alt attribute, they understand what is in the image and index it accordingly in search results.

3. Setting Image Dimensions (width and height)

We can precisely set the width (width) and height (height) of images in pixels (px) or percentages (%). Specifying dimensions correctly prevents layout shifts during page loading (known as CLS - Cumulative Layout Shift).

<!-- Specifying dimensions in pixels -->
<img src="images/logo.png" alt="Company logo" width="300" height="150">

<!-- Responsive width in percentage for adaptive design -->
<img src="images/banner.jpg" alt="Ad banner" style="width: 100%; height: auto;">

Tip: If you specify only the width, the browser will adjust the height automatically, preserving the correct aspect ratio of the image.

4. Image as a Link (Clickable Image)

We can easily convert an image into a clickable button or a link to another subpage. We do this by wrapping the <img> tag inside a link tag <a>.

<a href="https://vadnica.org" target="_blank">
    <img src="images/vadnica-button.png" alt="Visit the homepage Vadnica.org" width="200" height="50">
</a>

5. Support for Various Image Formats

In web development, we most commonly encounter the following image formats:

• JPG / JPEG: Excellent for photos with rich colors and details.
• PNG: Ideal for graphics, logos, and images requiring a transparent background.
• GIF: Used for simple animated images.
• WEBP / AVIF: Modern, highly compressed formats providing superior quality with extremely small file sizes (substantially faster page loading).

Summary

By mastering HTML images, you have taken a major step towards creating visually appealing and SEO-optimized websites. In the next article, we will take a detailed look at advanced image conversion to the modern AVIF format using the <picture> tag!