How to use your own photos in an AI-generated website so they land in the right place

Choose fewer, better photos

Eight good photos do more than forty average ones. Sort what you have into four groups and pick the best one or two from each: the people (you, your team at work), the place (the shop front, the room, the view from the counter), the work (finished jobs, dishes, products) and the detail (hands, tools, materials). Leave out anything blurred, dark, cluttered or more than a few years out of date. If a section has no good photo, it's better without one than with a weak one.

Prepare them before you upload

1. Crop for the job. Wide, horizontal photos suit headers and banners; squarer or upright ones suit cards and phone layouts. Leave space around the subject, because layouts often crop the edges.
2. Straighten and correct, lightly: level horizons, lift shadows, remove colour casts. Avoid heavy filters that make photos clash with each other.
3. Resize. A photo straight from a phone is far larger than any page needs. Around 2,000 pixels on the long side is plenty for a full-width image.
4. Pick the format. MDN's image format guide recommends WebP or AVIF for photos with JPEG as a fallback, and PNG for logos, screenshots and anything needing transparency. Anticode accepts PNG, JPEG, GIF and WebP (not AVIF or SVG) and stores them as uploaded, without resizing, so resize first.
5. Rename every file with what it shows: owner-at-pottery-wheel.jpg, finished-loft-conversion-kitchen.jpg. Not IMG_4471.jpg.
6. Remove location data if the photo was taken at home, and check nothing private is visible in the background.

Tell the AI what each photo is for

An AI that can see images will guess well at what a photo shows, but it can't know which one you're proudest of or which one shows your actual shop rather than a supplier's. Add a few lines to your request:

• "Use shop-front-morning.jpg as the main photo at the top."
• "The three cake- photos are for the products section, in this order."
• "team-at-bench.jpg belongs on the about section; it's the four of us."
• "Don't use the van photo; it's only for reference of our colours."

Adding photos to an Anticode build

In Anticode you add photos and videos with the build, in the composer, or later with a change request. Each file uploads as it's added and is checked by its first bytes rather than its name, then stored under your account. The model sees the photos, so it can describe and place them; it can't watch videos, so those are placed by their name and type, which is another reason to name files well.

Your photos are used by builds the model writes, the app-style builds that also make up the template gallery. Pages laid out by Anticode's design engine draw on a curated photo library from Unsplash with written alt text instead. If your own photos are the point, say so in the request and check the kind of build in the plan the Architect shows before you choose "Build it". Video plays only inside app builds; on design-engine pages, link to YouTube or Vimeo instead, since published pages can't embed players.

Check every photo after the build

• Placement: is each photo where you asked, and is the most important one at the top?
• Cropping on a phone: faces and products shouldn't be cut off at narrow widths.
• Alt text: every meaningful image needs a description; Anticode's design gate blocks publishing pages that lack it. Read what was written and correct anything vague. How to write alt text has examples.
• Speed: if the page feels slow on mobile data, one oversized image is the usual cause.

Mistakes to avoid

• Mixing your photos with stock ones that look nothing alike. Visitors notice the change in light and style.
• Photos you don't have rights to, such as ones a photographer took at a wedding or event without agreeing their use for marketing. See finding images you can use legally.
• Text inside photos. Prices or opening hours in an image can't be read by screen readers or search engines, and they go out of date.

Questions people ask

Can the AI see the photos I upload?

In Anticode, yes for photos: the model sees them when it builds. Videos are placed by name, because the model can't watch them.

What size should website photos be?

Roughly 2,000 pixels on the long side for full-width images, less for cards and thumbnails, saved as WebP or a well-compressed JPEG.

Can I add a video to an AI-built website?

In Anticode, videos play inside app builds. Design-engine pages can't play video, so link to it on YouTube or Vimeo.

Sources

1. MDN: Image file type and format guide, checked 24 October 2026