Images: the fastest way to make a site look real

One real photograph beats every layout trick

You can spend an hour refining spacing and typography, and a single real photograph of your workshop, your dish or your work will do more for credibility than all of it. Generic imagery does the opposite: it signals that there was nothing real to show.

Used at scale matters as much as used at all. One image running the full width, worked into the composition, reads as deliberate. The same image as a small rounded thumbnail in a row of three reads as a template.

Where images live

A publish carries the site itself: HTML, CSS, JavaScript, SVG. Photographs and other binary files live in your media library instead, uploaded once and reusable by every version, which is why changing a page never means re-uploading your photos.

1. 1Open your site in your SayLive space and go to Medias.
2. 2Upload your photos. 50 MB is included with the site, and it extends if you need more.
3. 3Tell your agent to use them: each file is served at /_media/its-name.jpg

Your agent can see the list of what you uploaded, so once the files are there it places them itself. You do not have to describe each one. The docs cover the media library, including what to do when 50 MB is not enough.

Never link a photo from another site

Left to itself, an assistant will sometimes point an image at a URL it found elsewhere. The page looks right the day it is built and breaks quietly later: the other site reorganises, the file moves, and your hero becomes a broken icon. Nobody tells you, because your own files are all intact.

It is also someone else's bandwidth, and sometimes someone else's licence. If you have no photograph of your own for a block, say so and decide: a placeholder that is visibly a placeholder, a properly licensed image you upload yourself, or a design that does not need the image at all.

The four rules that keep it fast

• •Width and height set in the HTML, so the page does not jump around as images load
• •Lazy-loading for everything below the fold, so the first screen does not wait on the rest
• •A modern format and a sensible weight: a hero should not be a 2 MB file
• •Two typefaces at most, self-hosted rather than pulled from a third-party service that blocks the first render

These are not niceties. A slow first screen loses visitors before a word is read, and it is the single thing most AI-built pages get wrong, because the model has no idea how heavy the file it just referenced is.

Alt text, in one line

Every informative image gets an alt that describes what is shown, not "image1" and not the filename. Purely decorative images get an empty alt so a screen reader skips them. It takes your agent seconds when you ask, and it is the difference between a site a blind visitor can use and one they cannot. It also feeds search: alt text is one of the ten checks in the SEO guide.

For what images at scale actually look like on a finished page, the examples are worth two minutes.

Say this

"Use the images in my media library at /_media/, never link an image hosted anywhere else. Set width and height on all of them, lazy-load everything below the fold, keep the hero under a few hundred kilobytes, and write a real alt for each one."