Using Images

Lyna handles the full image workflow: upload from your device, generate with AI, edit with built-in tools, and manage everything in one panel.

The Images panel

Open the Images tab in the left panel to see all images in your project, organized by folder (public/ and src/assets/). From here you can:

Search by filename
Upload new images
Generate images with AI
Edit images (crop, adjust)
Rename or delete
Select multiple for batch operations

Uploading images

Click Upload in the Images panel, or drag and drop files onto the modal.

Select your files

Choose one or more image files. Lyna accepts PNG, JPEG, WebP, SVG, and GIF.

Choose a destination folder

Pick public/ (accessible by URL) or src/assets/ (imported in code). For most cases, public/ is the right choice.

Upload

Click Upload. The images are written to your sandbox filesystem and appear in the panel immediately.

Tip

You can also paste images directly into the AI chat as visual references. The AI can see the image and use it to guide code generation.

"A minimalist illustration of a cloud server with connected devices, using blue and white tones on a transparent background."

Configure options

Aspect ratio: 1:1, 16:9, 9:16, 4:3, or 3:4
Model: NB2 (fastest), Pro (highest quality), or Classic
Destination folder: Where to save the result

Generate and save

Click Generate. The image is produced and saved to your project in a few seconds.

Model comparison

Model	Best for	Speed
NB2	General-purpose, fast iterations, supports thinking mode and higher resolutions	Fast
Pro	High-quality, detailed images with better prompt adherence	Medium
Classic	Reliable, consistent results for standard generation	Medium

Built-in image editor

Every image in your project can be edited directly in Lyna.

Cropping

Select an image in the panel and click the edit icon. The crop tool supports:

Freeform cropping: Drag handles to any size
Aspect ratio presets: Lock to 1:1, 16:9, 4:3
Circle stencil: Crop to a circle for avatars

Adjustments

Adjustment	What it does
Brightness	Lighten or darken
Contrast	Difference between light and dark areas
Saturation	Color intensity
Hue	Overall color tone shift

Output settings

When saving, choose:

Format: Auto (keeps original), JPEG, PNG, or WebP
Quality: Compression level for the output

Using images in prompts

Paste screenshots or upload files directly into the chat input. Useful for:

Showing the AI a design mockup to replicate
Pointing out a visual bug
Providing a reference image for style or layout

The AI analyzes the image and uses it as context.

Best practices for web images

Choose the right format

Format	Best for
WebP	General-purpose, best compression-to-quality ratio
PNG	Transparency, icons, screenshots
JPEG	Photographs where file size matters and transparency is not needed
SVG	Icons, logos, simple illustrations that need to scale

Optimize file size

Large images slow down your app.

Resize before uploading. If your image displays at 400px wide, do not upload a 4000px original.
Use WebP when possible. WebP files are 25-35% smaller than JPEG at equivalent quality.
Compress with the quality slider. Drop to 80-85% for photos. The visual difference is negligible but the file size drops significantly.

Use the public folder correctly

public/ for images accessed by URL (favicons, OG images, hero backgrounds)
src/assets/ for images imported in code and processed by the bundler

Alt text

Always add meaningful alt text to images. Ask the AI to include it when generating components:

"Add the hero image with alt text that describes the content for screen readers."

Good for accessibility and SEO.