🖼️ HTML Images
Learn how to embed and optimize images
📚 What is the Image Tag?
📌 Key Concept
The <img> tag is used to embed images in HTML documents. It's an empty element (self-closing) that displays referenced images on a webpage.
Image Tag Attributes
| Attribute | Description | Required |
|---|---|---|
| src | Path to the image file | Yes |
| alt | Alternative text if image can't load | Yes (Best Practice) |
💻 Code Examples
📝 Example 1: Basic Image
<img src="image.jpg" alt="A beautiful sunset" >
▶️ Output:
📝 Example 2: Image with Attributes
<img src="photo.jpg"
alt="Profile picture"
width="200"
height="200"
title="Click to enlarge">
▶️ Output:
📝 Example 3: Image with Figure Caption
<figure>
<img src="landscape.jpg" alt="Mountain landscape">
<figcaption>Beautiful mountain scenery</figcaption>
</figure>
▶️ Output:
✨ Best Practices
📌 Image Optimization Tips
- Always use alt text: Improves accessibility and SEO
- Optimize file sizes: Use compression tools to reduce loading time
- Use appropriate formats: JPG for photos, PNG for graphics with transparency, WebP for better compression
- Specify dimensions: Helps prevent layout shift
- Use responsive images: Use srcset for different screen sizes
- Lazy load images: Use loading="lazy" for below-the-fold images
✍️ Practice Assignments
🎯 Assignment 1: Gallery Page
Easy- Create a photo gallery with at least 6 images
- Use proper alt text for all images
- Add descriptive captions
🎯 Assignment 2: Product Showcase
Medium- Create a product showcase page with multiple images
- Include responsive image sizing
- Add product descriptions with images
🎯 Assignment 3: Responsive Image Gallery
Hard- Create responsive gallery using picture element
- Use srcset for different screen sizes
- Implement lazy loading
🎓 Key Takeaways
- Always use the <img> tag to embed images
- Always provide descriptive alt text
- Specify width and height to prevent layout shift
- Optimize images for web performance
- Consider responsive images for different devices