Using Images in Imagine.bo

Add, optimize, and manage images in your app for the best visual results and performance.

Adding Images to Your App

You can incorporate images into your Imagine.bo project in two main ways:

1. Via upload and prompt After your blueprint is generated, Attach your image using the upload button and in your message, describe which part of the website/app should use it.
2. Via prompt instructions You can specify image requirements directly in your prompt or follow-up messages:
   Prompt ExampleCopy

   On the hero section of the homepage, add a full-width background image with a dark overlay behind the headline text.

   Prompt ExampleCopy

   The product listing cards should each display a square thumbnail image on the left side of the card.

Image Sizing and Optimization

Unoptimized images are one of the most common causes of slow load times, which affects both user experience and SEO ranking. Follow these guidelines:

• Hero / banner images: Export at 1920px wide, compressed to under 300KB. Use WebP format where possible.
• Card thumbnails: 400–600px wide, under 80KB.
• Icons and logos: Use SVG format whenever possible — they scale without quality loss and have tiny file sizes.
• Avoid uploading images larger than necessary. A 5MB raw photo on a card thumbnail wastes bandwidth and slows page loads.

Using Images for Brand Consistency

Visual consistency builds trust and makes your app feel professional. When adding images:

• Stick to a consistent aspect ratio for the same type of image (e.g., all team photos are 1:1, all feature images are 16:9).
• Use images that match your brand's color temperature and tone.
• Replace all placeholder/stock images before launching publicly — generic visuals reduce credibility.

Background Images and Overlays

When using images as backgrounds behind text:

• Always apply a semi-transparent dark or light overlay so text remains legible.
• Avoid using busy or high-detail images behind long text passages.
• Use a subtle, low-contrast image (e.g., a texture or blurred photo) for section backgrounds — this adds depth without competing with content.

When prompting for background image sections, specify the overlay:

Add a hero section with a full-width background image and a 50% dark overlay. The headline and CTA button should sit centered on top.

Favicon and App Icons

Your app's favicon (the small icon shown in browser tabs) is a small detail that makes a big difference to professionalism. To add one:

• Prepare a square image at 512×512px in PNG format.
• Use the visual editor or prompt Imagine.bo: "Set the favicon to [image description]."
• For apps deployed on mobile, also include a 192×192px icon for home screen shortcuts.

Accessibility Considerations

All images that carry meaningful content should include descriptive alt text. When prompting for image additions, include the alt text in your instruction:

Add an image of a team collaborating in an office. Alt text: 'Imagine.bo team working together on a product launch.'

Decorative images (backgrounds, dividers) should have empty alt attributes so screen readers skip them.

FAQ