References

Beginner-friendly references for web development, with live, editable examples.

The HTML <img> tag

Element All modern browsers Updated
Quick answer

The HTML <img> element embeds an image. The src attribute sets the image URL and the alt attribute provides essential text alternative. It is a void (self-closing) inline element with no closing tag.

Overview

The <img> element places an image in the page. It is a void element — it has no content and no closing tag — and it is replaced content, sized by its width and height.

Two attributes are essential: src gives the image URL, and alt gives a text alternative that is read by screen readers and shown if the image fails to load. For performance, serve responsive images with srcset and sizes, defer off-screen images with loading="lazy", and reserve space by always setting width and height to prevent layout shift.

For art direction (different crops at different sizes) or modern formats with fallbacks, wrap the image in a <picture> element.

Syntax

<img src="photo.jpg" alt="A description of the image" width="640" height="360">

Attributes

The <img> element supports the following attributes, in addition to the global attributes available to every HTML element.

Attribute Value Description
alt A short, descriptive string. Use an empty value (alt="") for purely decorative images. Provides alternative text for an image.
crossorigin anonymous (default when present) use-credentials Sets the CORS mode for fetching the resource.
decoding auto (default) sync async Hints the image decoding strategy.
fetchpriority auto (default) high low Hints the fetch priority of the resource.
height A non-negative integer (pixels). Sets the height of the element in pixels.
ismap A boolean attribute — present or absent. Makes an image a server-side image map.
loading eager (default) lazy Controls eager vs lazy loading of the resource.
referrerpolicy no-referrer no-referrer-when-downgrade origin origin-when-cross-origin same-origin strict-origin strict-origin-when-cross-origin (default) unsafe-url Controls the Referer header sent for the request.
sizes A comma-separated list of media-condition / length pairs, e.g. (max-width:600px) 480px, 1080px. Defines image display size for srcset selection.
src A URL pointing to the resource. Specifies the URL of an embedded resource.
srcset A comma-separated list of "URL descriptor" pairs, e.g. small.jpg 480w, large.jpg 1080w or 1x/2x. Lists responsive image candidates.
usemap A hash-prefixed map name, e.g. #planets. Links an image to a client-side image map.
width A non-negative integer (pixels). Sets the width of the element in pixels.

Example

Live example 
<img src="https://codeshack.io/web/img/icon.png" alt="The CodeShack logo" width="72" height="72">

More Examples

CSS3 Image Popout Example

CSS3 Image Popout

486 0
Pure CSS3 Image Slideshow Example

Pure CSS3 Image Slideshow

510 0
CSS3 Image Overlay Effects Example

CSS3 Image Overlay Effects

356 0

Best practices

  • Always provide a meaningful alt describing the image's purpose; use alt="" for decorative images.
  • Set width and height to reserve space and avoid layout shift.
  • Use srcset/sizes for responsive images and modern formats (WebP/AVIF) with <picture>.
  • Add loading="lazy" to off-screen images; keep the LCP image eager.
  • Never put text that matters only inside an image — keep it as real, selectable, translatable text where possible.

Accessibility

The alt attribute is the heart of image accessibility:

  • Describe the image's purpose in context, not its appearance, and skip phrases like "image of".
  • Use alt="" (present but empty) for purely decorative images so screen readers ignore them.
  • For complex images like charts, give a short alt plus a longer description via aria-details or nearby text.
  • If the image is the only content of a link, its alt becomes the link's accessible name — make it describe the destination.

Frequently asked questions

What are the required attributes of <img>?
src (the image URL) is required, and you should always include alt for accessibility — use alt="" for purely decorative images.
How do I make images responsive?
Use srcset to offer multiple resolutions and sizes to describe the display width, so the browser downloads the best file. For different crops, use <picture>.
How do I lazy-load images?
Add loading="lazy" to below-the-fold images. Keep your largest above-the-fold (LCP) image eager and consider fetchpriority="high" on it.
Why should I set width and height on images?
They let the browser reserve the right space before the image loads, preventing layout shift (CLS) and improving Core Web Vitals.
What does an empty alt attribute mean?
alt="" marks the image as decorative, so screen readers skip it. Omitting alt entirely is different — assistive tech may then read the file name. Always include the attribute.
How do I resize an image in HTML?
Set the width and height attributes in pixels, or size it with CSS (width/height, or max-width: 100% for responsive scaling). Set both dimensions to the true aspect ratio to avoid distortion and layout shift.
How do I center an image in HTML?
Make the image a block element and use auto margins: img { display: block; margin: 0 auto; } centers it horizontally. To center it inside a box both ways, use a flex container with justify-content: center; align-items: center;.
iframe input