You ask AI to build a page, it hands you clean layout and real copy, and then you open it: a broken image icon where the hero photo should be, a gray box labeled “Image,” and three identical stock shots of people pointing at a whiteboard. The structure is good. The images are the tell. If you want to add images to AI pages that actually load and look deliberate, this is the one part you have to take back from the model.
The good news is that images are the easiest thing to fix, because the fix is a decision, not a skill. You do not need design software or code. You need to pick the real picture and tell the AI how to reference it.
TL;DR
- AI breaks images because it invents URLs that do not exist. The tag is valid, the file behind it is imaginary.
- There are three real ways to put an image in a page: a hosted link, a base64 data URI embedded in the file, or separate files shipped as a ZIP.
- Get photos from Unsplash or Pexels (free, commercial-use), use your own, or replace decorative stock with a clean inline SVG.
- In your prompt, specify the subject, the aspect ratio, how the image should fit, a placeholder at real dimensions, and alt text.
- Publish the page to a real host so the images load fast and the layout holds, instead of judging them in a cramped preview pane.
Why do AI-generated pages have broken images?
The model has seen millions of pages, so it knows exactly what an image belongs in a hero, a card, a gallery. What it does not have is a real file to point at. So it does the only thing it can: it writes a correct image tag and fills the address with something that looks right. hero-background.jpg. https://example.com/images/team-photo.jpg. A plausible Unsplash link with an ID that was never real. The HTML is valid. The file behind it does not exist, so the browser shows a broken icon.
This is the same behavior as a made-up citation. The shape is right and the specifics are invented. Once you see it that way, the fix is obvious: every image on the page needs an address that resolves to a real file, and the only way to be sure is to open that address yourself.
The second problem is subtler. Even when the image loads, it is often the most generic option available, because “a photo of a team working” is a concept, not a scene, and concepts come back as stock. And the third problem is that the image sits wrong: it stretches, it crops someone’s head off, or the box jumps around as it loads. All three are fixable in the prompt.
The three ways to get a real image into a page
Before sourcing anything, decide how the image will travel with the page. This matters because a lot of AI output is meant to be one self-contained file, and images change what “self-contained” means. There are three honest options.
A hosted link points the page at an image that already lives somewhere stable. An Unsplash photo URL is the common case, and it works well because the file is real, fast, and free to use. The catch is that if that address ever changes or disappears, your image breaks. For stock photography from a reliable source, this is usually fine and by far the least fuss.
A base64 data URI embeds the image directly inside the HTML as a long string of text, so the file carries its own pictures and nothing is external. This is perfect for a true single-file page, like a logo or a small illustration. The downside is weight: base64 adds roughly a third to the file size, so embedding a large photo this way bloats the HTML and slows the first load. Use it for small assets, not a 3MB hero.
A ZIP of files keeps the HTML and the images as separate files and bundles them together. This is the right call when you have many images, large ones, or a multi-page project. The images stay in their efficient original format, the HTML stays readable, and everything moves as one package.
| Method | Best for | Trade-off |
|---|---|---|
| Hosted link | Stock photos, one or two images | Breaks if the source URL changes |
| Base64 data URI | Logos, icons, small illustrations | Bloats the file if the image is large |
| ZIP of files | Many images, large photos, multi-page sites | Needs a host that unpacks a ZIP |
Where do you get images that do not look generic?
Once you know how the image will travel, you need the image itself. Three sources cover almost everything.
Free photo libraries. Unsplash and Pexels both offer genuinely good photography that is free to use, including for commercial work, with no attribution required. Crediting the photographer is a decent habit, but not a legal requirement. Pick a specific photo, copy its direct image URL, and hand that to the AI. Do not grab images off a Google search; most of those are copyrighted and using them is a real risk.
Your own images. A real screenshot of the actual product, a photo you took, your real logo. These beat stock every time because they are the one thing no competitor has. If you have them, use them, and ship them in a ZIP or embed the small ones.
Inline SVG instead of a photo. A surprising amount of the time, the “image” a page needs is not a photo at all. It is an icon, a simple illustration, a diagram, or a decorative shape, and the AI can draw those directly as SVG with no external file at all. An honest line illustration of your three-step process looks far less generic than a staged stock photo of people shaking hands. When in doubt, ask the AI for an SVG before you reach for stock. This pairs well with the ideas in making AI pages look less generic.
The generic-stock problem is mostly a prompting problem. “A photo of a team collaborating” is a concept, so you get the average of every such photo. “A single developer at a wooden desk near a window, warm morning light, laptop open” is a scene, and scenes come back specific. Art-direct the image the way you would brief a designer: subject, setting, mood, and light.
How do you make images sit right in the layout?
A real image in the right place still looks amateur if it stretches, crops badly, or shoves the layout around as it loads. These are the small instructions that separate a polished page from a broken-looking one, and the AI will not add them unless you ask.
Four instructions do most of the work:
- Fix the aspect ratio. Give the image box a set shape (16:9 for a hero, 1:1 for an avatar, 4:3 for a card) so every image in a group matches and the layout is predictable.
- Use cover, not stretch. Tell the model the image should fill its box while keeping its proportions and cropping the overflow, rather than squashing to fit. In CSS terms this is
object-fit: cover, but you can just say “fill the box without distorting the image.” - Reserve the space. Ask it to set the image’s width and height (or aspect ratio) in advance so the box holds its place and the page does not jump as the image loads.
- Always add alt text. Every image needs a short, accurate description. It is what screen readers announce and what shows when an image fails to load. This is the same accessibility discipline covered in making AI pages accessible.
A copy-paste image prompt you can reuse
You do not need to re-explain all of this each time. Keep a short image block and append it to any page prompt. Here is one to copy and adjust.
For every image on this page, follow these rules:
- Do not invent image URLs. Use only the image links I provide, or if I
give none, use inline SVG illustrations and placeholders instead of
guessed photo URLs.
- Give each image a fixed aspect ratio (16:9 for the hero, 1:1 for
avatars, 4:3 for cards) and set width and height so the layout does
not shift while images load.
- Make images fill their box without distorting: fill and crop, never
stretch.
- Add short, accurate alt text to every image.
- Keep decorative graphics as inline SVG rather than external files so
the page stays self-contained.
Here are the images to use:
- Hero: [paste your Unsplash or hosted image URL]
- [any others, with where each goes]That first rule is the important one. It tells the model to stop guessing addresses and either use what you give it or fall back to SVG, which kills the broken-image problem at the source. Once the structure is right, you can keep adjusting individual images with follow-up prompts, swapping a photo or nudging a crop without rebuilding the page.
Keep images fast
An image that loads is step one. An image that loads quickly is step two, and it matters more than people think, because a slow hero photo holds up the whole page. Three habits keep images light:
- Size to display. A photo shown at 600px wide does not need to be 4000px wide. Downscale it first.
- Prefer modern formats. WebP is much smaller than JPEG or PNG at the same quality. Many Unsplash URLs let you request a width and format right in the address.
- Do not base64 the big ones. Embedding a large photo as a data URI inflates the HTML and blocks the first render. Link or ZIP those, and reserve base64 for small assets.
Beyond the file itself, where the page is served matters. An image hosted on a fast, edge-delivered platform loads from a location near your reader instead of crawling from a distant origin, so the same photo simply appears faster.
Publish the page so the images load for real
Here is the part that catches people. You can get every image right, correct URLs, clean crops, proper alt text, and still not know if it worked, because you are judging it inside a cramped chat preview pane that squeezes the layout and sometimes blocks external images entirely. An image-heavy page only tells the truth at full size, in a real browser, at a real URL.
That is the last step, and it is the one VisiblePage handles. Paste the HTML the AI gave you, or drop a ZIP of a multi-file project with all its image files, and you get a live link right away, with no build step or hosting setup. Every image loads the way a visitor will see it, hosted photos, embedded data URIs, and local files from the ZIP alike, served fast from the edge so a heavy hero does not drag. Because you are sharing the real page and not a screenshot, every hover, lightbox, and gallery interaction keeps working. Open the link on your phone and your laptop to check the crops on both, and if a photo needs swapping, update the page and the same link updates. You can keep the page public, make it private, or put a password on it, and the canonical URL stays the same through every revision.
Try it now: Publish your AI-generated HTML with VisiblePage and get a live link in seconds.
Frequently asked questions
Why are the images on my AI-generated page broken? Because the model guessed at an image URL that does not exist. AI knows what a photo tag looks like, so it writes one and fills in a plausible-looking address it invented. The tag is valid, the file behind it was never real. Replace invented URLs with ones you can actually open in a browser tab, or embed the image directly in the file.
What is the best way to add an image to a single HTML file? You have three options. Link to an image already hosted somewhere stable, like an Unsplash photo URL. Embed the image directly as a base64 data URI so it travels inside the file. Or keep the image as a separate file and ship the whole thing as a ZIP. Hosted links are simplest, data URIs keep everything in one portable file, and a ZIP is best when you have many images or large ones.
Where can I get free images for an AI page? Unsplash and Pexels offer high-quality photos free to use, including commercially, with no attribution required (though crediting the photographer is a kind habit). For icons and simple illustrations, inline SVG often beats a photo entirely, and the AI can draw it for you. Avoid pulling random images off Google; most are copyrighted.
How do I stop AI from using generic stock photos? Be specific about the subject, mood, and setting in your prompt, the same way you would art-direct a designer. Ask for a particular scene rather than a concept. And consider replacing decorative stock with a real screenshot, your own photo, or a clean SVG illustration, which almost always looks less generic than a staged stock image.
Do images make an AI page load slowly? They can, if they are huge. A single uncompressed photo can be several megabytes and stall the whole page. Keep images sized to how they are displayed, use modern formats like WebP where you can, and do not embed large photos as base64, which bloats the HTML. Serving from a fast host helps too, since the image loads from a nearby edge location instead of a slow origin.