HTML Images Guide

---

    

---

    

HTML Images Guide
Images are an essential part of web design. In HTML, images are added using the tag, which allows you to display visuals like logos, photos, icons, and illustrations.

1. Image Tag (<img>)

The <img> tag is used to embed images in a webpage. It is a self-closing tag, meaning it does not need a closing tag.

<img src="image.jpg" alt="A beautiful sunset">

2. src Attribute (Image Source)

The src attribute specifies the file path or URL of the image.

✅ Example with local file:

<img src="images/photo.jpg" alt="Photo">



<img src="https://example.com/logo.png" alt="Website Logo">


📌 You can use relative paths (within your project) or absolute URLs (from the internet).



3. alt Attribute (Alternative Text)


The alt attribute provides a text description of the image:



Displays if the image fails to load.



Helps visually impaired users using screen readers.



Improves SEO.



<img src="dog.png" alt="A golden retriever puppy">


4. Image Dimensions (Width & Height)


You can control image size using the width and height attributes (in pixels) or through CSS.



✅ Inline size:


<img src="cat.jpg" alt="A cat" width="300" height="200">


✅ CSS size (preferred for responsive design):


<img src="cat.jpg" alt="A cat" style="width: 100%; height: auto;">


5. Common Image Formats


Format	Description	Best For

JPEG (.jpg/.jpeg)	Compressed, good quality	Photos, realistic images

PNG (.png)	Lossless, supports transparency	Logos, icons, sharp images

GIF (.gif)	Supports animation	Simple animations, small icons

SVG (.svg)	Vector graphics, scalable	Icons, illustrations, logos

WEBP (.webp)	Modern, compressed	Web-optimized images (smaller size, good quality)

Full Example:


<h2>Our Team</h2>

<img src="images/jane.jpg" alt="Jane Doe, Team Leader" width="250" height="300">



<h3>Contact Us</h3>

<img src="https://example.com/email-icon.png" alt="Email icon" style="width: 40px;">

    Date: 2025-04-06 00:00:00.000000