HTML — Images

Overview

Images improve content. Always provide alt text for accessibility.

What you'll learn

• img basics
• alt attribute
• responsive images
• lazy loading

Syntax

<img src="pic.jpg" alt="Description">

Example

<!-- Basic image -->
<img src="/public/img/sample.jpg" alt="A sample image" width="420">

<!-- Responsive image -->
<img src="/public/img/sample.jpg" alt="Responsive" style="max-width:100%;height:auto">

<!-- Lazy loading -->
<img src="/public/img/sample.jpg" alt="Lazy" loading="lazy">

Notes

• Use meaningful alt text.
• Use max-width:100% for responsiveness.

  Try: Open the Playground: /en/playground/html