Reference images and content uploads
Two different ways to attach files to a prompt — one guides the AI, one places assets on your site.
PageFork’s chat composer lets you attach files to a message in two different ways, and they do completely different things. Choose the right one or the AI will do the wrong thing.
- Reference image — visual guidance for the AI. The image is shown to the model as context so it can match a style, layout, or mood. The image is not placed on your site.
- Content upload — a file that should actually appear on your site (image, video, PDF, etc.). It’s uploaded to PageFork’s public storage, gets a URL, and is inserted into your site exactly like any other asset.
Use Reference when you mean “look at this”. Use Content when you mean “put this on the page”.
How to attach
The + button inside the composer has both entries:
- + → Reference — pick an image to guide the AI.
- + → Content — pick a file to appear on the site.
You can also drag-and-drop or paste files. When you drop an image, the composer asks whether it’s a reference or content; when you drop a video or document, it’s always content.
Tip: once attached, reference images appear as chips above the composer, while content uploads appear as URL badges inside the message text you can move around or delete.
Reference images
How they work
A reference image is sent to the AI as inline image data alongside your prompt. The model inspects it and uses what it sees as context while writing the new version of your site. Common uses:
- Layout — “use a hero like this.”
- Style / mood — “match the colour palette of this brand.”
- Typography — “copy the type hierarchy shown here.”
- Composition — “use this density and whitespace.”
The AI does not copy the image onto your page. If the reference happens to contain a photo or logo, that photo is not placed on the site — the model just looks at it.
Formats and size
- JPEG, PNG, WebP, GIF, SVG, BMP, TIFF.
- Up to 5 MB per image.
- Multiple references per message are fine.
Good prompts with references
- “Match the mood of this screenshot but use my brand colours.”
- “Use a hero similar to this image — don’t reproduce the text.”
- “This is the editorial feel we want — minimal, heavy on whitespace.”
What doesn’t work well
- Screenshots of competitors’ entire pages — the AI over-mimics and you get a near-clone. Prefer section-level references.
- Very low-resolution images — details get lost.
- Images with heavy watermarks — the AI may describe the watermark.
Content uploads
How they work
A content upload is saved to PageFork’s public storage bucket. The
composer inserts a URL badge into your message that points at the
stored file. When you send the prompt, the AI can read that URL and
place the asset on your site — as an <img>, a <video>, a link,
whatever fits.
The file stays on PageFork’s CDN and is served from your site just like any other asset.
Supported files
| Type | Formats | Size limit |
|---|---|---|
| Images | JPEG, PNG, WebP, GIF, SVG, BMP, TIFF | 5 MB |
| Videos | MP4, WebM, OGG, MOV, AVI | 50 MB |
| Documents | PDF, DOCX, XLSX, CSV, Markdown, TXT | 5 MB |
Good prompts with content uploads
- “Use this photo as the hero background.” (with an image attached)
- “Add our logo to the header and footer.” (with the logo attached)
- “Embed this demo video on the home page, autoplay muted.” (with the video attached)
- “Link this PDF from the pricing section as ‘Download brochure’.” (with the PDF attached)
Tip: you can attach both a reference image and a content upload in the same message — e.g. “Add our logo (attached as content) to the header. Match the overall layout of this screenshot (attached as reference).”
Which one should I pick?
Ask yourself: should the file end up visible on my site?
- Yes → Content upload.
- No, I just want the AI to look at it → Reference image.
If you pick the wrong one:
- You uploaded a logo as a reference — the AI will understand your style but won’t put the logo on the site. Re-attach it as Content.
- You uploaded an inspiration screenshot as content — the AI will insert the screenshot as an image on the page, which is almost never what you want. Remove it and re-attach as Reference.