Project images

Your logo, your photos, the illustrations created by the agent: all your app’s images are project files, stored in the public/ folder. The Images tab is their library. A project image shows in the preview right away, is published with the site and is part of the versions.

The library

Click the Images tab at the top of the editor. You see all the project’s images (the count shows next to the Project images title), as thumbnails. For each one:

• the thumbnail: click it to enlarge the image; its URL shows above it;
• its file name;
• its usage: Used in the site, Used N times in the site, or Not used yet (Highwind counts how many times the site’s code references it);
• its actions: Use in the chat, Copy URL, Rename and Delete.

Upload images

1. Click Upload images at the top right, and pick one or more files on your computer.

   Or drop your images straight onto the tab (“Drop your images here”).

2. The images are resized in your browser, then saved in the project’s public/assets/ folder. They show up in the library, marked Not used yet.

3. Ask the agent to place them (see below), or replace an existing image of the site in Design mode.

Accepted formats: PNG, JPEG, WebP and GIF. An uploaded image is resized so its longest side is at most 2,400 pixels, and converted to WebP (a lightweight format); a light enough GIF is kept as is. If an image with the same name already exists, the new one gets a different name: nothing is overwritten.

You can also upload an image from the chat (+ menu → Attach → Upload an image to the project) or when answering an agent form: it ends up in the same place.

Use an image

In the chat

Click Use in the chat below an image: it’s attached to your next message, with its URL, and the agent knows it must use that file in the site.

Put this photo full width in the hero section, with the heading on top of it.

SVG images can’t be attached to the chat (the agent can’t look at them): the button then says “The agent can’t look at this format (SVG): mention its URL in your message”.

By its URL

Click Copy URL (“URL copied”): you get the image’s address in the site, for example /assets/team.webp. Since the public/ folder is served at the root of the site, public/assets/team.webp shows at /assets/team.webp. Paste it into a message to the agent, into Design mode’s Image (URL) field, or into the code.

In Design mode

In Design mode, on an image of the site, Pick a project image opens this same library to replace the image in one click, without the agent.

Rename an image

Click the pencil (Rename (the site’s code is updated)), type the new name and confirm with Enter (Esc cancels). The image keeps its folder and extension, and every reference to the image in the site’s code is updated: nothing breaks. A clear name (bakery-logo.webp rather than IMG_2024.webp) also helps the agent find its way.

Delete an image

Click the bin (Delete). Highwind asks for confirmation (Delete this image?) and warns you if the site still uses it (“The site uses it N times: it will no longer show.”). Confirm with Delete, or Cancel.

Caution

Deleting an image that’s still used leaves a gap in the site. Ask the agent to replace it or remove the block that shows it instead, then delete it.

Images generated by the agent

When the design calls for it (a hero section, products, a gallery), the agent can create images in the style of your theme. While it works, the Creates the image … step shows in the chat. These images are saved in public/assets/, like yours: you’ll find them in the library, and you can replace them with your own photos or delete them. The agent never replaces an image you provided. See Generated images.

Limits and good to know

• Size: 5 MB max per image, after resizing by the browser (“Image too large (5 MB max)”).
• Count: 100 images max in public/assets/ (“The project already has 100 images: delete some before adding more”).
• While the agent is working, the library is read-only (“The agent is working: read-only”): you can’t upload, rename or delete.
• On an old version, the tab shows the images of the current version, read-only (“Images of the current version”).
• Images and versions: uploading, renaming or deleting an image doesn’t create a version on its own. These changes go into the next version (an agent reply, a Design mode edit, a code save).

Note

An image that’s uploaded but never used before the next version can disappear if the preview environment is recreated (after a long sleep, for example). Place it in the site without delay, or upload it again if it’s gone.

See also

Chatting with the agentReference image or image for the site.

Design modeReplace a site image without the agent.

Generated imagesIllustrations created by the agent.

The codeThe public/ folder in the Code tab.