Skip to content
scrolly.net

Guide

How to make an HTML file self-contained

An HTML file breaks when it is shared because it is not really one file. It points at a stylesheet here, a script there and a folder of images somewhere on your disk. When the file travels alone, those pointers point at nothing. Making it self-contained means pulling everything it needs inside the one file.

The five things that leave the file behind

  • Stylesheets loaded with a link tag from a local path.
  • Scripts loaded with a src attribute from a local path.
  • Images, icons and SVGs referenced by a relative path such as images/chart.png.
  • Fonts declared in CSS with a local URL.
  • Anything fetched at runtime from localhost, such as JSON the page reads when it loads.

Public URLs (https://...) keep working after sharing, because the recipient's browser can reach them. Local paths and localhost do not.

The fix, item by item

  1. Inline the CSS: paste the stylesheet's contents into a style element in the head and delete the link tag.
  2. Inline the JavaScript: paste each script file's contents into a script element and delete the src attribute.
  3. Embed images as data URLs. A data URL puts the image bytes inside the HTML using the form data:image/png;base64, followed by the base64 data. Browsers accept data URLs far larger than you will ever need, so the real limit is the sharing service, not the browser.
  4. Fonts: switch to a system font, a public font URL, or embed the font file as a data URL in the font-face rule.
  5. Runtime data: if the page fetches a JSON file when it loads, paste the JSON into a script element as a constant and read it from there instead.

Ask the tool that made the file

If an AI tool produced the file, the fastest fix is usually to ask it for a single self-contained HTML file with all styles, scripts and images inlined. Most tools do this on request and get it right, because the alternative is exactly the broken-box problem you are trying to avoid.

Check before you share

Copy the file into an empty folder and open it from there. Everything that still works is inside the file. Everything that broke is a pointer you missed. Then check the size: scrolly accepts one HTML file up to 25 MB on the free plan and 100 MB on Pro, and it does not accept a ZIP or a folder, so a page that embeds twenty full-resolution photographs may need those photographs resized first.

Upload your self-contained file

FAQ

Frequently asked questions

How do I tell whether my file is self-contained?
Move it to an empty folder and open it from there. If every image, style and interaction still works, it is self-contained. Broken images or unstyled text mean it still points at files that did not travel with it.
Do web fonts count?
A font loaded from a public URL such as Google Fonts keeps working because the URL is public. A font referenced by a local path does not. Either embed it as a data URL or switch to a public URL or a system font.
Is there a size limit?
Browsers allow very large data URLs, but sharing services do not. On scrolly the whole file must be under 25 MB on the free plan or 100 MB on Pro, so embed images at a sensible resolution.