How to Archive a Webpage with Its Images and CSS

To save a webpage with its images and CSS for offline viewing, use Firefox’s Save Page As → Web page, complete. Firefox saves an HTML file plus a companion directory containing pictures and other resources needed to display the page. If you need one file, use a browser’s MHTML capture where available, or a tool such as SingleFile. None of these methods guarantees that every interactive page will look or behave exactly as it did online, so open the archive offline and check the resources that matter to you.

Choose the format based on your goal:

HTML plus a folder: Firefox’s complete-page option; useful when you want a conventional HTML file and its resources side by side.
One archive file: MHTML, where supported; Chrome documents it as a single file containing a page and resources such as CSS and images.
One HTML file: SingleFile; a browser extension and command-line project that packages a page into one HTML file.
A visual record: a screenshot or PDF; useful for documenting appearance, but it is not a reusable webpage archive with its HTML, CSS, and image resources.

1. Save a complete page in Firefox

Firefox’s Web page, complete option is the most direct built-in choice when you want images and the resources used to display the page. Mozilla notes that Firefox creates a companion directory and cautions that the saved page may not retain the original HTML link structure. Mozilla’s save-page guide describes the available formats.

Open the page while online and wait for the content you need to appear. Scroll through the page first if it loads images or other content as you move down.
Open the Firefox menu and choose Save Page As.
In the format or file-type menu, select Web page, complete.
Choose a filename and location, then save. Keep the HTML file and the companion directory together; the directory contains resources the saved page may need.
Open the saved HTML file. For a practical check, disconnect from the network and reopen it. Confirm the images and styling you need are present.

Choose Web page, HTML only if preserving the original HTML link structure matters more than including pictures. Mozilla says this option omits pictures; it is not the right choice for a self-contained visual copy.

2. Choose between a resource folder and one file

The right format depends on how you will store and use the copy. Browser-generated archives preserve page resources in different structures, and packaging resources does not guarantee that remote content or interactive behavior will work offline.

Method	Output	Good fit	Trade-off
Firefox: Web page, complete	HTML file plus companion directory	A browser-readable copy with pictures and display resources	Keep the file and folder together; original HTML link structure may not be preserved
MHTML capture	One .mhtml file	Moving or attaching a page and its packaged resources as one file	Viewer support and behavior can vary; test the target browser
SingleFile	One HTML file	Keeping a page in one HTML document	Install and review the extension or CLI’s current compatibility and permissions
HTML only	One HTML file without pictures	Keeping the markup or link structure	Images and other external display resources are not included as a complete-page copy

Chrome’s pageCapture API documentation describes MHTML as a single file that encapsulates a page and resources such as CSS files and images. That page documents an extension API, not a promise that every Chrome installation exposes a simple MHTML choice in its Save Page As menu.

3. Save one MHTML file from a Chrome extension

If you are building a Chrome extension and need to capture the currently active tab, Chrome’s chrome.pageCapture.saveAsMHTML() returns a Blob. The extension needs the pageCapture permission. The example below writes the result through the Downloads API; it also needs the downloads permission.

// manifest.json
{
  "manifest_version": 3,
  "name": "Save current tab as MHTML",
  "version": "1.0",
  "permissions": ["activeTab", "pageCapture", "downloads"],
  "background": { "service_worker": "service-worker.js" },
  "action": { "default_title": "Save tab as MHTML" }
}

// service-worker.js
chrome.action.onClicked.addListener(async (tab) => {
  if (!tab.id) return;

  try {
    const blob = await chrome.pageCapture.saveAsMHTML({ tabId: tab.id });
    if (!blob) throw new Error("Chrome returned no MHTML data");

    const reader = new FileReader();
    reader.onloadend = async () => {
      try {
        const dataUrl = reader.result;
        if (typeof dataUrl !== "string") throw new Error("Could not encode archive");
        await chrome.downloads.download({
          url: dataUrl,
          filename: "page-archive.mhtml",
          saveAs: true
        });
      } catch (error) {
        console.error("MHTML download failed:", error);
      }
    };
    reader.readAsDataURL(blob);
  } catch (error) {
    console.error("MHTML capture failed:", error);
  }
});

Load the extension through Chrome’s extension developer workflow, open the page to capture, then click the extension action. The filename in this minimal example is fixed; adapt it if you want a title- or date-based name. Chrome documents that MHTML files are loaded from the file system and only in the main frame. See the API reference for its permission, method, and format details.

For ordinary browser use, Google’s current help describes saving a page through More → Cast, save, and share → Save page as, then opening the saved file from your computer. The exact format choices can depend on the browser version and platform. Google’s offline-reading instructions cover the standard workflow.

4. Save a single HTML file with SingleFile

SingleFile’s project documentation describes a browser extension and CLI for saving a complete webpage into one HTML file and lists supported browsers. Its features and distribution can change, so check the project’s current documentation and extension permissions before installing it.

Install the extension from the browser’s extension store, following the link from the project documentation.
Open the page and wait for the content you want to preserve to finish loading.
Use the SingleFile toolbar button to process and save the current page.
Open the resulting HTML file offline and inspect it. If important images or styles are missing, try the browser’s complete-page option or capture the page again after the missing content has loaded.

The project also documents a CLI for people who need a command-line workflow. Its README links to the separate CLI project and installation instructions. Use that project’s current instructions for the installed version rather than assuming a command or option from an older release.

5. Verify the archive offline

A successful save only proves that a file was written. It does not prove the page is complete for your purpose. Check the saved copy before relying on it as a record or handing it to someone else.

Keep related files together. For Firefox’s complete-page format, do not move or rename the companion resource directory separately from the HTML file.
Disconnect or disable network access. Reopen the saved file and check whether the images and styles still appear. This is a practical verification step, not a guarantee that all page behavior will survive.
Inspect the whole page. Check below the fold, image-heavy sections, and any content that appeared only after scrolling or interacting with the page.
Check links and behavior separately. A saved copy can preserve a visual presentation without preserving working forms, login sessions, scripts, or links to remote services.
Keep the original URL and capture date with the archive. This makes it easier to identify what the copy represents later. It does not authenticate the page or prove when it was captured.

6. Troubleshooting missing images, CSS, or content

Symptom	Likely cause	What to try
The saved page has text but no pictures	It was saved as HTML only, or the images had not loaded before saving	Use Firefox’s Web page, complete option; wait for images and scroll through lazy-loaded sections before saving
The page works only while online	Some resources remain remote, or page features depend on a live service	Test offline; try a browser archive format or SingleFile, then inspect the exact resources that still fail
CSS is missing or the layout differs	A stylesheet was not captured, styles load dynamically, or the saved format does not reproduce the site’s runtime behavior	Wait for the page to settle before saving; try a different archive method and verify the result offline
Images below the fold are absent	The site may load images only as you scroll	Scroll through the full page before capturing and give images time to load
Firefox’s saved page cannot find its resources	The companion directory was moved, renamed, or separated from the HTML file	Restore the original filename relationship and keep the HTML and resource directory together
An MHTML file will not open as expected	MHTML viewing support or loading constraints differ by browser; Chrome documents loading from the file system and only in the main frame	Open the file from local storage in a compatible browser and check the current browser’s documentation
The page looks right but buttons or forms fail	The archive contains a page view and resources but not necessarily the live services or server behavior behind them	Treat the archive as a record of the page, not as a replacement for the live application
The extension capture fails or downloads nothing	The extension may lack the required permission, the tab may be unavailable, or capture returned no data	Check the extension manifest permissions, inspect the service-worker console, and retry on a normal webpage tab

7. Performance, reliability, and storage

Page archives can grow when they include many images, fonts, and stylesheets. A companion-folder archive spreads those resources across files; a single-file format is easier to move as one item but still contains the captured data. For large pages, allow the browser or extension time to finish processing, avoid closing the tab mid-capture, and confirm the resulting file opens before deleting the source or treating the archive as your only copy.

For reliability, save from the page state you mean to preserve: sign in if appropriate, wait for dynamic content, scroll to load images, and make any required selections before capture. A saved page is a snapshot of what the browser could capture at that moment. It may omit content gated behind later interaction or dependent on a server, and no cited browser documentation guarantees identical reproduction for every website.

These browser workflows have no per-capture ScreenshotNeo charge because they do not use ScreenshotNeo. Storage cost depends on where you keep the resulting files. If you need a rendered image or PDF rather than an offline webpage archive, ScreenshotNeo is a separate hosted capture option; compare its current plan details on its site before choosing it.

8. Capture a visual record with ScreenshotNeo

For a screenshot or PDF rather than an HTML archive, ScreenshotNeo is a website screenshot API and MCP server. It returns an image or PDF from one GET request. A screenshot records the rendered appearance; it does not preserve the page’s original HTML and CSS as editable offline website files.

The following examples save a WebP capture of Stripe. Keep your API key private and replace the sample target URL with the page you are allowed to capture. See the ScreenshotNeo API documentation for options and response details.

cURL

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

Python

import 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()
with open("shot.webp", "wb") as f:
    f.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}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
const bytes = new Uint8Array(await res.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', bytes));

ScreenshotNeo’s capture options include full-page capture with lazy images loaded, CSS-selector element capture, dark mode, device presets and custom viewports, retina scale, PDF output, custom CSS and JavaScript, click-before-capture, selector hiding, wait conditions, request and resource blocking, custom headers and cookies, user agent, authorization, timezone and geolocation, transparent backgrounds, resizing, configurable cache TTL, signed public image links, asynchronous jobs with signed webhooks, bulk capture, a usage API, and an OpenAPI spec. It also offers an MCP server with take_screenshot, get_page_info, and capture_pdf tools for MCP clients such as Claude and Cursor.

For capture billing, ScreenshotNeo says bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing; responses identify the page verdict and billing status in headers. Plans listed for the product are Free: 1,000 shots per month with no card; Starter: $5 for 3,000; Growth: $15 for 15,000; Pro: $39 for 60,000; Scale: $99 for 250,000; and Business: $249 for 1,000,000. Yearly billing gives two months free, and every feature is on every plan. A screenshot is a visual capture, so choose a browser archive when you need the page’s HTML and resources to inspect or browse offline.

Or skip the browser setup

Use the one-call API when a visual image or PDF is enough. Cookie banners are accepted and removed before the shot, along with 60+ known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks, blank pages, and failed loads are never billed. An MCP server lets AI agents take screenshots. The Free plan includes 1,000 screenshots a month with no card, and paid plans start at $5 for 3,000.

Get 1,000 free screenshots a month with no card.

FAQ

Does saving a webpage archive the images in their original quality?

The cited browser guides describe saving pictures and display resources, but do not promise an exact original-file copy for every site. Open the archive and inspect the images that matter for your use.

Can I edit the saved CSS later?

Firefox’s complete-page save produces an HTML file and companion resource directory, which gives you files to inspect. MHTML packages content into one archive, while a ScreenshotNeo image is a rendered visual capture rather than editable page source.

Does a webpage archive prove what a site showed at a particular time?

A local saved copy can help retain a page for reference, but the browser documentation cited here does not claim it provides authentication or proof of capture time. Keep relevant context such as the original URL and date with your own records.

Which method should I use for long-term offline reading?

Start with Firefox’s complete-page option if a companion folder is acceptable. Choose a single-file option if portability matters more, then test the result offline in the browser you expect to use.