HTML Images

Images make websites look good. They can show products, photos, diagrams, or just add some visual flavor to your page.

HTML Images Syntax

The <img> tag is used to add images to a web page. Images are not actually inserted into the page. Instead, the browser creates a space for the image and loads it from a file somewhere else.

The <img> tag is an empty tag. It has no closing tag. It uses attributes to tell the browser what image to load and how to show it.

There are two required attributes for the <img> tag:

• src – The path to the image file
• alt – A text description of the image (for when it cannot load)

<img src="image-file.jpg" alt="Description of the image">

The src Attribute

The src attribute tells the browser where to find the image file. This can be a file on your own website or an image somewhere else on the internet.

When the page loads, the browser goes to that location, downloads the image, and shows it in the space you created.

The alt Attribute (Very Important)

The alt attribute provides a text description of the image. It shows up if the image cannot load for some reason. This could be a slow internet connection, a typo in the file name, or the image file being moved or deleted.

The alt attribute is also very important for accessibility. People who use screen readers (software that reads web pages out loud) hear the alt text. It tells them what the image shows.

Always write alt text that actually describes the image. For a photo of your dog, write alt="My golden retriever playing in the park". Do not just write “dog” or leave it empty.

Image Size (Width and Height)

You can control how big an image appears on the page. There are two ways to do this.

Method 1: Using the style attribute (recommended)

Method 2: Using the width and height attributes

The style attribute is usually better because it prevents external CSS from overriding your image sizes.

Images in Another Folder

If your images are in a different folder than your HTML file, you need to include the folder name in the src attribute.

my-website/
├── index.html
└── images/
    └── my-pic.jpg

If your HTML file is in the main folder and your image is inside a folder called “images”, the path would be:

<img src="images/my-pic.jpg" alt="My picture">

Images from Another Website

You can also use images from other websites by using the full URL (absolute path).

Animated Images (GIFs)

You can use animated GIFs just like normal images. The browser will play the animation automatically.

Image as a Link

You can turn any image into a clickable link. Just wrap the <img> tag inside an <a> tag.

Image Floating (Text Wrapping Around Images)

You can make text wrap around an image using the CSS float property.

float:right makes the image go to the right side. float:left makes it go to the left. The text fills in the space around it.

Common Image Formats

These image formats work in all modern browsers:

Quick Summary

• Use <img> to add images. It has no closing tag.
• src tells the browser where the image is located.
• alt provides a text description. Always include it.
• Set width and height to prevent page flickering.
• Use relative paths for images inside your own website.
• Wrap an <img> in an <a> tag to make it clickable.
• Use float:left or float:right to wrap text around images.
• Keep your image files small for faster loading.

What Just Happened? Let Me Explain

• Images make your site look professional and engaging.
• The alt attribute is not optional. It helps with accessibility and shows something when images break.
• Always resize images before uploading them. Do not use HTML to shrink a huge 5000px image down to 200px. It still loads the huge file and slows down your page.
• For your own projects, save images inside an “images” folder next to your HTML file.
• Use free image sites like Unsplash or Pexels for high-quality photos you can use without copyright issues.

HTML Image Reference

Here are the tags and attributes we covered in this chapter: