In HTML, images are added using the <img> tag, which is a self-closing (empty) tag — meaning it doesn’t have a closing tag.
1. Basic Syntax
<img src="image.jpg" alt="Description of image">
src→ (Source) The file path or URL of the image.alt→ (Alternative text) Describes the image for screen readers and shows if the image can’t be loaded.
2. Image Source (src)
You can use:
- Relative path (file in same folder):
<img src="photo.jpg" alt="My photo"> - Absolute path (full URL):
<img src="https://example.com/images/photo.jpg" alt="Remote photo">
3. Alternative Text (alt)
- Required for accessibility & SEO.
- Helps visually impaired users with screen readers.
- Example:
<img src="dog.jpg" alt="A brown dog playing with a ball">
4. Optional Attributes
widthandheight→ Set size in pixels (avoid stretching).<img src="cat.jpg" alt="Cat" width="200" height="150">title→ Tooltip text when hovered.<img src="logo.png" alt="Company logo" title="Our Company">loading="lazy"→ Loads image only when needed (improves speed).<img src="large-photo.jpg" alt="Scenery" loading="lazy">
5. Images as Links
You can make an image clickable:
<a href="https://example.com">
<img src="banner.jpg" alt="Click to visit">
</a>
6. Supported Formats
- JPEG/JPG → Good for photos (compressed).
- PNG → Supports transparency.
- GIF → Simple animations.
- SVG → Scalable vector graphics.
- WEBP → Modern format, smaller file size.
7. Example
<img src="mountains.jpg" alt="Snow-covered mountains" width="400" height="250">
