HTML Images

Subject: html

HTML Images

Images are an essential part of modern web development, adding visual appeal, conveying information, and enhancing user engagement. In HTML, images are displayed using the <img> tag.

🖼️ What is an HTML Image?

The <img> tag is used to embed images into a web page. It is a self-closing tag, meaning it does not require a separate closing tag.

Syntax:

🚀 Try it in Compiler
  • src: Path or URL to the image file
  • alt: Alternative text for accessibility and SEO

Example:

🚀 Try it in Compiler

This displays an image with a specified width and height.

📌 Important <img> Attributes

  • src: Image path or URL
  • alt: Alternative text for screen readers and fallback
  • width / height: Define dimensions (can also be styled via CSS)
  • title: Tooltip shown on hover
  • loading="lazy": Defers loading until image is in view

♿ Why Use the alt Attribute?

  • Accessibility: Screen readers read alt text
  • SEO: Helps search engines understand image context
  • Fallback: Shown if image fails to load

📱 Responsive Images with CSS

Use max-width and height: auto to ensure images scale properly:

🚀 Try it in Compiler

🔗 Linking Images

Make images clickable by wrapping them with <a>:

🚀 Try it in Compiler

🧾 Common Image Formats

  • JPEG: Great for complex photos
  • PNG: Supports transparency, ideal for logos
  • GIF: For animations
  • SVG: Scalable, ideal for logos and icons

🚀 Lazy Loading

Improve performance with lazy loading:

🚀 Try it in Compiler

🎨 Example: Styled Image with Internal CSS

🚀 Try it in Compiler

✅ Key Takeaways

  • Use <img> with src to embed images
  • Always include alt text for accessibility and SEO
  • Use CSS or width/height attributes to control image size
  • Make images responsive with max-width: 100%
  • Use loading="lazy" to improve performance
  • Wrap with <a> for clickable images
Next: HTML Image Tag