How to save a webpage as a single HTML file
Why Ctrl+S gives you a folder and a half-broken page, and how to get one self-contained HTML file with its fonts, images and CSS embedded.
The goal is one file. Not an HTML file plus a _files folder that breaks when someone renames it, and not a PDF that throws away the layout — one document you can email, drop in a ticket, or open in five years.
Why Chrome's own save is not that
"Save as → Webpage, Complete" gives you two objects and a set of assumptions:
- Assets go in a sibling folder with a name derived from the page title. Move one without the other and the page is naked.
- It saves the DOM as it was, mostly, but assets the page loaded later — lazy images, fonts fetched by JavaScript, anything CORS-restricted — may not come.
srcsetand<picture>variants collapse to whatever it happened to fetch, so the copy can pick a different image than the one you saw.- Cross-origin stylesheets and iframes frequently do not survive.
"Webpage, Single File" (MHTML, and you have to enable it in chrome://flags) does give you one file, but it is an email-archive format: Chrome opens it, most other things do not, and it inherits the same "whatever had loaded" limitation.
What one honest file requires
A page is only self-contained once every referenced byte is inside it:
- images, including CSS
background-image,mask-image,border-imageandimage-set() - the fonts the page actually renders in, as embedded data
- SVG — including hidden
<symbol>sprite sheets, which is where most logos live <canvas>content, which has no source URL at all and has to be snapshotted as pixels- video posters, and the video itself if you want it to play
- the computed result of every stylesheet, including cross-origin ones the DOM cannot read directly
Two details decide whether it looks right rather than merely loads. Fonts: if you embed a face but the page declared font-display: optional, a fresh open renders in the fallback — different metrics, different line breaks, a visibly different page. Forcing embedded faces to swap fixes it. Document mode: a page served without a doctype renders in quirks mode; save it into a standards-mode document and boxes shift. Both were real bugs in our own capture before we found them, and both are invisible until you compare the two renders side by side.
How to do it
Free, fast, mostly fine: the SingleFile extension. It serialises the rendered page into one HTML file with assets as data URIs. On text-heavy and simple pages it is excellent — 99.99% against a Wikipedia article in our measurements, 99.84% on an agency site. On design-led pages it loses ground: 74.64% on a commercial WordPress theme demo, 81.41% on a page built from SVG filters, 65.55% on stripe.com.
When the page is the design: a rendered-DOM capture that records computed styles and pseudo-elements as well as markup. That is what CopyAnySite does, and on those same pages it lands 98.39%, 98.71% and 95.99%. Both approaches produce a single file; the difference is how much of the visual state comes with it.
When you only need the words: the browser's reading mode, then Ctrl+S. Tiny file, no layout.
Verify it in 60 seconds
- Turn off the network — or block the original host — and open the file.
- Open dev tools, reload, and look at the Network tab. Requests to the original domain are the assets you did not actually save.
- Scroll all the way down; lazy content that was never loaded was never saved.
- Inspect a heading and check
font-familyresolved to the real face, not a fallback. - Resize to 390px. Fidelity bugs hide at mobile widths.
Keeping the file usable
Self-contained means big. Base64 adds about a third to every asset, so a media-heavy page can produce a 30–50 MB file. Sensible habits:
- Strip video if you only need the layout; a poster frame is a rounding error next to an
.mp4. - Zip the file for sharing — text-heavy HTML with data URIs compresses well.
- Name it with the URL and the date.
example.com-pricing-2026-09-03.htmlwill make sense to you later;page.htmlwill not.
FAQ
How do I save a webpage as a single HTML file in Chrome?
Enable "Save Page as MHTML" in chrome://flags for a built-in single file, or use an extension that serialises the rendered page with its assets embedded. The extension route is more reliable because it captures the page after JavaScript has run.
Why does my saved page look broken?
Almost always one of three things: assets that were referenced rather than embedded and are now unreachable, a webfont that failed to load so the page fell back to a system face, or content that the page builds with JavaScript and had not built when you saved.
Is a PDF better than an HTML copy?
For an unarguable record, yes — it is flat and portable. For anything where the layout, links or responsive behaviour matter, no: print stylesheets frequently remove content, and the page stops being a page.
Can I save a page that needs a login?
You can save the pages you can already see while signed in, because the capture reads what your browser rendered. Be careful with what comes with it — personal data in an archive is a liability.
Will the saved page work in ten years?
An HTML file with embedded assets has a good chance: it needs only a browser, no server and no network. That is the strongest argument for one self-contained file over a folder of loose references.
Try it on the page you are looking at
CopyAnySite is a Chrome extension: open any page you can reach, press capture, and take away a standalone HTML file, an editable WordPress page, or a kit a coding agent can build from. The free key needs no card.
Download CopyAnySite