Image Tag

Images bring life to web pages by making content more engaging and easier to understand. In HTML, images are embedded using the <img> tag.

Basic Syntax for Embedding Images

The <img> tag is a self-closing tag, which means it doesn’t have a separate closing tag. You must include at least two important attributes: src and alt.

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

src: This attribute defines the path to the image file. It can be a local path or a full URL.
alt: This attribute provides a text description of the image for screen reader and in case the image fails to load.

Image Formats Supported

The <img> tag works with common formats like:

.jpg / .jpeg – great for photographs
.png – supports transparency
.gif – allows simple animations
.webp – optimized for fast loading

Image Size Settings

Although modern web design prefers CSS for controlling image size, you can still use width and height in HTML for quick layout control:

				
					<img fetchpriority="high" decoding="async" src="images/banner.png" alt="Website Banner" width="600" height="200" />

This sets the image’s size directly and helps browser load pages more efficiently by reserving space for the image before it appears.

Why Width and Height Matter

Defining width and height helps with performance. It reduces layout shifts (content moving during page load), improving user experience and your site’s Cumulative Layout Shift (CLS) score – a metric google uses in search rankings.

Still, for more flexibility, using CSS like below is recommended:

				
					img {
  width: 100%;
  height: auto;
}

Summary

Use <img> to embed images.
Always include src for the image path and alt for accessibility.
Set width and height to help with loading performance – but manage styles with CSS when possible.
Images enhance content but should always load fast and look good on different screen sizes.