Home >Web >HTML reference – elements and attributes >img – image

img – image

<img src="image.jpg" alt="description" width="500" height="333">

An image in the content of the page. The URL (src) and the text alternative (alt) are required. It pays to always give the width and height dimensions – the browser uses them to reserve space for the image before it loads, so the page does not jump.

Default display: display: inline
End tag: none – a void element, it has no content and no end tag
Content: nothing
Where it can be used: anywhere phrasing content is allowed; in picture as the last child
DOM interface: HTMLImageElement

Attributes

src – the URL of the image.
alt – the text alternative for screen readers, search engines and an image that fails to load. Empty for a purely decorative image (alt="").
width, height – the intrinsic dimensions in pixels (without a unit). The browser calculates the aspect ratio from them even when CSS changes the size.
srcset, sizes – several sizes of the same image; the browser chooses by the window width and the pixel density of the display.
loading – lazy: the image loads only when it gets close to the viewport; eager (default): straight away.
fetchpriority – high or low: the download priority (a large image at the top of the page gets high).
decoding – async: decoding does not delay rendering the rest of the page.
usemap – an image map (#name of a map element); crossorigin, referrerpolicy.

Examples

An image with dimensions and a description, scaled down in CSS to the width of its parent:

<img class="photo" src="/img/slider.jpg" alt="A white castle with two towers behind a green lawn" width="500" height="333">

.photo {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

result

A white castle with two towers behind a green lawn

Three sizes of the same image – a narrow display downloads a smaller file:

<img src="/img/castle-800.jpg"
     srcset="/img/castle-400.jpg 400w, /img/castle-800.jpg 800w, /img/castle-1600.jpg 1600w"
     sizes="(max-width: 600px) 100vw, 600px"
     alt="A white castle with two towers" width="800" height="533" loading="lazy">

Accessibility

alt should say what the image conveys in the text, not “image” or the file name. For a product photo, what is in it is enough; for a chart the main conclusion; for an image link where the link leads. A decorative image gets alt="" – the screen reader skips it. Without the alt attribute the screen reader would read the file name.

Things to watch out for

width and height must not stretch the image on a responsive page – they go together with CSS max-width: 100%; height: auto. The browser still uses the aspect ratio from the attributes.
Do not put loading="lazy" on images in the first screen – it delays them. It works in Chrome since 77, Firefox since 75 and Safari since 15.4; fetchpriority in Chrome since 101, Firefox since 132 and Safari since 17.2 (as of October 2026).
sizes is always needed with a srcset of widths (400w), otherwise the browser assumes the image spans the full width of the window. The value sizes="auto" for lazy-loaded images is so far supported by Chrome since 126, Firefox since 150 and Safari since 27 (as of October 2026).
img is a void element – writing <img>…</img> is not valid.

Browser support

Baseline – widely available: works in all major browsers and has for a long time (since 2015 at the latest). Since version: Chrome 1, Firefox 1, Safari 1. As of October 2026 (MDN browser-compat-data).