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?

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?

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?

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>