Using images
Choose the right format and size, pick between public/ and src/assets/, write alt text and keep your pages fast.
Good images make a site feel finished. Heavy images make it slow. This page covers the habits. For the tools, see Images and image studio.
Add an image
- From the Images panel: select an element on the canvas, open Images in the left rail, then choose Set as Image or Set as Background in an image's menu.
- With the AI: attach the image to your message with Add to Chat and say where it goes.
- Create one: build or edit an image in the image studio, with photos, uploads, AI generation, text and shapes. Save it to your project.
Where images live
| Folder | How the code uses it | Good for |
|---|---|---|
public/ | By its path, such as /images/hero.webp | Favicons, social images, files you link to by address |
src/assets/ | Imported in a component: import hero from "@/assets/hero.webp" | Images that belong to a page or a component |
The build adds a content hash to the name of imported images, so browsers cache them safely. Files in public/ keep their name.
Pick the right format
| Format | Use it for |
|---|---|
| WebP | Photos and most images. Small and sharp. |
| JPEG | Photos, when WebP is not an option. |
| PNG | Screenshots and images that need a transparent background. |
| SVG | Logos and icons. Sharp at any size. |
The image studio saves as PNG, JPEG or WebP.
Size images for the screen
- Export images close to the largest size they show at. A 4000 px photo in an 800 px column wastes bandwidth.
- Set
widthandheighton each<img>so the page does not jump while it loads. - Add
loading="lazy"to images below the first screen. - Check the phone sizes with frames and devices.
Ask the AI:
Set width and height on every image, and lazy-load the images below the first screen.
Write alt text
Describe what the image shows in a few words, for screen readers and search engines. Use alt="" on images that are only decoration.
Mind the rights
Use images you have the right to use: your own, AI-generated ones, or photos with a license that allows it.