ScreenshotNeo

BlogHow-to

How to Save an HTML Page With Images and CSS

Save a web page offline with its images and CSS using Firefox, HTTrack, or a screenshot API. Includes fixes for missing assets and broken layouts.

By the ScreenshotNeo team1 October 20267 min read

To save one page with its pictures and styling in Firefox, choose Save Page As, select Web page, complete, and keep the HTML file beside its companion resource folder. Open the saved file while offline and check the images, fonts and layout. The Web page, HTML only option creates one HTML file but does not save pictures. Mozilla documents these format behaviors in its Firefox save-page guide.

1. Save one HTML page with images and CSS in Firefox

  1. Open the page you want to keep.
  2. Open the browser menu and choose Save Page As (also called Save Page).
  3. Choose a local destination and enter a file name.
  4. In the format selector, choose Web page, complete.
  5. Save the page. Firefox writes an HTML file and a companion directory containing pictures and other resources needed to display it.
  6. Move or share both the HTML file and its companion directory together.
  7. Disconnect from the network and open the HTML file again. Verify the images, CSS, fonts and any sections you need.

Firefox warns that a complete-page save may change the original HTML link structure. Use Web page, HTML only when you specifically need the original markup in one file and do not need local pictures.

What the two Firefox formats contain

Format Saved Use it when
Web page, complete HTML plus pictures and other required files in a companion directory You need an offline visual copy of one page
Web page, HTML only One HTML file without pictures You need page text or structure and will keep remote assets

Save an individual image, stylesheet or script

For a particular asset, open Firefox Page Info, select the Media panel, choose the resource and save it. This is useful when you need one image or stylesheet rather than a complete page. See Mozilla’s Page Info instructions.

2. Make the saved copy reliable offline

  • Keep relative paths intact. Do not separate the HTML file from its companion folder.
  • Test without a network. A page that looks correct online may still reference remote fonts, images, scripts or APIs.
  • Check lazy-loaded images. Scroll through the page before saving so images that load on visibility have a chance to appear.
  • Check responsive layouts. Save from the viewport size you want to preserve; a local file may not reproduce every breakpoint exactly.
  • Expect interactive features to fail. Forms, logins, video players, analytics, comments and server-rendered actions generally need the original site.
  • Preserve licensing and access rules. Saving a page for personal offline use does not grant permission to republish its content or assets.

A browser save captures the rendered document and discoverable resources; it is not a guarantee that every runtime-generated feature is self-contained.

3. Save a site or a browsable local tree with HTTrack

Use HTTrack when you need more than one page and want relative links rewritten for offline browsing. It downloads a site into a local directory and can resume or update a mirror.

Basic command

httrack 'https://example.com/' -O './example-mirror'

Start with one small, scoped capture. Open the result locally before expanding the scope. A broad crawl can fetch many files and may include hosts you did not intend to copy.

Useful scope and connection controls

HTTrack’s command-line guide documents filters, connection limits and rate controls. The --near option fetches linked non-HTML requisites that may sit outside the normal crawl scope, but the guide warns that it can over-fetch an external host.

httrack 'https://example.com/' \
  -O './example-mirror' \
  '+example.com/*' \
  '-*' \
  --near \
  -c2

Adjust filters and connection settings for the site you own or are authorized to archive. Inspect the generated tree after each change.

Single-file mode

HTTrack can embed saved stylesheets, scripts, images and fonts as data: URIs. Its documentation describes a default per-asset ceiling of 10 MB. Assets over the limit, audio and video, and links between pages can remain external, so “single file” does not mean every behavior is self-contained.

4. Why images or CSS are missing

Symptom Likely cause Fix
Images show broken icons The companion folder was not copied, or image URLs were created at runtime Keep the Firefox folder beside the HTML file; for HTTrack, confirm the image URL exists in the source and recrawl after scrolling the page
Page has no styling The stylesheet was remote, blocked, or saved outside the companion folder Use Firefox Web page, complete; inspect Page Info > Media; copy the folder without renaming files
Only the first screen has images Lazy loading waited for scrolling or interaction Scroll through the page before saving, then verify the offline copy
HTTrack misses a chart or generated image HTTrack parses HTML and CSS but does not execute JavaScript Use a browser save after the page renders, or capture the rendered result with a screenshot service
Fonts look different Web fonts were remote, blocked by policy, or omitted by single-file limits Check the saved font files and CSS URLs; accept a fallback font when the original requires a live origin
Links point to the live site Complete-page saving or single-file embedding does not rewrite every link Use an HTTrack mirror for a multi-page local tree and review links before distribution
Scripts, forms or login widgets fail They require a server, session, API or JavaScript runtime Treat the copy as a visual archive; keep using the original site for interactive behavior

5. Capture the rendered result when an HTML archive is not enough

If your goal is a faithful visual record rather than editable HTML, capture the rendered page after scripts, fonts and lazy images have loaded. A screenshot is self-contained as an image, while an offline HTML copy still depends on local paths and may lose interactive behavior.

Or skip the browser setup

ScreenshotNeo captures a URL with one GET request and returns PNG, JPEG, WebP or PDF. Before capture it accepts cookie and consent banners and removes more than 60 known consent platforms, newsletter popups and chat widgets; each step can be disabled. Bot checks, CAPTCHAs, 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.

See the ScreenshotNeo API documentation for all options, including full-page capture with lazy images loaded, CSS selectors, device presets, dark mode, retina scale, custom CSS and JavaScript, waits, request blocking, headers, cookies, user agents, timezone, geolocation, transparent backgrounds, resizing, caching, signed links, asynchronous jobs, webhooks, bulk capture and usage reporting.

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

ScreenshotNeo also provides an MCP server with take_screenshot, get_page_info and capture_pdf tools for Claude, Cursor and other MCP clients. The Free plan includes 1,000 shots per 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 to start with 1,000 screenshots each month and no card.

6. Performance, reliability and cost

Browser save

Firefox is simplest for one page and has no service charge, but results depend on what the page has loaded and what the browser can write locally. Scroll first, save to a local disk, and verify offline.

HTTrack

HTTrack is suitable for repeatable site mirrors and can resume or update a local copy. Crawl size, connection settings, external resources and JavaScript-generated URLs determine how long and how complete the result is. Begin with a narrow scope to avoid unnecessary downloads.

Screenshot capture

A screenshot removes the need to preserve an asset tree and is easier to embed in reports or documentation. For repeat jobs, use waits, caching TTLs, request blocking and asynchronous jobs as appropriate. With ScreenshotNeo, only clean shots are billed; failed loads, bot checks, blank pages, timeouts and cache hits cost nothing.

7. Checklist before sharing an offline page

  • Open the file with the network disabled.
  • Confirm the HTML file and companion directory travel together.
  • Check above-the-fold and lazy-loaded images.
  • Inspect fonts, background images and print styles.
  • Click important links and note which still require the original site.
  • Remove private query strings, cookies or account data before distribution.
  • Record the source URL and capture date outside the HTML file.

8. FAQ

Does “HTML only” include images?

No. Firefox’s Web page, HTML only format saves the markup without pictures. Choose Web page, complete for a page plus its local resources.

Can I email the saved page as one file?

Only if the page and its resources are embedded or you accept missing assets. A Firefox complete-page save normally consists of an HTML file and a companion directory.

Will a saved page work without JavaScript?

The static content may render, but interactive controls, API calls and runtime-generated images can fail. Test the exact behavior you need offline.

Is HTTrack a browser replacement?

No. HTTrack crawls and rewrites discoverable resources but does not execute JavaScript, so it can miss URLs created at runtime.

Should I save HTML or a screenshot?

Save HTML when you need text, structure or a local navigable copy. Use a screenshot or PDF when the rendered appearance is the record you need.