Conversion guide
How to Make Self-Contained HTML for Screenshots
Learn how to prepare an HTML file with embedded CSS and images so screenshot and conversion tools can render it more reliably.
What self-contained HTML means
A self-contained HTML file includes the important parts of the page inside the file itself. The structure, CSS, and key images are available without loading many outside resources. This matters for screenshot tools because an HTML page can look perfect in your own browser but fail during export if the screenshot tool cannot access remote fonts, scripts, or images. If you plan to use HTML Screenshot, self-contained HTML is the most reliable starting point.
Put CSS inside the file
If your HTML depends on a remote CSS file, the converter may not always load it. Put the essential CSS inside a style tag in the head of the document. You do not need every production style rule, only the rules needed for the exported screenshot. Keep layout, font size, spacing, colors, and responsive behavior in the file. This also makes the design easier to test with HTML Code to Image because pasted code can include the styles directly.
Embed important images
External images are the most common cause of missing visuals. If the image is important, embed it as a data URL or use inline SVG when practical. For small icons and decorative elements, inline SVG can be very reliable. For large photos, data URLs can make the file heavy, but they avoid cross-origin image problems. If your page has many large photos, test the export early before building the full page.
Avoid relying on scripts for basic content
JavaScript can be useful in a real website, but screenshot tools work better when the page is mostly static. If important text, cards, or images only appear after a script runs, the export may capture a blank or incomplete state. For a screenshot version, make the final content visible in the HTML. Remove loaders, delayed animations, and hidden reveal blocks if they are not needed for the final output.
Use practical dimensions
Most desktop webpage previews look good around 1200 to 1440 pixels wide. Mobile screenshots may need a narrower width. If your design uses responsive CSS, test more than one width. A page that looks good at 1440 pixels might wrap text differently at 900 pixels. The tools on We Love Free PDF let you choose render width so you can match the type of screenshot you need.
Test before sharing
After preparing the file, upload it to HTML File to Image or export it with HTML to PNG. Check text clarity, missing images, background colors, and section spacing. If the output is correct, you can confidently share the screenshot or convert the same HTML to PDF for a document-style version.