Useful HTML image answers cover the image's purpose, its space in the layout and how the browser chooses when and what to load. An image can have correct alternative text and still move the page around if its expected space is missing. Loading every image lazily can also delay the page's most important visual.

The filenames below are local teaching placeholders. Use actual available image files when trying the resource-selection behavior in a browser.

Why declare width and height?

<img src="reading-room-1200.jpg"
     width="1200" height="630"
     alt="Two desks beside the reading-room window"
     fetchpriority="high">
<style>
  img { max-width: 100%; height: auto; }
</style>

The dimensions give the browser information about the image's aspect ratio before the file finishes loading. The CSS lets it fit a smaller container without keeping a fixed 1200-pixel display width. These two parts solve different problems.

Without responsive sizing, a large image can overflow a narrow page. Without useful size information, the browser may not reserve the right space early enough. Test both the initial HTML and the final rendered layout rather than assuming one attribute solves everything.

When should loading=lazy be used?

It is useful for many images that are not immediately needed, such as pictures far below the first screen. The main image a reader sees at the top of the page often deserves a different decision. Delaying that image can delay the largest visible content.

Fetch priority is a hint, not a promise about exact network order or a cure for an oversized file. Compression, source size, request discovery and other competing resources still matter. Measure an actual page before attributing every performance problem to priority.

How do srcset and sizes work together?

<img src="room-800.jpg"
     srcset="room-400.jpg 400w, room-800.jpg 800w, room-1200.jpg 1200w"
     sizes="(max-width: 600px) 100vw, 800px"
     width="1200" height="630"
     alt="The reading room viewed from its doorway">

The width descriptors describe the candidate resources. Sizes describes the intended display slot for the relevant layout conditions. The browser combines that information with its environment to select a resource. It is not simply choosing the file whose number equals the viewport width.

If sizes does not match the real CSS layout, the browser can make a less useful choice. Check the selected resource in a real viewport and use the browser's currentSrc property when investigating which candidate was selected.

How should alt text be written?

Describe the information or function that the image contributes in that context. A meaningful photograph needs a useful description; an image used as a link may need to communicate the link's purpose. A purely decorative image can use an empty alt attribute so it does not add unnecessary spoken content.

Do not insert a target keyword into every alternative text. Repeating the article title can also be unhelpful if the image actually communicates a specific diagram or result. Describe what the reader needs from that particular visual.

What is a useful image-loading test?

  • Use a narrow viewport and check for horizontal overflow.
  • Observe the page before and after the image loads.
  • Check intrinsic and displayed dimensions.
  • Inspect the selected candidate and actual transferred bytes.
  • Decide whether the alternative text matches the visual's purpose.

For a follow-up, place one main image above several gallery thumbnails. Explain why the main image and the thumbnails can have different loading policies. A strong answer connects the decision to reader needs and observed performance, not an absolute rule that all images must be eager or lazy.

References and next practice

developer.mozilla.org — html images

Browse interview topics · Practise a question in Interview Challenge · How to Answer Technical Interview Questions Out Loud