What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
To paste an image into an HTML page, add an <img> element and point its src attribute to a web-accessible image URL. Include useful alt text and, when known, the image’s width and height. If you specifically need the image bytes inside the HTML file, use a data: URL instead.
1. Add an image with the img element
The normal way to put one image on a web page is an img element. The WHATWG HTML Living Standard recommends img with src when there is a single image resource.
<img src="images/photo.jpg" alt="A red bicycle leaning against a brick wall" width="800" height="600">Replace images/photo.jpg with the path or URL that browsers can request. The img element is a void element: it does not have a closing tag and cannot contain child content. Write <img>, not <img>...</img>.
What each attribute does
| Attribute | What to put there | Why it matters |
|---|---|---|
src |
A relative or absolute image URL | Identifies the image resource the browser should load. |
alt |
A concise description, or an empty value for decoration | Provides a text alternative when the image cannot be seen or loaded and supports assistive technology. |
width and height |
The intrinsic dimensions in pixels, when known | Lets the browser reserve the correct aspect-ratio space while the image loads. |
These are the core attributes documented by MDN’s img reference. Keep the description focused on the image’s meaning or function. For a decorative divider that conveys no information, use alt="" rather than omitting alt.
Free tools Windows power users keep installed
One-click scans. No signup required.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
2. Point src to the right kind of URL
Use a relative URL for an image in your site
A relative URL is resolved from the HTML document’s location. For example, with this project:
project/
index.html
images/
bicycle.jpgUse:
<img src="images/bicycle.jpg" alt="A red bicycle leaning against a brick wall">If the HTML file is inside a subdirectory, adjust the path with ../. A leading slash such as /images/bicycle.jpg refers to the site root, not necessarily the folder containing the HTML file.
Use an absolute URL for an image hosted elsewhere
<img src="https://cdn.example.com/photos/bicycle.jpg" alt="A red bicycle leaning against a brick wall" width="800" height="600">The remote server must allow the browser to fetch the resource, and the URL must remain available. Linking a file on someone else’s site can also expose you to future URL changes, so host important assets under your own control when possible.
Do not use a path from your own computer
A value such as C:UsersSamPicturesbicycle.jpg identifies your computer, not a file that visitors can request. Upload the image to your website, place it in the project’s public folder, or intentionally embed its bytes with a data URL. A browser can only load a normal src when the resulting URL is accessible to that browser.
3. Embed the image bytes with a data URL
If “paste” means putting the actual image data into the HTML document, use a data URL:
<img src="data:image/png;base64,BASE64_IMAGE_DATA" alt="A small blue icon">Replace BASE64_IMAGE_DATA with the complete Base64-encoded contents of the PNG. Match the media type to the file, such as image/jpeg, image/webp, or image/gif. The resulting element still needs meaningful alt text and can still have width and height.
A data URL can remove a separate image request and makes a small document self-contained, but it makes the HTML source much larger and couples the image to that document. It is usually practical for small icons, email snippets, demos, or a single portable file—not for large photographs that should be cached and replaced independently. MDN describes the image-data approach in its Using images documentation.
Decide between a file URL and a data URL
| Need | Better choice | Reason |
|---|---|---|
| Normal website content | Separate image file with src="..." |
Easier maintenance and independent browser caching. |
| One small, self-contained HTML document | Data URL | The image bytes travel inside the document. |
| Several sizes or formats | srcset, sizes, or picture |
The browser can choose an appropriate resource. |
4. Make the image accessible and prevent layout shifts
Write alternative text that communicates purpose
Describe what a meaningful image shows or does: alt="A red bicycle leaning against a brick wall" is more useful than alt="photo". If the image is a link or button, describe the destination or action. Use alt="" for purely decorative imagery so assistive technology can skip it. Do not put the same sentence in both nearby body text and alt unless repeating it is useful.
Recommended Free Tools
Declare the intrinsic dimensions
<img src="images/photo.jpg"
width="800"
height="600"
alt="A red bicycle leaning against a brick wall">Width and height do not force the file to be downloaded at that size. They communicate the aspect ratio early, allowing the browser to reserve space as the resource loads. Keep the values proportional to the actual image unless you deliberately want cropping or distortion through CSS.
5. Serve responsive images
For a photo that has several prepared sizes, provide candidates with srcset and tell the browser how wide the image will appear 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="800"
height="600"
alt="A red bicycle leaning against a brick wall">The width descriptors (400w, 800w, and 1600w) describe the candidate files. The sizes expression describes the displayed slot. The browser uses both pieces of information to select a suitable resource rather than always downloading the largest file.
Offer format or art-direction alternatives with picture
Use picture when the markup needs alternatives selected by media conditions or format support. The nested img remains the fallback:
<picture>
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" width="800" height="600" alt="A red bicycle leaning against a brick wall">
</picture>For more syntax and selection rules, see MDN’s picture element reference. Keep a working img fallback; users and browsers still rely on it when a source condition is not met.
6. A complete HTML page example
This minimal document uses a relative file, descriptive alternative text, dimensions, and responsive candidates:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bicycle photo</title>
</head>
<body>
<h1>City bicycle</h1>
<img
src="images/bicycle-800.jpg"
srcset="images/bicycle-400.jpg 400w,
images/bicycle-800.jpg 800w,
images/bicycle-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 800px"
width="800"
height="600"
alt="A red bicycle leaning against a brick wall">
</body>
</html>Save the file as index.html, keep the image files in the matching images directory, and open the page through your development server or hosting environment. If the image is missing, inspect the final URL the browser requests and compare its spelling, capitalization, extension, and directory to the actual file.
7. What to do when you are pasting from the clipboard
HTML does not turn a screenshot or copied bitmap on your operating-system clipboard into a public URL by itself. First save the clipboard image as a file, place that file in a web-accessible project directory, and reference it with src. If you genuinely need one self-contained HTML file, encode the saved file and put the resulting data URL in src. Do not paste a local file path and expect visitors to have access to your computer.
8. Troubleshoot a missing or broken image
The icon appears broken
- Check that
srcis present and contains the intended URL. - Open the image URL directly in a browser. A 404 or permission error indicates a hosting or path problem, not an HTML syntax problem.
- Check case exactly:
Photo.JPGandphoto.jpgcan be different files on a web server. - Confirm the file extension and its actual format match. Renaming a file does not convert it.
The image works locally but not after publishing
- Replace Windows-style local paths with project-relative URLs.
- Check the deployed directory structure and the page’s base URL.
- Make sure the image was included in the deployment and is not excluded by an ignore rule.
- If the image is hosted on another domain, verify that the URL is public and stable.
The image has no useful description
Add an alt value that conveys the image’s content or function. For a decorative image, deliberately use an empty value: alt="". Omitting the attribute does not communicate the same intent.
The layout jumps while the image loads
Add accurate width and height attributes, or otherwise reserve the image’s aspect-ratio space in your layout. Do not invent dimensions that stretch the image; use its intrinsic proportions.
The data URL does not display
- Use the correct MIME prefix, such as
data:image/png;base64,. - Paste the complete encoded data with no truncated section or placeholder text.
- Ensure the source was actually Base64-encoded rather than copied as binary characters.
- For a large image, switch to a normal file URL so the HTML remains manageable.
9. Preview the finished page without configuring a browser
Or skip the browser setup
If your goal is to obtain a screenshot of the rendered HTML page rather than manually inspect it, ScreenshotNeo is a website screenshot API and MCP server. Its distinguishing reason is clean shots: it accepts consent banners before capture, removes more than 60 known consent platforms plus newsletter popups and chat widgets, and bills only clean shots.
One GET request returns a PNG, JPEG, WebP, or PDF. See the ScreenshotNeo documentation for all options.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problemscurl -G "https://api.screenshotneo.com/v1/shot"
-d access_key=YOUR_API_KEY
--data-urlencode url=https://stripe.com
-o shot.webpimport requests
r = requests.get(
"https://api.screenshotneo.com/v1/shot",
params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
timeout=90,
)
r.raise_for_status()
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 failed: ${res.status}`);Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing; response headers identify the page verdict and whether the request was billed. The MCP server includes take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. Free use includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots. Create a free ScreenshotNeo account.
Best Value
- 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
10. A practical checklist
- Use
<img>with a validsrcfor one image. - Use a relative or public absolute URL, never a private computer path.
- Write meaningful
alttext, oralt=""when the image is decorative. - Set accurate
widthandheightvalues when known. - Use
srcset/sizesorpicturefor responsive choices. - Use a data URL only when embedding the bytes is worth the larger, less maintainable HTML.
- Test the deployed URL, not only a local file, before publishing.
Frequently Asked Questions
Can I paste an image directly from Word or an email into HTML?
Not as a normal image URL. Save or export the pasted image first, then upload it and reference its URL, or encode the saved bytes as a data URL.
Does width change the downloaded file size?
No. It describes the displayed dimensions and helps reserve layout space; use responsive sources when you need the browser to choose a smaller resource.
Should decorative images have descriptive alt text?
No. Use alt="" when the image adds no information or function.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →When should I use picture instead of srcset?
Use srcset and sizes for alternate resolutions of the same image; use picture when format or media-condition alternatives need separate source elements.
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.
