ScreenshotNeo

BlogHow-to

How to Fix Missing Images After Importing a Website with HTML.to.design

Missing images in an HTML.to.design import usually mean the image files could not be retrieved. Match the fix to your source: web page, local files, or browser capture.

By the ScreenshotNeo team4 October 20268 min read

If images are missing after importing a website into Figma with html.to.design, first check how you imported it. A local HTML file can point to image files that are not included with the file or are not publicly accessible, so the importer may not be able to retrieve them. Use the browser extension for a page that already renders correctly in your browser, package local assets with the HTML in a ZIP, or use the vendor-recommended .h2d capture. For one accessible image, you can import its URL directly.

The documented import routes and their limits are described in html.to.design’s local-file documentation. The available documentation does not establish one universal cause for missing images in every web or extension import, so treat the steps below as a source-matching checklist rather than assuming a particular browser or server fault.

1. Identify how you imported the page

Choose the row that matches the source of your import. The best fix depends on whether the plugin needs to fetch a public page, retrieve files referenced by local HTML, or capture a page that is already rendered in your authenticated browser.

Source Recommended next step Why
Public website URL Try the Web tab again with the page URL. If the page renders correctly in your browser, capture it with the browser extension. The Web tab imports a page from its URL; the extension captures the browser-rendered page.
Page behind a login Sign in in your browser, then use the html.to.design extension to capture the page. The extension is intended for pages accessed after logging in.
Local .html or .htm Check that the referenced image files are included and available to the import process. Consider a ZIP or .h2d. The HTML file may only contain references to external assets.
One missing image Paste the image’s directly accessible URL into the plugin. The plugin supports importing a standalone image URL.
Image appears but is blurry Follow the image-quality workflow instead of treating it as a missing-image issue. Low resolution and failed retrieval are different problems.

2. Fix a public website import

For a publicly accessible page, html.to.design documents importing through its Web tab. If the imported result lacks images, open the same page in a browser and check whether those images display there.

  1. If the page does not show an image in the browser, the import cannot reproduce an image that the page itself is not showing. Check the source page or ask its owner for the correct page or image.
  2. If the image does show in the browser, capture the page with the html.to.design browser extension. The vendor describes the extension as capturing what is displayed in the browser.
  3. For a page that requires an account, sign in first and capture the rendered page with the extension. This is the documented route for pages accessed after login.
  4. If the image is still absent, note the page URL, which import route you used, and which images are missing. Use the vendor’s Discord support channel for a persistent rendering issue.

The reviewed documentation does not provide an exhaustive list of causes for missing images in public URL imports. Avoid assuming a specific CORS setting, lazy-loading defect, browser preference, or host-side block without evidence from the affected page.

3. Fix a local HTML import

A local HTML document can contain image references without containing the image data. For example, an HTML file may refer to assets/hero.jpg, while that file is absent from the folder you supplied. html.to.design says it attempts to retrieve external resources for .html and .htm files, but retrieval may fail when a resource is missing or not publicly available. See the file import instructions.

Check the asset references

  1. Open the HTML file and locate the missing image’s src value, or its CSS background-image URL.
  2. For a relative path such as assets/hero.jpg, check that the referenced file exists at that path relative to the HTML file.
  3. For a remote URL, open the URL in a browser. If it is not accessible to the importer, use a capture made in a browser where the page renders, or package the assets locally.
  4. Keep the relationship between the HTML and its asset folders intact when preparing the import.

Package the page and assets in a ZIP

When the page depends on local images, CSS, or JavaScript, include those files together in a ZIP and import the archive through the file import flow. The vendor documents ZIP imports containing webpage files and sets a 32 MB ZIP size limit. If your archive is larger, reduce its size or use another supported route such as a .h2d capture or browser extension.

Example archive structure:

site-export/
  index.html
  assets/
    hero.jpg
    product.png
  css/
    site.css
  js/
    page.js

Make sure the paths in the HTML and CSS match the archive structure. For example, src="assets/hero.jpg" should resolve to assets/hero.jpg inside the ZIP.

Use a .h2d capture when available

The local-file documentation recommends the .h2d file because it contains the information needed to recreate the webpage. If you have a capture in this format, import it instead of relying on a standalone HTML document whose external resources may not accompany it.

4. Recover a single image by URL

If only one image is missing and you know its accessible URL, paste that URL into the plugin to import the image by itself. The vendor’s feature announcement describes support for SVG, JPEG, and PNG image URLs. This method recovers an individual image; it does not repair the rest of a broken full-page capture. Check the current plugin behavior if the image format matters to your workflow.

5. Separate missing images from blurry images

If the image is present but looks soft, use html.to.design’s image-quality guidance. The vendor says higher-resolution sources may be available; its documentation states that the high-resolution option is currently for PRO subscribers. That is a resolution issue, distinct from an image that never imported.

6. Troubleshooting checklist

Symptom Likely explanation supported by the documented workflow What to do
Images are missing from a local HTML import The file references resources that are absent or not publicly available. Check the referenced paths; include assets in a ZIP or import a .h2d file.
The page needs a login A URL-based import may not represent the authenticated browser view. Sign in and capture the page with the browser extension.
Only one image is missing The page import failed to bring in that asset, but its URL may still be accessible. Try importing the image URL directly.
ZIP import does not work The archive may exceed the documented 32 MB limit or omit files referenced by the page. Keep the ZIP within 32 MB and verify that it includes the referenced assets and folder structure.
Image is visible but blurry The image imported at a lower resolution than desired. Consult the image-quality guide and check whether the high-resolution option is available to your plan.
Images remain absent after the matching remedy The reviewed docs do not establish a universal image-specific diagnosis. Report the rendering issue through the vendor’s Discord support channel with the source URL and import route.

Or skip the browser setup

If your goal is to capture a web page as an image or PDF for a design reference, [ScreenshotNeo](https://screenshotneo.com) provides a one-request screenshot API. It is a separate workflow from importing a page into Figma: it returns a screenshot or PDF rather than reconstructing an editable Figma design.

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,
)
open("shot.webp", "wb").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(`ScreenshotNeo returned ${res.status}`);
const fs = await import('node:fs/promises');
await fs.writeFile('shot.webp', Buffer.from(await res.arrayBuffer()));

See the ScreenshotNeo API documentation for setup and options. Cookie banners, popups, and chat widgets are removed before the shot. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and response headers report the page verdict and billing status. Its MCP server lets AI agents take screenshots. The free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots.

Sign up free for 1,000 screenshots a month, no card required.

Performance, reliability, and cost considerations

  • Choose the route that already has the assets. A browser extension capture suits a page rendered in a signed-in browser; a ZIP suits local files when you can package the assets; and a .h2d file is the vendor-recommended local capture format.
  • Keep archives within the documented limit. html.to.design’s file-import documentation sets a 32 MB ZIP maximum. The cited docs do not provide capture-time or image-count performance guarantees.
  • Do not infer a universal fix. Import results can depend on whether the resource is available to the selected route. The reviewed sources do not document a guaranteed fix for every site.
  • Check the relevant plan only for image quality. The high-resolution image option is documented as a PRO feature. The other recovery routes above are based on the source and asset packaging.
  • For API screenshot costs, distinguish capture from design import. ScreenshotNeo bills only clean shots; bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing. Plans include 1,000 free monthly shots without a card; paid options range from Starter at $5 for 3,000 to Business at $249 for 1,000,000, with two months free on yearly billing. Every feature is on every plan.

Frequently asked questions

Does importing a website into Figma copy every image automatically?

Not necessarily. For local HTML, the file may reference resources that are missing or unavailable to the importer. Use a route that can access the rendered page or include the referenced assets.

Can I import a private page with html.to.design?

The vendor describes its browser extension as a way to capture pages accessed after logging in. Sign in in the browser before capturing.

Will importing an image URL fix the whole page?

No. It imports that image by itself, which is useful for an individual accessible asset but does not restore other missing page images.

Where should I report a persistent rendering issue?

html.to.design directs users with rendering issues to its Discord support channel, linked from its issue-reporting page.