Adding Images and Media
A wall of text, no matter how well written, is harder to absorb than the same content broken up with screenshots, diagrams, and embedded videos. Visual media doesn't just decorate your pages — it communicates. A single annotated screenshot can replace two paragraphs of navigation instructions, and an embedded walkthrough video can onboard a new team member faster than any written guide.
Quixli supports images, video, audio, embedded content from 50+ external services, and file attachments — all managed through the same block-based editor you use for text. This guide covers how to add each type, configure its display, and keep your pages fast and accessible.
Supported Formats and Limits
Before you upload, it helps to know what Quixli accepts and the limits that apply to your plan:
Media Type | Supported Formats | Max File Size | Notes |
|---|---|---|---|
Images | JPG, PNG, GIF, SVG, WebP | 10 MB | Auto-compressed on upload |
Videos | MP4, WebM (or embed URL) | 100 MB (Free) / 500 MB (Pro) | YouTube, Vimeo, Loom also supported |
Audio | MP3, WAV, OGG | 50 MB | Renders with waveform player |
Documents | 25 MB | Inline viewer or download card | |
Embeds | URL from 50+ services | N/A | Figma, CodePen, Google Docs, Miro, etc. |
Adding Images
There are four ways to get an image onto a page, and the best one depends on where the image already lives:
Drag and Drop
The most intuitive method: drag an image file from your desktop (or file manager) and drop it directly onto the page. A blue insertion line shows where the image will land. Once you release, the file uploads in the background and the image block appears immediately with a progress indicator.
Slash Command
Type /image in any empty block to open the image uploader. You can browse your computer for a file, drag one into the upload zone, or switch to the URL tab to embed an image hosted elsewhere. This method is useful when you want to position the image precisely before uploading.
Paste from Clipboard
Copy an image from any application — a browser, a design tool, even a screenshot — and press Cmd/Ctrl + V in the editor. Quixli detects image data in the clipboard and creates an image block automatically. This is especially powerful with OS-level screenshot tools (Cmd + Shift + 4 on Mac, Windows + Shift + S on Windows): capture a region, switch to Quixli, and paste. No intermediate file needed.
URL Embed
If your image is already hosted (on a CDN, in an S3 bucket, or on the web), type /image, switch to the URL tab, paste the URL, and press Enter. The image embeds by reference — Quixli doesn't re-upload it, so there's no storage cost.
Image Settings
Click any image to reveal the toolbar with sizing, alignment, and metadata options:
Setting | Options | When to Use |
|---|---|---|
Size | Original, Full Width, Page Width, Custom | Full Width for hero images; Page Width is the safe default |
Alignment | Left, Center, Right | Center for standalone images; Left/Right for text wrap |
Caption | Free-text below the image | Always add one — it provides context and helps SEO |
Alt Text | Screen-reader description | Required for accessibility; also used by search engines |
You can also replace an image without deleting the block (preserving its position, caption, and size settings), download the original file, or view at full size in a new tab — all from the image block's context menu (⋮).
Working with Video
Quixli supports two approaches to video: embedding from a service or uploading a file directly. In most cases, embedding is better — the video streams from the provider's CDN, doesn't count against your storage quota, and gives viewers familiar player controls.
Embedding a Video
Type /video (or /embed) and paste the URL. Quixli auto-detects the provider and renders the correct player. Supported services include YouTube, Vimeo, Loom, and Wistia. The embed respects the provider's privacy settings — if the video is unlisted or private, only viewers with the right access can see it.
Uploading a Video File
For screen recordings or internal videos that shouldn't live on a public platform, upload an MP4 or WebM file directly. Quixli's built-in player handles playback with controls for play/pause, volume, full-screen, and scrubbing. Keep in mind the file-size limits — 100 MB on Free plans, 500 MB on Pro.
Storage Awareness
Uploaded videos consume storage quota quickly. A 5-minute 1080p screen recording can easily reach 50–80 MB. For longer videos, consider uploading to YouTube (unlisted) or Loom and embedding the link instead.
Embedding External Content
Beyond images and video, Quixli can embed live, interactive content from over 50 services. Type /embed, paste a URL, and the editor renders it inline. Readers interact with the embed directly inside your page — no navigation away.
Category | Services | What Renders |
|---|---|---|
Design | Figma, Miro, Sketch | Interactive design files with zoom and pan |
Code | CodePen, JSFiddle, GitHub Gist, Repl.it | Live code editors and output |
Docs | Google Docs, Sheets, Slides, Notion | Read-only document previews |
Maps | Google Maps, Mapbox | Interactive, scrollable maps |
Social | Twitter/X, Instagram, LinkedIn | Formatted post cards |
Forms | Google Forms, Typeform, Airtable | Fillable forms inside your page |
If Quixli doesn't auto-detect a pasted URL, it falls back to a generic iframe embed. You can adjust the embed's height, width, and aspect ratio from its toolbar.
Image Optimization Best Practices
Large, unoptimized images are the number-one cause of slow page loads. A few habits will keep your pages snappy:
- Choose the right format: Use JPG for photographs, PNG for graphics with transparency, WebP for the best of both worlds (smallest file size with good quality), and SVG for icons and logos
- Compress before uploading: Tools like TinyPNG, Squoosh, or ImageOptim can reduce file sizes by 50–80% with no visible quality loss. Aim for 80–90% quality
- Resize to display dimensions: There's no benefit to uploading a 4000 px-wide photo if it displays at 800 px. Resize first and save bandwidth
- Always add alt text: Describe the image content for screen readers and for situations where the image can't load. Good alt text also helps search engines index your content
- Use captions for context: A caption below the image tells readers why the image is there, not just what it shows
Frequently Asked Questions
Can I rearrange images after adding them?
Yes — images are blocks, so you drag them by their handle just like any other block. You can also cut (Cmd/Ctrl + X) an image block and paste it at a new location.
What happens if I delete an image from a page?
The image block is removed from the page, but the file remains in your storage (Settings → Files) until you explicitly delete it. This means you can re-insert the same image without re-uploading.
Can I use images from Google Drive or Dropbox?
Not directly, but you can copy the sharing URL of a publicly accessible image and embed it via the URL tab. For private files, download first, then upload to Quixli for reliable display.
Why does my embedded video show a blank frame?
The video's privacy settings on the source platform may block embedding. On YouTube, ensure the video isn't set to "Private." On Vimeo, check that embedding is enabled in the video's settings. Loom videos must have their share link set to "Anyone with the link."
Is there a limit on how many images I can add to one page?
No hard limit, but pages with more than 50 images will load more slowly for readers. If you're building an image-heavy gallery, consider splitting across multiple pages or using a Quix Collection with dedicated gallery pages.