How to Download a Website with Images, CSS, and JavaScript Intact

Anyone can save raw HTML. The hard part is downloading a website where every image still loads, every stylesheet still applies, every font still renders, and the layout actually looks like the original. Here's why most tools fail at this — and how to do it right.

Why Most Downloads Look Broken Offline

When you save a webpage and it looks like a 1995 Geocities page when opened offline, one of these things has happened:

Images were referenced via JavaScript and the tool didn't run JS
CSS files were loaded from a CDN that the tool didn't follow
Fonts come from Google Fonts or Adobe Fonts and weren't downloaded
Images are lazy-loaded on scroll and the tool never scrolled the page
Image src attributes use relative paths that weren't rewritten to point to the local files
Background images defined inside CSS files were ignored
Modern image formats (WebP, AVIF) weren't recognised and got skipped

What a Complete Download Should Capture

For an offline copy that actually looks like the original, the downloader needs to handle all of this:

HTML for every page in the site
Every <img> source, including srcset and lazy-loaded variants
Every CSS file linked in <link> tags AND every @import inside those files
Background images and url() references inside CSS
Inline styles that reference images
JavaScript files (so interactive features keep working)
Fonts (TTF, WOFF, WOFF2)
Favicons and Apple touch icons
Modern formats: WebP, AVIF, SVG
Embedded video and map iframes

How Website Sucker Handles It

Website Sucker uses a real headless Chrome browser to load each page exactly as a visitor would see it. That means JavaScript runs, dynamic content loads, lazy-loaded images get triggered (we scroll the page in 500-pixel increments to wake them up), and everything that ends up on screen gets captured.

Then we walk every CSS file we downloaded looking for url() references and grab those too. Same with srcset attributes — we parse them, deduplicate variants of the same image, and download the highest-quality version.

Finally, every reference in the HTML and CSS gets rewritten to point to the local file path. When you unzip the result and open index.html, everything works — no broken images, no missing fonts, no flat unstyled pages.

Edge Cases We Handle (That Most Tools Don't)

Real websites are messy. Here are some things we've had to specifically handle so downloads come out clean:

Wix CDN images served as AVIF with the wrong file extension — we normalise the URL and force the original PNG/JPEG
Squarespace srcset variants of the same image — we deduplicate by base URL so we don't download 6 copies of one image
<noscript> fallback images — we promote them into the DOM so they render offline
<wix-iframe> custom elements — converted to standard iframes for offline playback
Smooth-scroll anchor links — converted from data-anchor to proper hash links
Lazy-loaded iframes (data-src) — activated so they show on first load
Squarespace embed/video blocks — decoded from data-html attributes and inserted as live elements

Verifying Your Download

After you download a site, check the offline copy actually works:

Unzip the file
Open index.html in your browser by double-clicking
Click around to a few pages — they should all open and look correct
Right-click → Inspect → Network tab → reload — there should be very few (or zero) failed requests
Disconnect from the internet and reload — the site should still display (videos and maps will be the only thing needing connection)

Enable JavaScript to use Website Sucker.