HTML Images Tutorial for Beginners

What Are HTML Images?

HTML images allow you to display photographs, icons, illustrations, logos, diagrams, and graphics on a web page. Images are added using the <img> element.

Unlike most HTML elements, the image tag is a void element, meaning it does not require a closing tag.

<img src="html-logo.png" alt="HTML Logo" />

HTML Image Syntax

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

• src specifies the image file location.
• alt provides alternative text.
• width defines image width.
• height defines image height.

HTML Images Cheatsheet

The following table contains the most commonly used HTML image patterns and attributes every developer should know.

Image Source Paths

The src attribute tells the browser where the image file is located.

Relative Path

<img src="images/html-logo.png" alt="HTML Logo" />

Absolute URL

<img
  src="https://example.com/images/html-logo.png"
  alt="HTML Logo"
/>

Use relative paths for images within your website and absolute URLs for external resources.

Why the Alt Attribute Is Important

The alt attribute provides alternative text when an image cannot be displayed. It is also used by screen readers and search engines.

<img
  src="html-tutorial.png"
  alt="HTML tutorial homepage screenshot"
/>

Good Alt Text

alt="HTML tutorial homepage screenshot"

Bad Alt Text

alt="image"

Always describe the image clearly and naturally.

Set Image Width and Height

Providing width and height helps browsers reserve space before the image loads, reducing layout shifts.

<img
  src="html-logo.png"
  alt="HTML Logo"
  width="400"
  height="200"
/>

Responsive Images

Responsive images automatically adapt to different screen sizes.

<img
  src="html-tutorial.jpg"
  alt="HTML Tutorial"
  style="max-width:100%; height:auto;"
/>

This ensures images display properly on desktops, tablets, and mobile devices.

HTML Picture Element

The <picture> element allows browsers to choose the most appropriate image based on screen size or device capabilities.

<picture>
  <source
    media="(max-width: 768px)"
    srcset="mobile-image.jpg"
  />

  <img
    src="desktop-image.jpg"
    alt="Responsive image example"
  />
</picture>

Clickable Images

You can place an image inside an anchor element to create a clickable image.

<a href="/tutorials/html/">
  <img
    src="html-logo.png"
    alt="HTML Tutorial"
  />
</a>

Image Captions with Figure and Figcaption

Use <figure> and <figcaption> to associate captions with images.

<figure>
  <img
    src="html-logo.png"
    alt="HTML Logo"
  />

  <figcaption>
    Official HTML5 Logo
  </figcaption>
</figure>

Lazy Loading Images

Lazy loading delays image downloads until users scroll near them, improving page performance.

<img
  src="large-image.jpg"
  alt="Large image"
  loading="lazy"
/>

Lazy loading is recommended for most images below the fold.

HTML Images for SEO

Image optimization helps search engines understand image content and improves page performance.

• Use descriptive file names.
• Add meaningful alt text.
• Compress images before uploading.
• Use modern formats like WebP.
• Specify width and height.
• Use lazy loading when appropriate.
• Keep image file sizes small.

Good Example

<img
  src="html-images-tutorial.webp"
  alt="HTML images tutorial example"
/>

Bad Example

<img
  src="img123.jpg"
  alt="image"
/>

Accessible HTML Images

Accessible images help users who rely on screen readers and assistive technology.

• Always provide meaningful alt text.
• Use empty alt text for decorative images.
• Provide captions when useful.
• Avoid embedding important text inside images.

<img
  src="divider.png"
  alt=""
/>

Decorative images should use empty alt text so screen readers ignore them.

Common HTML Image Mistakes

• Missing alt attributes.
• Uploading extremely large image files.
• Using generic file names.
• Using images instead of text content.
• Not specifying image dimensions.
• Using decorative images without empty alt text.
• Ignoring responsive image techniques.

Key Takeaways

• HTML images are added using the <img> tag.
• The src attribute defines the image source.
• The alt attribute is essential for SEO and accessibility.
• Responsive images improve mobile experiences.
• Lazy loading improves performance.
• Descriptive file names and alt text improve image SEO.
• Use figure and figcaption when captions are needed.