Sample Image Links for HTML

An HTML image URL goes in the src attribute. For a basic image, use a stable path and meaningful alternative text:

<img src="/images/example.jpg" alt="Description of the image" width="640" height="360">

Use a relative URL for an asset hosted with your site, or an absolute HTTPS URL for an image you control or are licensed to use. For responsive images, add srcset and sizes so the browser can choose an appropriate file. For alternate formats or different crops, use <picture> with an <img> fallback. The examples below cover the common patterns and the mistakes that make images disappear or load poorly.

1. What goes in an image URL?

The src value identifies the image resource the browser should load. An img element needs at least one of src or srcset. In most straightforward cases, start with src and include alt.

<img src="https://example.com/photo.jpg" alt="A mountain lake at sunrise">

That URL can be absolute, including the scheme and host, or relative to the current site. Prefer an image path on a domain and storage location you control for production pages. External URLs can change, become inaccessible, or have usage terms you have not checked.

Relative paths and absolute URLs

Form	Example	Use it when
Root-relative	/images/photo.jpg	The image is hosted on the same domain, from the site root.
Document-relative	images/photo.jpg	The file path is relative to the current page URL.
Absolute	https://assets.example.com/photo.jpg	The image is hosted elsewhere and you have permission to use it.

Be careful with document-relative paths: on a nested route such as /articles/example/, images/photo.jpg may resolve under that route. A root-relative path starts at the domain root and avoids that ambiguity.

2. Add useful alternative text

The alt attribute is the textual replacement for an image. Write what a reader needs to know from the image in the context of the page. Avoid copying the filename or adding generic phrases such as “image of” when they add no meaning.

<img src="/images/team-at-work.jpg" alt="Two engineers reviewing a diagram on a whiteboard" width="900" height="600">

If the image is purely decorative and conveys no information, use an empty alternative text value, alt="". Do not omit alt: an empty value tells assistive technology that the image can be skipped, while omission can leave an unhelpful filename or URL exposed.

When an image is inside a link, describe the link’s destination or action rather than repeating visual details that do not help the person decide where the link goes:

<a href="https://example.com/article">
  <img src="/images/article-thumb.jpg" alt="Read the article about responsive images" width="640" height="360">
</a>

3. Make images responsive with srcset and sizes

A single large image can waste bandwidth on a small display, while a small image can look soft when displayed large or on a high-density screen. srcset lists candidate image files. With width descriptors such as 400w and 800w, sizes tells the browser how wide the image is expected to render at different viewport sizes.

<img
  src="/images/hero-800.jpg"
  srcset="/images/hero-400.jpg 400w, /images/hero-800.jpg 800w, /images/hero-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="A city skyline at dusk"
  width="1200"
  height="675">

The browser uses the viewport, declared slot size, display density, and available candidates to choose a file. sizes is not a CSS rule that constrains the image; it describes the expected rendered width so the browser can choose sensibly. Your stylesheet still controls layout.

Each candidate should show the same image and crop at a different resolution when using width descriptors. Keep the fallback src valid for browsers or situations that do not use the candidate list. The HTML standard also supports density descriptors such as 1x and 2x when candidates vary by pixel density rather than width; do not mix the two descriptor styles within one srcset.

<img
  src="/images/icon-1x.png"
  srcset="/images/icon-1x.png 1x, /images/icon-2x.png 2x"
  alt="Search"
  width="24"
  height="24">

4. Use picture for alternate formats and art direction

Use <picture> when the browser should select based on a media condition or supported format, or when a narrow screen needs a meaningfully different crop. The nested <img> remains the fallback and provides the alternative text.

<picture>
  <source media="(max-width: 600px)" srcset="/images/hero-crop-mobile.jpg">
  <source type="image/avif" srcset="/images/hero.avif">
  <img src="/images/hero.jpg" alt="A city skyline at dusk" width="1200" height="675">
</picture>

The browser evaluates the source elements in order and uses a compatible candidate when one matches. Keep a broadly supported image in the img element. Use art-directed sources only when changing the crop or composition improves the image at that viewport; for ordinary resolution variants of the same crop, srcset and sizes on img are simpler.

Need	Use
One image URL	src
Same crop, several widths	srcset with width descriptors and sizes
Same image, density variants	srcset with density descriptors
Different crop by viewport	picture with a media condition
Alternate file format	picture with a typed source and fallback img

5. Reserve layout space and choose sensible files

Include the intrinsic width and height of the image. These values let the browser calculate its aspect ratio and reserve space while the file loads, reducing layout movement. They do not prevent responsive styling; CSS can scale the image while preserving its ratio.

img {
  max-width: 100%;
  height: auto;
}

Use image files sized for their likely display, compress them appropriately, and avoid serving a huge original when a smaller candidate will do. If a content management system or image service generates variants, verify that each URL returns the expected file and that cache behavior reflects updates. Choose formats based on your browser support requirements and ensure the fallback works where a preferred format is unsupported.

Lazy loading

For images well below the initial viewport, loading="lazy" can defer fetching until the browser expects the image to be needed:

<img src="/images/article-detail.jpg" alt="Close view of the circuit board" width="1200" height="800" loading="lazy">

Do not lazily load an image that is immediately visible and important to the page’s initial presentation; deferring it can make it appear late. Keep this choice tied to the image’s position and role.

6. Validate the image URL and markup

1. Confirm the file path. Open the image URL directly and check spelling, capitalization, and the directory structure. Paths can be case-sensitive on production servers.
2. Check the response. In browser developer tools, inspect the request status and response. A missing file often returns a 404; a server may also return an HTML error page with a success status.
3. Inspect the rendered layout. Verify that CSS does not set the image to zero dimensions, hide it, or stretch it with a conflicting width and height.
4. Check candidate selection. For srcset, inspect the browser’s selected current source at several viewport sizes and device pixel ratios.
5. Review accessibility text. Ensure meaningful images have useful alternative text, decorative images have alt="", and linked images describe the action or destination.
6. Check rights and permanence. For an externally hosted image, confirm the license, attribution conditions, and whether hotlinking is allowed. Research confirming HTML behavior does not grant rights to any particular image.

7. Troubleshooting common image problems

Symptom	Likely cause	Fix
Broken image icon	Incorrect path, filename capitalization, missing file, or inaccessible host.	Open the exact URL, correct the path, and check the network response and server permissions.
Image works at the root but fails on an article page	A document-relative URL resolves against the nested page path.	Use a root-relative path such as /images/photo.jpg or a correct absolute URL.
Image is stretched or squashed	CSS forces both rendered dimensions to values with a different aspect ratio.	Set one dimension to auto, or use proportional sizing such as max-width: 100%; height: auto;.
Wrong responsive file is chosen	sizes does not match the actual layout, candidates have inaccurate width descriptors, or the candidates differ in crop.	Correct the slot-size description and candidate widths; use picture for crop changes.
Image appears soft	The available candidate is too small for its rendered size or display density.	Provide a larger candidate and ensure the srcset descriptor matches its actual width.
Large blank gap before loading	Intrinsic dimensions are absent or incorrect, or CSS has not reserved the intended space.	Set accurate width and height attributes and check the image’s aspect ratio.
Image does not load from another domain	The host may block hotlinking, require authentication, have a TLS problem, or be unavailable.	Use an authorized stable host, check the request and host policy, or store the licensed asset with your site.
Screen reader announces a filename	alt is missing.	Add meaningful alternative text, or alt="" for a decorative image.

8. Capture a page to inspect its images

When debugging a visual issue that only appears after a page loads, a browser screenshot can help compare the rendered result across viewport sizes. ScreenshotNeo is a website screenshot API and MCP server by Yorker Media. It returns PNG, JPEG, WebP, or PDF from one GET request and offers options such as viewport presets, retina scale, full-page capture, selector waits, and custom CSS or JavaScript. See the ScreenshotNeo site for the service overview.

Or skip the browser setup

Use one API call to capture a page; see the ScreenshotNeo API documentation for the request options.

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}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
const fs = await import('node:fs/promises');
await fs.writeFile('shot.webp', Buffer.from(await res.arrayBuffer()));

ScreenshotNeo accepts cookie and consent banners as a visitor and removes 60+ known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers report the page verdict and billing status. Its MCP server gives AI agents tools for screenshots, page information, and PDF capture. The free plan includes 1,000 shots a month with no card; paid plans start at $5 for 3,000 shots.

Sign up for 1,000 free screenshots a month, with no card required.

9. Frequently asked questions

Can I put a local file path in src?

Use a path that the web server can serve, such as /images/photo.jpg. A path on your development computer is not automatically accessible to visitors.

Does alt text appear as a caption?

No. It supplies a textual alternative for the image. Use visible text in the page when readers need a caption.

Should I use a URL from an image search?

Only after confirming the image’s license and the host’s usage rules. A URL being publicly accessible does not mean you have permission to reuse the image.

Do I need picture for responsive images?

No. Use srcset and sizes for the same image at different resolutions. Use picture when you need format selection or art direction.

Can srcset replace src?

An image can use srcset without src, but including a valid fallback src is a practical choice for compatibility and simpler markup.