HTML EXAMPLE · WORKING REFERENCE

Responsive Image

srcset aur sizes se browser ko viewport ke according suitable image candidate choose karne do.

Working code

<img
  src="image-800.jpg"
  srcset="image-480.jpg 480w,
          image-800.jpg 800w,
          image-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="Student learning web development"
  width="800"
  height="450"
>

Run Code ▶

Preview

Responsive image area
Actual preview needs the referenced image files.

How it works

srcset multiple image candidates aur unki intrinsic widths describe karta hai.

sizes expected rendered width hint deta hai; browser suitable resource choose karta hai. src fallback hai aur meaningful alt text image purpose describe karta hai.

Try Yourself

<img
  src="photo-large.jpg"
  srcset="photo-small.jpg 480w, photo-large.jpg 960w"
  sizes="(max-width: 600px) 100vw, 600px"
  alt="Example landscape"
  width="960"
  height="540"
>

Try in Playground ▶

Learn this concept

Read related HTML Tutorial →