Images in HTML — Interview Questions & Answers

The `<img>` Tag — Basics

Ques: What is the purpose of the <img> tag?

Ans: The <img> tag is used to embed images in an HTML page. It is an inline element.

Ques: What are the main attributes of the <img> tag?

Attribute	Description	Example
`src`	Image file path or URL	`src="photo.jpg"`
`alt`	Alternative text for accessibility or when image fails to load	`alt="A scenic view"`
`width`	Image width (in px or %)	`width="300"`
`height`	Image height (in px or %)	`height="200"`
`title`	Tooltip text shown on hover	`title="Mountain view"`

Ques: What is the alt attribute used for?

Ans:

Shows descriptive text if image fails to load.
Helps visually impaired users via screen readers.
Improves SEO.

Image Paths — Absolute vs Relative

Ques: What is the difference between absolute and relative image paths?

Type	Example	Description
Absolute	`https://example.com/images/logo.png`	Full URL (external resource)
Relative	`images/logo.png`	Local path (relative to HTML file)

Ques: What happens if you set only width or height?

Ans: The image maintains its aspect ratio automatically.

Adding a Tooltip

Ques: How do you add a tooltip to an image?

Ans: Using the title attribute:

<img src="sunset.jpg" title="Beautiful Sunset">

Clickable Images

Ques: How can you make an image clickable?

Ans: Wrap the <img> inside an <a> tag:

<a href="home.html"><img src="logo.png" alt="Logo"></a>

Image Formats

Ques: What are common image file formats supported in HTML?

Format	Type	Use
`.jpg / .jpeg`	Raster	Photos (high compression)
`.png`	Raster	Transparent images
`.gif`	Raster	Simple animations
`.svg`	Vector	Scalable icons and illustrations
`.webp`	Modern	High quality + smaller file size

Ques: Which format is best for icons and logos?

Ans: SVG, because it’s scalable without losing quality.

Responsive Images

Ques: How can you make an image responsive in HTML/CSS?

img {
  max-width: 100%;
  height: auto;
}

Ques: What does max-width: 100% do?

Ans: It ensures the image scales down with the container size — perfect for mobile devices.

`<figure>` and `<figcaption>`

Ques: What is the purpose of <figure>?

Ans: It groups media content (like images) with an optional caption.

Example:

<figure>
  <img src="mountain.jpg" alt="Mountain view">
  <figcaption>A view from the top</figcaption>
</figure>

Ques: Why use <figure> and <figcaption>?

Ans: For semantic structure and accessibility — helps search engines and assistive tech understand the content better.

`<picture>` Tag — Advanced Responsive Images

Ques: What is the <picture> tag used for?

Ans: It allows different image sources for different devices or screen sizes.

Example of <picture> with multiple sources:

<picture>
  <source srcset="image-large.jpg" media="(min-width: 800px)">
  <source srcset="image-small.jpg" media="(max-width: 799px)">
  <img src="image-default.jpg" alt="Responsive image">
</picture>

Lazy Loading

Ques: What is lazy loading in images?

Ans: It delays image loading until the image appears in the viewport, improving performance.

Ques: How to enable lazy loading?

<img src="photo.jpg" alt="Lazy load example" loading="lazy">

Image Maps

Ques: What is an image map?

Ans: It allows you to define clickable areas on a single image.

Example:

<img src="worldmap.jpg" usemap="#worldmap">

<map name="worldmap">
  <area shape="rect" coords="34,44,270,350" href="usa.html" alt="USA">
  <area shape="circle" coords="477,300,50" href="india.html" alt="India">
</map>

HTML Handbook