How to Add an Image to a Website Using Notepad

Direct answer: Create an HTML file in Notepad, place the image in the same project folder, reference it with an <img> element, add useful alt text, save the file as HTML, and open it in a browser. For an image inside an images folder, use src="images/photo.jpg".

1. Create a small website folder

Make a folder for the page and its assets. For example:

my-site/
├── index.html
└── images/
    └── mountain.jpg

Keeping images with the HTML file makes relative paths easy to understand and keeps the asset under your control. Use an image you created or have permission to use. Avoid hotlinking an image from another site without permission.

2. Add the image in Notepad

Open Notepad and enter this complete page. Change the filename and description to match your image.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My image page</title>
</head>
<body>
  <h1>A mountain view</h1>

  <img
    src="images/mountain.jpg"
    alt="Snow-covered mountains beside a blue lake"
    width="1200"
    height="800"
  >
</body>
</html>

The img element embeds the image. Its src value identifies the image resource, while alt describes its meaning for people who cannot see it. This follows the basic HTML workflow documented by MDN.

3. Save the file as HTML

Save the document as index.html inside my-site. The file must be an HTML document, not a text file whose name ends in .html.txt. Keep the image extension unchanged, such as .jpg, .png, or .webp.

Open index.html in a browser to preview it locally. You do not need hosting for this preview.

4. Choose the correct `src` path

File layout	Correct `src`
`index.html` and `photo.jpg` in the same folder	`photo.jpg`
`index.html` and `images/photo.jpg`	`images/photo.jpg`
`pages/about.html` and `images/photo.jpg`	`../images/photo.jpg`
Image on another website	`https://example.com/photo.jpg`

The path starts from the location of the HTML file. Use forward slashes in web paths, including on Windows. Spelling, capitalization, filename, and extension must match the actual file.

5. Write useful alternative text

For a meaningful image, describe the information a reader would otherwise miss:

<img src="images/chart.png" alt="Sales increased from January through June">

For a purely decorative image, use an empty value:

<img src="images/line.png" alt="">

Do not put “image of” or “picture of” in normal alt text unless that fact matters. Do not repeat a nearby caption word for word.

6. Size and style the image safely

Adding the real image dimensions helps the browser reserve space while loading. CSS can keep the image inside its container:

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

You can also use a figure and figcaption when the image needs a visible explanation:

<figure>
  <img src="images/mountain.jpg" alt="Snow-covered mountains beside a blue lake" width="1200" height="800">
  <figcaption>The lake below the north ridge.</figcaption>
</figure>

Do not enlarge a small source image with HTML dimensions and expect it to gain detail. Resize or compress the source when the file is unnecessarily large.

7. Preview and publish

Save the HTML after every change.
Open or refresh index.html in your browser.
Check the image at desktop and narrow window widths.
When publishing, upload the same folder structure so the relative path remains valid.

If you move the HTML file later, recalculate the path from its new folder.

Common errors and fixes

What you see	Likely cause	Fix
Broken-image icon	The file is not where `src` says it is.	Check the folder, filename, extension, and spelling.
Works in one page but not another	The relative path is based on the HTML file, not the site root.	Use `../` to move up one folder or adjust the child-folder prefix.
Everything displays as text	The page was saved as a text file.	Save it as an HTML document and confirm the final filename is `index.html`.
Image is stretched	Only one dimension was changed.	Set `height: auto` or provide matching width and height proportions.
Alt text is missing	The `alt` attribute was omitted.	Add concise text, or `alt=""` for decoration.
Remote image does not load	The URL is wrong, access is restricted, or the host blocks hotlinking.	Use a permitted local copy or a valid public URL.

Also check that quotation marks around attributes are paired and that there are no accidental spaces in the filename. Browser developer tools can show the failed image URL, but the folder and filename are usually the fastest checks.

Performance and reliability checklist

Choose an image format suited to the content and keep dimensions close to the rendered size.
Set width and height when you know the source dimensions to reduce layout movement.
Use loading="lazy" for below-the-fold images:

<img src="images/gallery-photo.jpg" alt="A red bicycle outside a cafe" loading="lazy" width="1200" height="800">

Keep the original folder structure when copying the site to a host.
Use local assets when you need control over availability and licensing.
After replacing an image, refresh the browser if it appears to show an older cached copy.

Or skip the browser setup

If your goal is to capture the finished page as an image or PDF after it is published, ScreenshotNeo provides a website screenshot API and MCP server. It accepts one GET request and returns PNG, JPEG, WebP, or PDF. Cookie and consent banners, newsletter popups, and chat widgets are removed before capture. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and the response identifies the result with X-Page-Verdict and X-Billed headers.

See the ScreenshotNeo API documentation for the full option list.

cURL

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

Python

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

Node.js

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

ScreenshotNeo also supports full-page and element capture, device presets, custom CSS and JavaScript, waiting rules, headers, cookies, caching, signed links, asynchronous jobs, bulk capture, PDF options, and an MCP server for AI agents. The free plan includes 1,000 screenshots each month with no card; paid plans start at $5 for 3,000. Create a free ScreenshotNeo account.

FAQ

Can I add an image without CSS?

Yes. The img element works by itself. CSS is useful for responsive sizing and layout.

Should I use a file path or a URL?

For a beginner page, a local relative path is usually clearest. Use a remote URL only when you have permission and can depend on that host.

Why does `images/photo.jpg` work but `/images/photo.jpg` fail?

images/photo.jpg is relative to the current HTML file. A path beginning with / is interpreted from a website root, which may not exist when you open a local file.

Does Notepad resize or upload images?

No. Notepad edits the HTML. The browser loads the image, and publishing requires copying the HTML and image files to a web host.