Online Image Links for HTML
Learn how to link online images in HTML, choose the right URL, write accessible alt text, make images clickable, and fix loading problems.
Use an <img> element with an image URL in src and useful alternative text in alt:
<img src="https://example.com/images/photo.jpg" alt="Description of the photo">The URL can be relative to your document, relative to your site root, or absolute. Use a relative path for images you control with the website; use an absolute URL when the image is intentionally hosted elsewhere and you have permission to embed it.
1. The basic HTML image link
The <img> element embeds an image in the document. It is a void element, so it has no closing tag. The src attribute identifies the resource, while alt provides equivalent text for people who cannot see the image or when loading fails. See the MDN <img> reference and the HTML Standard guidance for alt.
<img
src="https://cdn.example.com/photos/mountain.webp"
alt="Snow-covered mountain above a blue lake"
>Choose alt text by purpose
| Image purpose | Alt text pattern |
|---|---|
| Informative photo | Describe the important subject or action. |
| Functional image | Describe what happens when it is activated, such as “Open the photo gallery”. |
| Decorative image | Use alt="" so assistive technology skips it. |
| Text inside an image | Include the meaningful text in the alternative. |
Do not repeat “image of” unless that fact matters. Alt text is not a filename, caption, or keyword list.
2. Relative, root-relative, and absolute image URLs
Relative paths
<img src="images/photo.jpg" alt="Product photo">
<img src="../images/photo.jpg" alt="Product photo">A relative path resolves from the URL of the current document. If the page is /products/shoes/index.html, images/photo.jpg usually resolves to /products/shoes/images/photo.jpg. Relative paths make migrations between domains and staging environments easier.
Root-relative paths
<img src="/images/photo.jpg" alt="Product photo">A leading slash resolves from the site root. It works well when every environment serves the same directory structure, but it assumes the site is deployed at the domain root rather than a subdirectory.
Absolute URLs
<img src="https://images.example.com/photo.jpg" alt="Product photo">An absolute URL includes the scheme and host. It is useful for a separate image host, CDN, or an image that is deliberately shared across sites. It also creates a dependency on that host’s availability, permissions, URL stability, and rate limits.
| Approach | Portability | Control | Typical use |
|---|---|---|---|
| Relative | High | High when self-hosted | Images shipped with the site |
| Root-relative | Medium | High | Sites with a stable root URL |
| Absolute | Low across domains | Depends on the remote host | CDNs or approved external assets |
3. Make an online image clickable
Wrap the image in an anchor. The alternative text should describe the destination or action, because the image is functioning as a link.
<a href="https://example.com/gallery">
<img src="images/photo.jpg" alt="Open the photo gallery">
</a>For a link that opens a new tab, add a rel value that prevents the new page from receiving the opener reference:
<a href="https://example.com/gallery" target="_blank" rel="noopener">
<img src="images/photo.jpg" alt="Open the photo gallery">
</a>Do not make an image clickable if it has no meaningful action. A visible text link may still be needed when the image’s purpose is not obvious.
4. Responsive images with srcset and sizes
Use srcset when you have multiple files at different widths or pixel densities. The browser chooses a suitable candidate for the display size and screen density.
<img
src="/images/hero-800.jpg"
srcset="
/images/hero-480.jpg 480w,
/images/hero-800.jpg 800w,
/images/hero-1400.jpg 1400w
"
sizes="(max-width: 700px) 100vw, 800px"
width="800"
height="500"
alt="A cyclist riding beside the coast"
>The width descriptors (480w, for example) tell the browser each file’s intrinsic width. The sizes value describes the rendered width. Without an accurate sizes value, the browser may download a file that is larger than necessary.
For art direction, use <picture> and alternate sources:
<picture>
<source media="(max-width: 700px)" srcset="/images/crop-square.webp">
<img src="/images/crop-wide.webp" alt="A red bicycle in a workshop">
</picture>5. Reserve space and control loading
Set intrinsic width and height so the browser can reserve space before the image arrives. This reduces layout shifts.
<img
src="/images/report-cover.jpg"
width="1200"
height="800"
alt="Cover of the annual report"
>Use loading="lazy" for below-the-fold images when delaying them is acceptable. Keep the main above-the-fold image eager unless you have a measured reason to defer it.
<img
src="/images/team.jpg"
width="1200"
height="675"
loading="lazy"
decoding="async"
alt="The engineering team in a meeting"
>6. Hosting, permissions, and hotlinking
Only embed images you own, have licensed, or have explicit permission to use. MDN warns: do not point src at another site’s image without permission. Unauthorized direct embedding is hotlinking. It can consume the remote site’s bandwidth, violate terms or licenses, and break when the owner changes or blocks the URL.
Self-hosting gives you control over replacement, cache headers, access rules, and uptime. A CDN can reduce delivery distance and provide image transformations, but it adds a provider dependency. Whichever host you choose, keep stable URLs, serve over HTTPS, and configure caching deliberately.
7. Security and privacy considerations
- Use HTTPS image URLs on HTTPS pages to avoid mixed-content blocking.
- Do not place secrets, signed tokens, or private API keys in a public
srcURL. - Check the license and hotlinking policy for every external image.
- Remember that a remote host can observe requests, including referrers and approximate visitor timing.
- If your content security policy restricts images, allow only the image origins you need with
img-src.
Content-Security-Policy: default-src 'self'; img-src 'self' https://images.example.com data:;8. Why an image does not load
| Symptom | Likely cause | Fix |
|---|---|---|
| Broken-image icon | Wrong path, filename, or case | Copy the resolved URL from browser developer tools and check the server response. |
| 404 response | File is absent at that URL | Upload the file or correct the directory and extension. |
| 403 response | Permission, referrer, or hotlink protection | Use an authorized URL or configure the host to allow the request. |
| Mixed-content warning | HTTPS page requests an HTTP image | Serve the image over HTTPS. |
| Image works directly but not in HTML | Content security policy, CORS-related processing, or a blocked referrer | Inspect the console and network panel, then adjust policy or hosting rules. |
| Image is stretched | Only one dimension was set or CSS overrides the ratio | Keep the intrinsic aspect ratio or use object-fit intentionally. |
| Slow page or shifting layout | Oversized files or missing dimensions | Provide responsive candidates, compress appropriately, and set width and height. |
| Wrong image appears | Stale CDN or browser cache | Use versioned filenames or an intentional cache-busting policy. |
A practical debugging checklist
- Open the exact resolved
srcURL in a new tab. - Check the Network panel for status, redirects, MIME type, and blocked requests.
- Confirm the response is an image and not an HTML error page.
- Check filename capitalization; many production servers are case-sensitive.
- Inspect Content Security Policy and mixed-content errors in the console.
- Test in a private window if authentication or cache may be involved.
9. Format and performance choices
Choose a format that matches the content and browser support you need: photographic images often compress well as JPEG or WebP; simple graphics may suit PNG, SVG, or WebP. Resize images close to their rendered dimensions before delivery. Use a CDN when its latency, transformation, or caching benefits justify the additional dependency.
For repeated images, set cache headers at the host and use immutable, versioned filenames when content changes rarely. Avoid lazy-loading every image: delaying the primary visual can hurt the first view. Measure with your browser’s Network panel or a performance audit rather than guessing.
10. Or skip the browser setup
If you need a clean screenshot of a page or image source instead of wiring up a headless browser, ScreenshotNeo provides a GET endpoint that returns PNG, JPEG, WebP, or PDF. Its cleanup steps accept cookie banners and remove more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the result with X-Page-Verdict and X-Billed headers. An MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients.
See the ScreenshotNeo API documentation for all options.
cURL
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython
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)Node.js
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' }); const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);The service also supports full-page captures with lazy images loaded, CSS element capture, dark mode, device presets, custom viewports, retina scale, PDF settings, custom CSS and JavaScript, clicks, waits, blocked resources, headers, cookies, user agents, authorization, timezone, geolocation, transparent backgrounds, resizing, chosen cache TTLs, signed links, asynchronous jobs, webhooks, bulk capture of up to 100 URLs per call, usage data, and an OpenAPI specification. Parameters used by other screenshot APIs also work, which can simplify migration.
The Free plan includes 1,000 screenshots each month with no card. Paid plans start at $5 for 3,000 shots; every feature is available on every plan. Create a free ScreenshotNeo account.
11. Cost and reliability notes
- Self-hosting avoids a third-party image request but leaves storage, delivery, resizing, and availability to your infrastructure.
- External image hosts can simplify delivery but may impose rate limits, change URLs, or block embedding.
- For automated page captures, cache stable pages when appropriate and inspect verdict and billing headers so failed loads are distinguishable from successful captures.
- Keep source URLs and output filenames deterministic when you need reproducible builds or cacheable assets.
12. FAQ
Can I use a URL from any website in src?
The browser may fetch it, but you should embed only images you have permission to use. Otherwise you risk hotlinking, bandwidth charges, or a blocked request.
Should I use a relative or absolute URL?
Use a relative path for images deployed with your site. Use an absolute URL for an intentionally external host such as an approved CDN.
Is alt required?
Provide it for every informative or functional image. Use an empty value for purely decorative images.
Why does an image URL work in my browser but fail on my page?
Check the page’s resolved URL, HTTPS, Content Security Policy, referrer or hotlink rules, response status, and MIME type.
How do I make a screenshot of a page containing online images?
Use a browser automation workflow that waits for the images, or use ScreenshotNeo’s capture endpoint and configure waits, full-page loading, and resource controls as needed.
