Skip to main content
WPFSharp Academy
Syllabus

HTML Images (Alt Text, Lazy Loading, Formats)

Badar KhalilUpdated September 27, 2026 2 min read
Share X Facebook LinkedIn WhatsApp

HTML Images (Alt Text, Lazy Loading, Formats)

HTML images, added with the <img> tag, are one of the most important elements for user engagement, SEO, and page performance. In 2026, image optimization is a core web development skill due to its direct impact on Core Web Vitals and search rankings.

Basic Image Syntax

Code
<img src="photo.jpg" alt="A scenic mountain view at sunset">

<img> is a void element — it never has a closing tag.

The alt Attribute: Critical for SEO & Accessibility

The alt attribute provides a text description of an image. It is essential for:

  • Accessibility — screen readers announce the alt text to visually impaired users.
  • SEO — search engines use alt text to understand and index images (Google Images traffic).
  • Fallback — if the image fails to load, the alt text displays instead.
Code
<!-- Good: descriptive alt text -->
<img src="golden-retriever.jpg" alt="Golden retriever puppy playing in a park">

<!-- Bad: missing or vague alt text -->
<img src="golden-retriever.jpg" alt="image">

For purely decorative images with no informational value, use an empty alt="" so screen readers skip them.

Controlling Image Size

Code
<img src="logo.png" alt="Company logo" width="200" height="100">

Always specify width and height (or use CSS aspect-ratio) to prevent Cumulative Layout Shift (CLS), a key Core Web Vitals metric.

Native Lazy Loading (Modern Performance Best Practice)

The loading="lazy" attribute tells the browser to defer loading off-screen images until the user scrolls near them — a major, trending performance optimization built directly into HTML5:

Code
<img src="large-photo.jpg" alt="Product photo" loading="lazy">

Responsive Images with srcset

Modern responsive design uses the srcset attribute to serve different image resolutions depending on screen size and device pixel ratio:

Code
<img src="photo-800w.jpg"
     srcset="photo-400w.jpg 400w, photo-800w.jpg 800w, photo-1200w.jpg 1200w"
     sizes="(max-width: 600px) 400px, 800px"
     alt="Responsive product photo">

Modern Image Formats: WebP & AVIF

Trending, next-generation formats like WebP and AVIF offer significantly smaller file sizes than JPEG/PNG with comparable quality. Use the <picture> element to provide fallbacks:

Code
<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Fallback photo description">
</picture>

Key Takeaways

  • <img> is a void element requiring both src and alt.
  • Descriptive alt text is essential for SEO and accessibility.
  • loading="lazy" improves page performance for off-screen images.
  • srcset and <picture> enable responsive, modern-format images.
Try it Yourself HTML
Output

Press Run to execute.

Try it Yourself HTML
Output

Press Run to execute.

Exercise: Optimize an Image TagHTML

Add a descriptive alt attribute, width and height attributes (600x400), and lazy loading to this image tag.

Try it Yourself HTML
Output

Press Run to execute.

This is a self-check — compare your result with the expected output above.

Was this page helpful?