HTML images are used to display pictures on a webpage. The <img> tag is used to add images, and it is a self-closing tag.
<img src="image.jpg" alt="Description of Image">
✔ src (source) → Specifies the image file path.
✔ alt (alternative text) → Describes the image for accessibility and if the image fails to load.
<img src="photo.jpg" alt="My Photo">
✔ The image must be in the same folder as the HTML file.
<img src="images/photo.jpg" alt="My Photo">
✔ The image is inside an "images" folder.
<img src="https://www.example.com/image.jpg" alt="Online Image">
✔ The image is loaded from an external website.
You can wrap an image inside a link (<a>) to make it clickable.
<a href="https://www.example.com">
<img src="photo.jpg" width="200" alt="Clickable Image">
</a>
✔ Clicking the image opens the linked webpage.
A favicon is a small image that appears in the browser tab.
<link rel="icon" type="image/png" href="favicon.png">
✔ Add this inside the <head> section.
| Format | Usage | Supports Transparency? |
|---|---|---|
| JPG/JPEG | Best for photos, small file size | ❌ No |
| PNG | Best for graphics, supports transparency | ✅ Yes |
| GIF | Used for animations | ✅ Yes |
| SVG | Best for icons & logos (scalable) | ✅ Yes |
✔ Use JPG for photos, PNG for transparency, and SVG for icons/logos.
| Feature | Example |
|---|---|
| Basic Image | <img src="photo.jpg" alt="My Photo"> |
| External Image | <img src="https://example.com/image.jpg" alt="Online Image"> |
| Resized Image | <img src="photo.jpg" width="300" height="200"> |
| Clickable Image | <a href="https://example.com"><img src="photo.jpg"></a> |
| Favicon | <link rel="icon" href="favicon.png"> |
| Background Image | background-image: url("bg.jpg"); |
✔ Always include alt text for accessibility.
✔ Use responsive images for mobile-friendliness.
✔ Optimize images for faster loading speeds.
✔ Use the right image format for best quality.