Skip to main content
Images are essential for creating engaging landing pages. Blox provides a media library where you can upload, organize, and use images across all your pages.

Uploading images

There are several ways to add images to your brand’s media library:

Drag and drop

Drag an image file directly onto an image input area in the style panel. The image uploads automatically and is added to your library.

File picker

Click on an image input area to open your system’s file picker. Select an image to upload it.

Through AI prompts

When chatting with the AI, you can attach images to your messages. These images can be used as references or added directly to your pages.

Supported formats

Blox supports common image formats:
  • JPEG — Best for photographs
  • PNG — Best for graphics with transparency
  • WebP — Modern format with good compression
  • GIF — Supports animation
  • SVG — Vector graphics that scale perfectly

Using images in your pages

Via the style panel

When you select an element that can contain an image (like an image tag or background), the style panel shows an image input:
  1. Click the image input area
  2. Drag an image onto it or click to browse
  3. The image uploads and appears in the preview

Via AI prompts

Ask the AI to add or change images:
  • “Add my logo to the header”
  • “Use the team photo as the background for the about section”
  • “Replace the hero image with the product screenshot”
The AI has access to your media library and can select appropriate images based on your instructions.

Images from your brand

During brand setup, Blox automatically downloads images from your website. These include:
  • Your logo
  • Your favicon
  • Your Open Graph image (used for social sharing)
  • Other images found on your site
These are immediately available in your media library for use in landing pages.

Image delivery

Uploaded images are stored on Blox’s global network and served through our CDN. This means:
  • Fast loading times worldwide
  • Automatic optimization for different devices
  • Reliable availability

Tips for images

  • Use high-quality images: Blurry or pixelated images make your page look unprofessional
  • Consider file size: Large images slow down page load times
  • Add alt text: Describe images for accessibility and SEO
  • Match your brand: Choose images that align with your brand’s visual style