Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Fix the driver behind crashes, sound loss and screen glitches3Clear out junk files and repair common Windows errorsTo post an image in HTML, use the void <img> element with a src URL and meaningful alt text:
<img src="photo.jpg" alt="A red bicycle leaning against a wall">The src identifies the image file, while alt supplies a text alternative for people who cannot see or load it. You do not write a closing </img> tag. The rest of this guide shows how to choose paths, prevent layout shift, serve responsive images, improve loading, and diagnose missing pictures.
The basic HTML image element
The WHATWG HTML Standard defines the img element as the way to embed a single image resource. A minimal image can use a relative path:
<img src="images/photo.jpg" alt="A red bicycle leaning against a wall">It can also use an absolute HTTP(S) URL:
<img src="https://example.com/photo.jpg" alt="A red bicycle leaning against a wall">What each part does
<img>tells the browser to display an image.srcpoints to the image resource. The URL may be relative to the current HTML document or absolute.altis the text alternative. Describe the image’s purpose or information, not merely its file name.
img is a void element, so it has no closing tag. Writing </img> is invalid HTML and is unnecessary.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstall#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Write useful alt text
Alternative text is the fallback when an image cannot be seen or fetched, and it is read by assistive technology. For an informative image, state the important meaning in a short phrase:
<img src="sales-chart.png" alt="Sales rise from January through June">Do not begin with “image of” unless that distinction matters. If nearby text already conveys the same information, a repeated description adds noise. For a purely decorative image, use an empty value:
<img src="ornament.svg" alt="">An empty alt still declares that you considered accessibility; omitting the attribute does not mean the same thing.
Use relative and absolute image URLs correctly
Relative URLs
A relative URL is resolved from the location of the HTML file. If your project looks like this:
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →site/
index.html
images/
photo.jpgthe markup in index.html is:
<img src="images/photo.jpg" alt="A red bicycle leaning against a wall">If the HTML file is inside a directory, you may need to move up one level with ../. URL paths are case-sensitive on many web servers, so Photo.jpg and photo.jpg may be different files.
Absolute URLs
An absolute URL includes the complete origin and path:
<img src="https://cdn.example.com/assets/photo.jpg" alt="A red bicycle leaning against a wall">The remote server must allow the browser to request the file, and the URL must remain available. Linking to an image does not transfer ownership or usage rights; use an image whose license permits your intended publication and preserve any required attribution.
Reserve space with width and height
When the intrinsic dimensions are known, include both width and height:
Free tools Windows power users keep installed
One-click scans. No signup required.
<img src="photo.jpg" alt="A red bicycle leaning against a wall" width="1200" height="800">These attributes let the browser calculate the aspect ratio and reserve space before the file arrives, reducing layout shift. They describe the image’s intrinsic dimensions; CSS can still render it smaller:
img {
max-width: 100%;
height: auto;
}max-width: 100% prevents an image from overflowing its container, while height: auto preserves its proportions.
Serve responsive image sizes
A single large file may waste bandwidth on a small screen. Give the browser several candidates with srcset and tell it the rendered width with sizes:
<img
src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 800px"
width="1600"
height="1067"
alt="A red bicycle leaning against a wall">The w descriptors state each file’s pixel width. The browser combines that candidate list with the declared display size and device pixel density to select an appropriate resource. Keep a normal src fallback for browsers or tools that do not use the candidate list.
Use picture for art direction or format changes
Use <picture> when mobile needs a different crop, or when you want to offer alternate formats while retaining an img fallback:
<picture>
<source media="(max-width: 600px)" srcset="photo-square.jpg">
<source type="image/avif" srcset="photo.avif">
<img src="photo.jpg" width="1200" height="800"
alt="A red bicycle leaning against a wall"
style="max-width: 100%; height: auto;">
</picture>The nested img remains the required fallback and carries the alternative text and intrinsic dimensions.
Control when images load
For images below the initial viewport, loading="lazy" defers fetching until the browser expects them to approach the viewport:
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
<img src="gallery/photo-12.jpg"
width="1200" height="800"
loading="eager"
alt="A red bicycle leaning against a wall">Lazy loading can reduce initial bandwidth, but explicit dimensions matter even more: without them, an unloaded image may have no reserved space and the page can jump when it appears. Do not lazily load the principal image users see immediately unless you have a specific performance reason.
Choose the right approach
| Need | Recommended markup | Why |
|---|---|---|
| One fixed image | <img src="..." alt="..."> |
Smallest, clearest implementation. |
| Different resolutions | srcset plus sizes |
Lets the browser select a suitable file. |
| Different crops or formats | <picture> with <source> |
Supports art direction and format switching while keeping an img fallback. |
| Stable layout | width and height |
Reserves aspect-ratio space before download. |
| Below-the-fold gallery | loading="lazy" |
Defers off-screen requests. |
Complete example page
This document combines a responsive image, accessibility text, dimensions, and responsive CSS:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bicycle photo</title>
<style>
.hero-image { max-width: 100%; height: auto; display: block; }
</style>
</head>
<body>
<main>
<h1>Bicycle</h1>
<img class="hero-image"
src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 800px"
width="1600" height="1067"
alt="A red bicycle leaning against a wall">
</main>
</body>
</html>When an image does not appear
1. Check the path and filename
Confirm that the path in src is relative to the HTML document, that every directory name is correct, and that capitalization matches the server’s file system.
2. Open the image URL directly
Copy the resolved URL into a browser tab. If it fails there, the HTML is not the root cause: the file may be missing, inaccessible, or the server may be returning an error.
3. Inspect network and console panels
Browser developer tools show the requested URL and HTTP response. A 404 usually indicates a wrong path or absent file; permission or server errors require correcting access controls or hosting configuration.
Recommended Free Tools
Best Value
4. Check the rendered markup
Make sure the element is not hidden by CSS and that a surrounding <picture> has a valid <img> fallback. A malformed URL, including an accidental space or omitted extension, prevents fetching.
5. Review remote-image restrictions
For an absolute URL, verify that the remote host still serves the resource and permits requests from your page. If you do not control that host, the image can disappear when its owner changes the path or access policy.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Performance, stability, and maintenance
- Provide accurate intrinsic dimensions so layout remains stable while images download.
- Use responsive candidates when the same image is displayed at materially different sizes.
- Lazy-load genuinely off-screen images, and keep dimensions on every lazy image.
- Keep the fallback
srcusable even when addingsrcsetorpicture. - Recheck external URLs and licenses when content is archived or redesigned.
Or skip the browser setup
If your goal is to create an image of a web page rather than embed an existing file, ScreenshotNeo provides a website screenshot API and MCP server. It accepts a consent banner like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be disabled. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and whether it was billed.
One GET request returns PNG, JPEG, WebP, or PDF. The API also supports full-page captures with lazy images loaded, CSS-selector element capture, dark mode, device presets or custom viewports, retina scale, custom CSS and JavaScript, clicks, selector or network-idle waits, request blocking, headers, cookies, user agents, authorization, timezone, geolocation, transparent backgrounds, resizing, chosen cache TTLs, signed links, asynchronous webhooks, bulk capture of up to 100 URLs per call, usage data, and an OpenAPI specification. Its parameter names are compatible with those used by many other screenshot APIs.
cURL
See the ScreenshotNeo documentation for the full parameter reference:
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 free plan includes 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000 shots; yearly billing provides two months free. Every feature is available on every plan, and an MCP server exposes take_screenshot, get_page_info, and capture_pdf to Claude, Cursor, and other MCP clients. Create a free ScreenshotNeo account to begin.
Frequently Asked Questions
Can I use an image stored on my computer with an HTML page?
Only after the file is placed in a location the page can request, such as the site’s hosted images directory. A local path on your computer is not a deployable URL for visitors.
Should dimensions be the displayed size or the original size?
Use the image’s intrinsic pixel dimensions in the HTML attributes, then use CSS to scale the rendered size. This preserves the correct aspect ratio and lets the browser reserve space.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →What should I do when a responsive candidate is unavailable?
Keep a valid fallback in the plain src attribute. The browser can use it when a srcset candidate cannot be fetched or is not selected.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
