HTML Images

Images are an essential part of web pages. They make websites visually appealing, convey information quickly, and improve user experience.we use the <img> tag to show images on a web page. It doesn’t need a closing tag

HTML Image Syntax

<img src="image_path" alt="Alternate text" width="200" height="150" />

Explanation of Attributes:

• src (Source): Defines the image location (file path or URL).
• alt (Alternative text): Describes the image if it cannot load; also used by screen readers for accessibility.
• width and height: Defines the size of the image (in pixels or percentages).
• Self-closing tag: <img> does not require </img>.

Inserting an Image

To insert an image in HTML, we use the <img> tag. The most important attribute is src, which tells the browser where the image file is located, and alt, which provides text if the image can’t load.

Example

<img src="cat.jpg" alt="Cute white cat" />

Notes:

• Image names are case-sensitive.
• Always use the correct file extension (.jpg, .png, .gif, etc.).
• <img> is an empty tag (no closing tag).

Image Path (Location)

When adding an image in HTML, the src attribute tells the browser where to find the image file. This is called the image path.

• If the image is in the same folder as your HTML file, just write the file name:
<img src="cat.jpg" alt="Cat" />
• If the image is inside another folder, write the folder name with the file:
<img src="images/cat.jpg" alt="Cat" />
• For images on the internet, use the full URL:
<img src="https://example.com/cat.jpg" alt="Cat" />

Setting Image Size

In HTML, you can control how big or small an image looks by setting its width and height. These can be written in pixels (px) or as a percentage (%) of the page.

<img src="cat.jpg" alt="Cute Cat" width="200" height="150" />

Tip: It’s better to use CSS for resizing, because it gives you more control and keeps your HTML cleaner:

<img src="cat.jpg" alt="Cute Cat" style="width:200px; height:150px;" />

Adding Border to Image

In older versions of HTML, people used the border attribute inside the tag to add borders around images. But today, that method is outdated. The modern and recommended way is to use CSS for styling borders, because it’s more flexible and keeps design separate from content.

Old way:

<img src="cat.jpg" alt="Cat" border="3" />

Modern way (CSS):

<img src="cat.jpg" alt="Cat" style="border: 3px solid black; border-radius: 10px;" />

Image Alignment

In modern HTML, if you want to control where an image appears on a page, you use CSS. There are two common ways:

• float → lets the image move to the left or right, and the text will wrap around it.
• text-align → is used on the parent element (like a div) to center, left, or right-align the image.

<img src="cat.jpg" alt="Cat" style="float:right; margin:10px;" />
<p>This text will wrap around the image.</p>

Or center using CSS

<div style="text-align:center;" >
<img src="cat.jpg" alt="Centered Cat" />
</div>

Animated Images

HTML allows you to show animated images such as GIFs in the same way you add normal images. A GIF plays automatically when loaded and doesn’t need any special code.

Tip: You can also use CSS animations or animated SVGs for smoother and more customizable effects, but GIFs are the easiest way to add simple animations.

<img src="Cute-cat.gif" alt="Cute Cat" width="200" />

Responsive Images

Responsive images adjust size automatically based on screen size.

<img src="cat.jpg" alt="Responsive Cat" style="max-width:100%; height:auto;" />

Image as a Link

You can make an image clickable:

<a href="https://google.com" >
<img src="google.png" alt="Google Logo" width="120" />
</a>

Image Maps (Clickable Areas)

You can define clickable areas inside one image.

<img src="world-map.jpg" usemap="#worldmap" alt="World Map" />
<map name="worldmap">
<area shape="rect" coords="34,44,270,350" href="usa.html" alt="USA"/>
<area shape="circle" coords="477,300,100" href="europe.html" alt="Europe"/>
</map>

Background Images (CSS)

Instead of <img>, you can set an image as a background.

<div style="background-image:url('bg.jpg'); height:300px; background-size:cover;">
<h2>Text on background</h2>
</div>