How to Embed Images in HTML

To embed one image in HTML, use an <img> element whose src points to the image file. Add alt text that conveys the image’s meaning in context, and include its intrinsic dimensions when known:

<img src="images/forest-trail.jpg" alt="A narrow trail winding through a green forest" width="1200" height="800">

For multiple resolutions of the same image, use srcset and sizes. For alternate crops or formats, use <picture> with an inner <img> fallback. See the WHATWG HTML Standard on images and MDN’s guides to the img element, picture element, and responsive images.

1. Add a single image with img

Use img when the page has one image resource. Its src can be a relative path or an absolute URL that resolves to the image.

<img
  src="images/forest-trail.jpg"
  alt="A narrow trail winding through a green forest"
  width="1200"
  height="800"
>

For a production page, replace the sample path and description with your own. The width and height attributes describe the image’s intrinsic dimensions in pixels; they do not prevent CSS from displaying it at a different responsive size.

Relative and absolute image URLs

src="images/photo.jpg" resolves relative to the document’s URL context. On a page at https://example.com/articles/post/, that path typically points under /articles/post/images/.
src="/images/photo.jpg" starts at the site’s root, such as https://example.com/images/photo.jpg.
src="https://cdn.example.com/photo.jpg" points to an absolute URL on another host.

Check the final resolved URL in the browser’s network panel if a relative path does not load. A path that works from one page may resolve differently from a nested route.

2. Write alt text for the image’s role

The alt attribute supplies equivalent or replacement content for people who cannot process the image and when image loading is disabled. Describe the image’s meaning in its page context, rather than mechanically listing every visible detail.

<img src="team-at-work.jpg" alt="The engineering team reviewing a deployment dashboard">

If an image is purely decorative and adds no information, use an empty value so assistive technology can skip it:

<img src="decorative-divider.svg" alt="">

Do not omit alt just because the image is decorative; alt="" communicates that the image has no content to convey. If the image is the only content in a link or button, write alternative text that explains the link or control’s purpose.

3. Set dimensions and responsive display

When the intrinsic width and height are known, include both. This gives the browser the image’s proportions before the file finishes loading, helping it reserve the right amount of layout space. CSS can make the image fit its container while preserving its aspect ratio:

<img class="article-image"
     src="images/forest-trail.jpg"
     alt="A narrow trail winding through a green forest"
     width="1200" height="800">

<style>
.article-image {
  display: block;
  max-width: 100%;
  height: auto;
}
</style>

The attributes describe the source image’s intrinsic dimensions; the CSS controls its rendered size. Avoid setting a responsive width while forcing an unrelated fixed height, which can distort the image.

4. Serve multiple resolutions with srcset and sizes

If you have the same composition exported at several widths, list the files as width-descriptor candidates in srcset. Use sizes to describe how wide the image is expected to render at different viewport conditions. The browser chooses a candidate based on that information and its environment.

<img
  src="images/forest-trail-800.jpg"
  srcset="images/forest-trail-400.jpg 400w,
          images/forest-trail-800.jpg 800w,
          images/forest-trail-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="A narrow trail winding through a green forest"
  width="1200"
  height="800"
>

Here, 400w, 800w, and 1200w describe the actual pixel widths of the candidate files. The sizes value says the layout slot is the viewport width up to 600 pixels, and otherwise 800 CSS pixels. It does not describe the pixel width of an image file.

Use this approach when candidate images show the same subject and crop at different resolutions. Make sure each descriptor matches the corresponding file’s real width. The src is a fallback for browsers that do not use the candidates.

5. Use picture for alternate crops or formats

Use picture when you want to provide different image content under a media condition, such as a deliberately tighter crop on narrow screens, or format alternatives. Keep an img inside it: that element is the fallback and the place for the accessible description.

Art direction with a mobile crop

<picture>
  <source media="(max-width: 600px)" srcset="images/forest-trail-close.jpg">
  <img src="images/forest-trail-wide.jpg"
       alt="A narrow trail winding through a green forest"
       width="1200" height="800">
</picture>

The browser can use the close crop when the media condition matches; otherwise it uses the image in img. Choose crops that preserve the important subject at each layout size.

Format alternatives

Where you have equivalent encodings of the same image, source elements can offer formats by MIME type, followed by the fallback image:

<picture>
  <source srcset="images/forest-trail.avif" type="image/avif">
  <source srcset="images/forest-trail.webp" type="image/webp">
  <img src="images/forest-trail.jpg"
       alt="A narrow trail winding through a green forest"
       width="1200" height="800">
</picture>

Keep the alternatives visually equivalent and ensure the final img points to a working format. The picture element handles the choice; CSS is still responsible for layout.

6. Pick the right markup

Need	Use	Why
One image file	`<img src="…" alt="…">`	Directly embeds a single image resource.
Same image in several resolutions	`img` with `srcset` and `sizes`	Provides size candidates so the browser can select one appropriate to the rendered slot.
Different crop at a breakpoint	`picture` with media-qualified `source` elements and an `img`	Supports art direction while retaining a fallback and description point.
Equivalent files in different formats	`picture` with type-qualified sources and an `img` fallback	Offers format alternatives with a usable fallback.

An iframe creates a separate browsing context; it is not the ordinary way to place an image in a page. Use img or picture for image resources.

7. Complete runnable HTML example

Save this as index.html and put the sample image files under an adjacent images directory. Replace those paths with files that exist in your project.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Responsive forest image</title>
  <style>
    body { margin: 2rem auto; max-width: 52rem; padding: 0 1rem; font: 1rem/1.5 sans-serif; }
    img { display: block; max-width: 100%; height: auto; }
  </style>
</head>
<body>
  <main>
    <h1>Forest trail</h1>
    <picture>
      <source media="(max-width: 600px)" srcset="images/forest-trail-close.jpg">
      <img
        src="images/forest-trail-800.jpg"
        srcset="images/forest-trail-400.jpg 400w,
                images/forest-trail-800.jpg 800w,
                images/forest-trail-1200.jpg 1200w"
        sizes="(max-width: 600px) 100vw, 800px"
        alt="A narrow trail winding through a green forest"
        width="1200"
        height="800"
      >
    </picture>
  </main>
</body>
</html>

The sample references several files, so create them or update the URLs before opening the page. For a page with a single existing image, remove picture, srcset, and sizes, and keep the img.

8. Verify the image in a browser

Confirm the exact file path and capitalization. Many production servers treat differently cased names as different paths.
Open the page and inspect the image. If it is missing, open the browser developer tools and inspect the image request’s resolved URL and response.
Resize the viewport to check that the image stays within its container and that an intended art-directed crop changes at the breakpoint.
Check the alternative text and ensure it makes sense when the image is unavailable or when using assistive technology.
For srcset, inspect which candidate the browser selected at the current viewport and device conditions; selection is made by the browser.

9. Troubleshooting common problems

Symptom	Likely cause	Fix
Broken image icon	The `src` path is wrong, the file is missing, or path capitalization differs.	Check the resolved URL and file name. Try the URL directly and correct the path relative to the page.
Image works on one route but not another	A relative path resolves from a different page URL context.	Use a path appropriate to the route, or a root-relative URL when the file is under the site’s root.
Image is stretched or squashed	Rendered width and height do not preserve the source proportions.	Keep both intrinsic dimensions accurate and use responsive CSS such as `max-width: 100%; height: auto`.
Wrong resolution is downloaded	A `srcset` width descriptor is inaccurate, or `sizes` does not reflect the rendered slot.	Make each `w` descriptor match its file and update `sizes` to describe layout width. The browser controls final selection.
Mobile shows an unexpected crop	A `picture` media condition matches at the current viewport, or the source order/path is wrong.	Check the breakpoint, source order, and image URLs; verify the fallback in the nested `img`.
Image takes too much layout space before loading	Intrinsic dimensions were omitted or inaccurate.	Provide the image’s actual `width` and `height` attributes.
Image is visible but the description is unhelpful	`alt` describes the filename or repeats nearby text instead of the image’s purpose.	Rewrite it to convey the information the image adds in its context, or use `alt=""` if it is decorative.

10. Performance, reliability, and cost

Choose candidate sizes thoughtfully. Offering appropriately sized variants lets the browser select among them using srcset and sizes; do not list files whose descriptors misstate their pixel widths.
Reserve layout space. Accurate intrinsic dimensions help the browser establish the image’s proportions before it loads.
Keep a fallback. In a picture element, the nested img provides the fallback image and the alternative text.
Check every referenced URL. A correct markup pattern cannot load a file that is missing, inaccessible, or served from an incorrect path. Verify the actual request in the browser.
Cost depends on hosting. HTML does not itself host the image. Any storage, bandwidth, or image transformation charges depend on where and how you serve the referenced files; this markup does not specify a provider or price.

11. Or skip the browser setup

If your next step is capturing a page as an image for documentation, previews, or automation, ScreenshotNeo can return a screenshot from one API request. The HTML method above remains the right way to embed an image file you already have.

See the ScreenshotNeo API documentation for request details.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

ScreenshotNeo removes cookie banners, popups, and chat widgets before the shot. Bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Sign up for ScreenshotNeo and get 1,000 free screenshots a month, with no card.

12. FAQ

Can I put an image directly in a paragraph?

Yes. An img element can appear in the content where the image belongs. Use surrounding HTML and CSS to control layout and spacing.

Should I use picture for every image?

No. Use a plain img for one resource. Use picture when you need source selection by media condition or format.

Is alt text the same as a caption?

No. Alternative text is a text replacement associated with the image. A visible caption is separate page content and can provide additional context.

Does srcset force the browser to download every candidate?

No. It supplies candidates; the browser chooses the resource to use based on the markup and its environment.