HTML Images

Learn how to display pictures and graphics on your web pages using the <img> tag.

What is an HTML Image?

HTML Images allow you to add visual content to your website. Images make websites more attractive and informative.

  • Display photos, icons, or illustrations
  • Enhance user engagement
  • Support content visually for better understanding

Real-Life Example: Like pictures in books, images in websites help users understand content faster.

Common <img> Attributes

  • src – URL of the image
  • alt – Alternative text for accessibility
  • width – Width of the image
  • height – Height of the image
  • title – Tooltip text when hovering
  • loading – Lazy loading with lazy or eager

HTML Image Examples

Example 1: Basic Image


<img src="logo.png" alt="CrackEase Company Logo">

Example 2: Image with Width and Height


<img src="banner.jpg" alt="Website Banner" width="600" height="200">

Example 3: Image with Tooltip


<img src="icon.png" alt="Settings Icon" title="Click to open settings">

Making Images Responsive

To make images adjust automatically on different screen sizes, use CSS with max-width and height: auto.

Example: Responsive Image CSS


<img src="banner.jpg" alt="Responsive Banner" class="responsive-img">

<style>
.responsive-img {
    max-width: 100%;
    height: auto;
}
</style>

Best Practices

  • Always provide alt text for accessibility
  • Use optimized images to reduce page load time
  • Prefer modern formats like WebP for smaller size
  • Make images responsive for all devices
  • Use descriptive title for better UX

Pro Tip: Well-optimized and accessible images improve SEO, UX, and website performance.