OnlineCBT Logo OnlineCBT
HTML Tutorial
HTML · LESSON 17

Images in HTML

By Ratan Updated: 16 Oct 2026

Embed images into web pages using the <img> tag, src, and alt attributes.

Level: Beginner to Advanced
Duration: ~60 Mins Deep-Dive

1. The Element

In HTML, images are embedded using the self-closing element. Images are not inserted into the HTML document itself; instead, the browser fetches the image file from the specified path and renders it inline.

NEET UG Examination Banner

2. The Essential alt Attribute

The alt (alternative text) attribute is mandatory for standard-compliant HTML:

  • Accessibility: Screen readers read the alt description to visually impaired students.
  • Network Failure: If the image fails to load (broken URL or weak cellular connection), the browser displays the alt text in its place.
  • Search Engine Optimization (SEO): Web crawlers (Googlebot) index image content based on the alt attribute.

3. Specifying width and height for Layout Stability

Always specify the native dimensions (or aspect ratio) of images in HTML. This reserves physical space before the image downloads, completely eliminating Cumulative Layout Shift (CLS)—a critical Google Core Web Vital metric.

4. Native Lazy Loading with loading="lazy"

Modern browsers natively support deferred loading for off-screen images. By adding loading="lazy", the browser waits until the user scrolls close to the image before making network requests, dramatically boosting initial page load speeds:

Rank 1 Student Felicitation

📝 Live Lesson Practice

HTML/CSS JavaScript Python C++ C PHP
⌨️ Practice Inputs (लाइव इनपुट भरें) (खाली होने पर RED, भरने पर GREEN underline)
💻 Code Editor (Monaco VS Code Engine)
👀 Live Preview
Address Contact

+91 7877547686

E-mail

onlinecbtportal@gmail.com

Helpline Number

+91 7877547686


Click To Download
Get it on Google Play

ऐप डाउनलोड करने
के लिए Google Play पर
उपलब्ध है

WhatsApp Chat