Working with Images and Media

Images make your site visually appealing and help tell your story. Here's how to use them effectively.

The Media Library

Framekit includes a built-in Media Library where all your uploaded images are stored and organized.

Accessing the Media Library

When adding or changing an image in any component, you'll see the Media Library modal with these tabs:

• Gallery: View all your previously uploaded images (default tab)
• Upload: Drag and drop or select files from your computer
• Link: Add images from external URLs
• Stock Images: Search millions of free Unsplash photos

Uploading Images

Method 1: Drag and Drop

Open the Media Library

Go to the Upload tab

Drag files from your computer into the upload area

Images are automatically uploaded and saved

Method 2: File Selection

Click the upload area

Select one or multiple files

Wait for upload to complete

Click an image to select and use it

Using Stock Images (Unsplash)

Access millions of free, high-quality photos:

Go to the Stock Images tab in Media Library

Search for what you need ("office", "nature", "food", etc.)

Browse results in grid or table view

Click an image to use it

The image is automatically added to your site

All stock images are sourced from Unsplash and are free for commercial use.

From Components

Many AI-generated components include image placeholders:

Click on the placeholder image

The Media Library opens

Choose from Upload, Gallery, Unsplash, or Link

Select your image

Supported Formats

• JPEG/JPG - Best for photographs
• PNG - Best for graphics with transparency
• GIF - Animated images (including animated GIFs)
• WebP - Modern, optimized format
• SVG - Scalable vector graphics
• AVIF - Next-gen format (browser support varies)

Image Optimization

Why Optimize?

• Faster page load times
• Better user experience
• Improved SEO
• Lower bandwidth usage

Best Practices

• Resize images before uploading (don't upload huge files)
• Use JPEG for photos, PNG for graphics
• Aim for under 500KB per image
• Use WebP when possible

Recommended Sizes

• Hero backgrounds: 1920x1080 pixels
• Content images: 800-1200 pixels wide
• Thumbnails: 300-400 pixels
• Icons: 64-128 pixels

Image Placement

Full-Width Images

Use for:

• Hero backgrounds
• Section dividers
• Impactful visuals

Inline Images

Use for:

• Content illustrations
• Product photos
• Team member photos

Background Images

Use for:

• Section backgrounds
• Decorative elements
• Subtle textures

Alt Text

What is Alt Text?

Alternative text describes images for:

• Screen readers (accessibility)
• When images don't load
• Search engines (SEO)

Writing Good Alt Text

• Be descriptive but concise
• Describe what's in the image
• Include relevant keywords naturally
• Don't say "image of" or "photo of"

Good: "Woman using laptop in modern office" Bad: "Image of person"

Image Issues

Image Not Displaying

• Check the file format is supported
• Ensure the file isn't corrupted
• Try re-uploading

Image Too Large/Small

• Resize before uploading
• Use image editing in the component
• Check responsive preview

Slow Loading

• Optimize file size
• Use appropriate formats
• Consider image compression tools

Site Icon (Favicon)

Your site icon appears in:

• Browser tabs
• Bookmarks
• Mobile home screens

Setting Your Site Icon

Go to Settings > General

Find the Site Icon section

Click to upload an image

Use a square image (32×32 pixels or multiples like 64×64, 128×128)

Click Save Changes

Open Graph Images

For social media sharing:

Go to Settings > SEO

Upload an OG image

Recommended: 1200x630 pixels

This image appears when your site is shared on social media platforms.