Replace Your AI Website Images With Your Own Photos
Your AI website images are probably placeholders or dead links. Here is how to size, name and place your own photos so they load fast and never break.
The OxyPages Team · · 9 min read
You asked Claude for a page for your dog-walking business, and it's good. The copy is warm, the prices are clear, the booking button is right where it should be.
Then you look at the pictures. A grey box where the hero photo should be. A broken image icon next to "Meet Your Walker". Maybe a lovely golden retriever that isn't yours and never will be.
That's normal, and it's the easiest part of the page to fix once you know what's going on.
Your AI website images were never really images. They were instructions for where an image should go, written by a model that writes code, and the files those instructions point at mostly don't exist.
So this post is about putting real photos in their place: what the model actually gave you, how big your own photos should be, where the files go so the page can find them, and the privacy problem hiding inside most phone photos. If you're still deciding which tool to build with, the realistic guide to building a website with AI covers that first.
TL;DR: When a chat model writes your page, the HTML points at image files. It doesn't contain them. What you get is a file name that doesn't exist yet, a link to someone else's server, or a drawing made of code. Replace them with your own photos: resize to about 1,600 pixels wide for a full-width photo and 800 for a small one, aim for under 200 KB each, save them in an images folder next to the page, and match the file names exactly, capital letters included. Strip the location data off phone photos before they go up.
Where Do Your AI Website Images Actually Come From?
Usually nowhere. At the time of writing, Claude writes HTML and draws simple pictures in code, but it doesn't hand you photographs, so the photo slots point at files that don't exist yet, or at someone else's server.
Open the HTML in a text editor and search for img. Each one you find falls into one of four types.
| What you see in the code | What it means | What to do |
|---|---|---|
src="images/hero.jpg" | A file name the model invented. The file was never made | Make a real file with exactly that name, or change the name |
src="https://..." pointing at a stock site | Someone else's server, on their terms | Download a licensed copy and host it yourself |
An svg tag full of numbers | A drawing written as code. It's real and it works | Keep it for icons, swap it for anything meant to be a photo |
src="data:image/..." followed by a wall of letters | An image packed into the page as text | Fine for tiny icons, bad for photos, because it bloats the file |
The stock link is the sneaky one. Plenty of AI-written pages still point at source.unsplash.com, a free random-photo address that Unsplash deprecated years ago and began switching off in June 2024. Unsplash's own changelog on retiring Unsplash Source A page using it shows a broken icon, and nothing about the code looks wrong.
The invented file name is the friendly placeholder. The model already decided where the photo goes and what it's called. You supply the file.
What Images Does A Small Site Actually Need?
Fewer than you think: eight to ten files for a one-page business site, and only five to seven of them are photos. Those are the ones only you can take.
- One hero photo. The big one at the top. It should show the actual service, not a mood.
- A photo of you. If strangers let you into their home, as a dog walker, tutor or cleaner does, this is the photo that sells.
- Three to five working photos. The dogs on a walk, the finished cake, the clean kitchen.
- Your logo, ideally as an SVG or a PNG with a transparent background.
- A favicon, the tiny icon in the browser tab. Without one, the tab shows a blank page symbol.
- One sharing image for when someone posts your link in a chat. Optional, but it's the picture people actually see first.
Notice what's missing: a gallery of 40. Pick the five best and stop.
How Big Should A Website Image Be?
About 1,600 pixels wide for a photo that fills the screen, about 800 pixels for one that sits in a card or a column, and under 200 KB each where you can manage it.
A photo straight off a modern phone is around 4,000 pixels wide and 2 to 5 MB. Five of those is a 15 MB page, which is several seconds of staring at nothing on mobile data. The visitor's screen can't even show most of those pixels.
Shrinking one is two steps: resize first, then compress. Free browser tools like Squoosh do both without uploading the photo anywhere. A 4 MB photo usually lands between 150 and 300 KB with no difference anyone will notice.
Format matters less than size, but here's how I'd pick:
| Format | Use it for | Avoid it for |
|---|---|---|
| JPEG | Photos. Universal and small | Logos and anything with sharp text |
| WebP | Photos, smaller again than JPEG at the same quality | Nothing much. Every current browser reads it |
| PNG | Logos and screenshots that need crisp edges or transparency | Photos, where it can be five times the size |
| SVG | Logos and icons. Sharp at any size, tiny files | Photos. It's for drawings, not pixels |
One more detail the model often skips. Add width and height to every img tag, set to the real pixel size of the file. The browser then saves the right amount of space before the photo arrives, so the text doesn't jump down the screen while someone's reading it. MDN on the img element, including width, height and alt
How the photo then scales to fit a narrow screen is a layout question, and making an AI-built page work on a phone covers it properly.
Where Do The Files Go So The Page Finds Them?
In a folder next to the page, with names that match the code character for character. That's the whole rule, and breaking it causes almost every "my images vanished after upload" message I've ever seen.
A tidy small site looks like this:
dog-walks/
index.html
images/
hero.jpg
walker.jpg
pack-in-park.jpg
logo.svg
And the page points at each file by its path from the page:
<img src="images/hero.jpg" alt="Four dogs on leads crossing a park at sunrise"
width="1600" height="900">
Four things break this, and all four are invisible on your own computer.
Capital letters. Your laptop treats Hero.JPG and hero.jpg as the same file. Most web servers don't. The page works on your desk and shows a broken icon once it's live. Use lowercase everywhere and you never meet this one.
Spaces in names. A space becomes %20 in the address, and one retyped link later it's broken. Use hyphens.
iPhone HEIC files. Safari shows them, most other browsers don't. In the iPhone's Camera settings, choose Formats, then Most Compatible, or export as JPEG first.
Paths from your computer. If the code says C:\Users\ or /Users/ anywhere, it's pointing at your hard drive, which no visitor has. how a page finds the files that sit beside it explains why moving the folder breaks those paths.
Walkthrough: Real Photos On A Dog-Walking Page
Take the dog-walking page from the top of this post, built with Claude: one page, five services, a booking link, and five img tags pointing at placeholder files that don't exist. Say you've got 23 photos on your phone. In order:
- List the names the code expects. Searching for
imgfinds five:hero.jpg,walker.jpg,walk-1.jpg,walk-2.jpg,walk-3.jpg. That's the shopping list. - Pick five photos. Not the cutest. The ones that show the job: dogs on leads, a park, your face. For the hero, a pack crossing a field in the morning.
- Resize and compress them. The hero to 1,600 pixels wide, the rest to 800. Five phone photos of about 17 MB together typically end up under 1 MB.
- Strip the location data. More on this below. It's the step everyone forgets.
- Rename them to match the code exactly, lowercase, and put them in an
imagesfolder besideindex.html. - Ask Claude for real alt text. Paste the file back with one instruction: "Rewrite the alt text on each image to describe what's actually in these photos," followed by a one-line description of each. Then copy the whole updated file back out, not just the changed lines.
- Upload the folder as one piece, not the page on its own, and open the live link on your phone with Wi-Fi switched off.
Expect about 40 minutes, most of it spent choosing.
Can You Use AI-Generated Pictures Instead?
Yes for decoration, no for anything that claims to show your real business. A generated sunset behind a heading is fine. A generated photo of "our walkers" is a small lie that a client spots the day they meet you.
That matters most for exactly this kind of business. Someone handing over their house key wants to see the real person and the real dogs, and a perfect stock-looking image works against you.
If you do use generated images, two rules.
Save them as files. Download each one and put it in your images folder like any other photo. Never paste in the address the image tool showed you, because some of those addresses are temporary or tied to your account.
Don't let the model invent a picture of evidence. No fake certificates, no fake customer photos, no fake team. Your copy probably needs the same check, because models fill gaps with confident fiction in words too.
Strip The Location Data From Phone Photos
Most phone photos carry hidden details: the camera model, the time, and often the exact GPS position where they were taken. Upload them untouched and anyone can download the file and read that back.
For a dog walker who photographs clients' dogs in their own front gardens, that's a list of addresses. Strip it before uploading with a tool that removes image metadata in your browser, or switch off location tagging in your camera settings for work photos.
What To Do Next
Five steps, under an hour, and your page stops looking like a template.
- Search your HTML for
imgand write down every file name it expects. - Choose your five best real photos. Real beats pretty.
- Resize, compress, and strip the location data.
- Rename them to match the code in lowercase, and put them in an
imagesfolder beside the page. - Upload the whole folder and check the live page on your phone.
Wherever you host, Netlify, Cloudflare Pages or a cPanel host, the folder rule is the same. On OxyPages you can also upload photos once to a site's media library and paste the path it gives you into the page, which keeps them out of every later re-upload. What it won't do is serve video files, so a video belongs on a video service with its player embedded in your page. When the folder's ready, drop it in and get a live link.
Your AI website images were always going to be your job. It's under an hour, and it's the one part of the page that shows your real business.
FAQ
Why Do My Images Show On My Computer But Not Online?
Usually a capital letter or a path. Your computer ignores the difference between Photo.JPG and photo.jpg, and most web servers don't. The other common cause is uploading the HTML file without the images folder beside it, so the page points at files the server never received.
Can Claude Add Real Photos To My Website?
Not by itself, at the time of writing. Claude writes the code that displays a photo and can draw simple illustrations in code, but the photographs have to come from you. Give it your file names and a one-line description of each photo, and it will write the tags and alt text to match.
Should I Convert All My Images To WebP?
It helps, but resizing matters far more. A 4,000 pixel JPEG converted to WebP is still huge, while the same photo resized to 1,600 pixels is small in either format. Resize first, then convert to WebP if you want the last few kilobytes.
Is It Safe To Use Images From Google Search On My Site?
No. Most images in search results belong to someone, and using them without permission can get you a takedown notice or an invoice. For your AI website images, the safe order is your own photos first, then a stock library with a clear licence.