Images

Question 1

What is the difference between decorative and content images?

Answer 1

• Decorative images are applied via CSS (e.g., background gradients, buttons).
• Content images add context and are embedded using HTML.

Question 2

What does the src attribute in an <img> element do?

Answer 2

It specifies the image source (file path or URL) for the browser to fetch and render the image.

Question 3

Why is the alt attribute important for an image?

Answer 3

The alt attribute describes the image, important for accessibility (assistive tech) and displayed if the image doesn’t load.

Question 4

What is the purpose of the srcset attribute in an <img> element?

Answer 4

It provides multiple image sources and serves the appropriate image based on device resolution, browser capabilities, and viewport size.

Question 5

How does the sizes attribute work with srcset in an <img> element?

Answer 5

The sizes attribute defines the image size for specific media queries (e.g., (max-width: 800px) 400px) to ensure responsive image selection.

Question 6

What is the <picture> element used for in HTML?

Answer 6

It is used to contain multiple <source> elements with different image options, and an <img> element as a fallback.

Question 7

What role does the height and width attributes play in image performance?

Answer 7

Setting height and width helps define the image aspect ratio and reduces Cumulative Layout Shift (CLS).

Question 8

What does the loading="lazy" attribute do?

Answer 8

It defers the loading of the image until it enters the viewport, saving bandwidth and improving page load time.

Question 9

How can you improve image accessibility for SVG files?

Answer 9

Use the role="img" attribute for SVG images to ensure proper accessibility.

Question 10

What is the significance of the role="img" attribute for SVG images?

Answer 10

It indicates that the SVG is an image and helps with proper accessibility interpretation.

Question 11

How do srcset and sizes work together in responsive image design?

Answer 11

• srcset suggests multiple image files.
• sizes defines which image size to use based on viewport size and screen resolution.

Question 12

What are the benefits of using the loading="lazy" attribute on images?

Answer 12

It defers image loading until the image is about to enter the viewport, reducing initial page load time and saving bandwidth.

Question 13

Why is it important to set an aspect ratio for images?

Answer 13

Defining the aspect ratio prevents layout shifts and ensures that the space for the image is reserved, improving visual stability.