HTML Images

📷 Introduction to HTML Images

Images are a vital part of modern web content — they enhance visual appeal, convey meaning, and create engaging experiences. In HTML, images are embedded using the <img> tag. This tag is self-closing and does not wrap any content.

>>“A picture is worth a thousand words — and in HTML, it's just one tag away!” 🧠

🔤 Basic Image Syntax

Basic HTML Image

<img src="image.jpg" alt="Description of image" />

Here's what each attribute means:

  • src – The image file path or URL (required) 🌐
  • alt – Text shown when the image fails to load (required for accessibility) ♿

Note

💡 Always use the alt attribute for better SEO and screen reader support!

📏 Setting Width and Height

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

Image with Width and Height

<img src="dog.jpg" alt="Cute Dog" width="300" height="200" />

🎨 Styling Images with CSS

CSS Styling for Images

img {
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  max-width: 100%;
}

This ensures images are responsive and look modern ✨

🔗 Clickable Images

Wrap the image in an anchor tag to make it a link:

Clickable Image Example

<a href="https://example.com">
  <img src="thumb.jpg" alt="Click me!" />
</a>

🖼️ Image Formats

FormatUsage
.jpg / .jpegPhotos, small file size
.pngTransparency support, high quality
.gifSimple animations
.webpModern, small & fast
.svgVector graphics, resolution-independent

📦 Images from External URLs

Using Image URL

<img src="https://via.placeholder.com/150" alt="Placeholder Image" />

Note

⚠️ Always make sure you have permission to use external images to avoid copyright issues.

🧪 Practical Example

Image Card Example

<div class="profile">
  <img src="avatar.png" alt="User avatar" width="100" />
  <h3>Jane Doe</h3>
  <p>Frontend Developer</p>
</div>
>>“Images can communicate complex ideas faster than text — use them wisely.” 🖌️

📚 Further Reading