Using images
Displaying Images
Catalyst Voices allows you to display images from various sources in your proposals. The editor supports images from web URLs, including both traditional web servers and decentralized storage solutions.
Note for Fund14: For the current Fund14 cycle, only URL-based image insertion is available. Additional image upload methods will be added in future releases of Catalyst Voices.
Understanding Image Loading
When you add an image to your document, Catalyst Voices attempts to load it directly. In some cases, especially with decentralized storage networks, images may not load immediately due to cross-origin restrictions.
Why this happens: Web browsers restrict loading content from different domains for security reasons. The editor uses a special technique to display these images properly.
Adding Images to Your Documents
Insert an image from a web URL
Catalyst Voices currently supports inserting images from web URLs only:
Place your cursor where you want the image to appear
Click the image icon in the toolbar
Enter the complete web address of the image
Click "Insert" to add the image
Note: Catalyst Voices will attempt to validate that the URL points to an actual image file. If the validation fails, the image may not appear in your document. Make sure your URL directly links to an image file (e.g., ending with .jpg, .png, .webp, etc.) or a properly configured image serving endpoint.
Future Image Upload Options
The current limitation of URL-only image insertion is specific to the Fund14 release. In future updates to Catalyst Voices, we plan to implement additional methods for adding images, which may include:
Direct file uploads from your device
Integration with Cardano NFT galleries
Drag and drop functionality
Image upload and hosting within the Catalyst ecosystem
Integration with decentralized storage solutions
These features are on our roadmap and will be implemented based on community feedback and prioritization.
Optimizing Images for Catalyst Voices
For the best experience when adding images to your documents:
Prepare images before uploading
Compress images to reduce file size (aim for under 1MB)
Use WebP format when possible for better compression
Keep dimensions reasonable (max width 1200px recommended)
Use descriptive filenames
Choose the right hosting method
For official proposals and governance documents:
Use Blockfrost decentralized storage (see access instructions in Catalyst Dev Guide)
Request access via the Catalyst Discord
For community content and discussions:
NFT.Storage (register with your Cardano wallet)
Pinata decentralized storage (request community access)
GitHub Pages (for static documentation images)
Troubleshooting Image Display Issues
If your images aren't displaying correctly:
Images don't appear in the editor
Check that the image URL is correct
Verify the image exists by pasting the URL in a browser
Ensure the URL points directly to an image file (not a webpage containing an image)
Try using a different image hosting service from the recommended list
For decentralized storage, try using a different gateway
Handling URLs without file extensions
Some image services (like Unsplash, Pexels, or dynamic image APIs) provide URLs that don't end with traditional file extensions (.jpg, .png, etc.) but still serve valid images. These URLs may not be recognized by Catalyst Voices.
Solution: Add a filename parameter
If you're using an image URL without a file extension, try adding ?filename=image.jpg to the end of the URL.
Example:
Original URL from Unsplash that may not work:
Modified URL that should work in Catalyst Voices:
For URLs that already have query parameters (with a ? in them):
If the URL already contains a question mark (?), add the filename parameter with an ampersand (&) instead
Example:
https://example.com/image?width=800&height=600&filename=image.jpg
Images appear and then disappear
Ensure your content is properly pinned on decentralized storage
Check if the hosting service has usage limitations
Try re-uploading the image to a different service
Contact the Catalyst support team for assistance
Recommendations for Image Hosting
Web2 Solutions (Traditional Cloud)
These services offer excellent reliability, performance, and built-in CORS support:
Cloudinary
25GB storage/bandwidth
Pay-as-you-go
Image transformation, optimization
Built-in, easy config
No
Imgix
Trial only
$0.01/1000 images
Advanced transformations
Excellent
No
Bunny.net
No
$1/month minimum
Global CDN, very fast
Simple header config
Yes
ImageKit.io
20GB bandwidth
Pay-as-you-go
Optimization, transformations
Automatic
Yes
Cloudflare Images
No
$5/month for 100K images
Unlimited bandwidth
Native support
No
Web3 Solutions (Decentralized Storage)
While typically less reliable than traditional CDNs, these options prioritize censorship resistance and decentralization:
Pinata
1GB
$0.15/GB/month
IPFS pinning, dedicated gateways
Good
Yes
Arweave
No
One-time payment (~$0.01/MB)
Permanent storage
Excellent
No
NFT.Storage
100GB
Free
Filecoin + IPFS
Variable
No
Filebase
5GB
$5.99/month for 1TB
S3-compatible API
Good
No
Infura IPFS
Limited
Enterprise pricing
Enterprise-grade
Very good
No
Spheron
5GB
Pay-as-you-go
Multi-protocol support
Good
No
Beginner-Friendly Options (Minimal Developer Skills)
For teams with limited development resources:
Netlify
100GB bandwidth/month
Very Easy
Git integration, CDN
< 10 minutes
No
Vercel
Generous free tier
Very Easy
Image optimization built-in
< 10 minutes
No
Firebase Storage
5GB
Moderate
Google infrastructure
< 1 hour
Yes
Imgur API
Limited
Easy
Quick uploads, shared links
< 30 minutes
No
Free Image Resources
The following free stock image services have been tested and work well with Catalyst Voices:
Unsplash
Excellent
High-resolution professional
Yes*
Yes
Pexels
Very Good
Photos and videos
Yes*
Yes
Free-Images.com
Good
Simple interface
Yes
Yes
*May require adding ?filename=image.jpg to URLs without file extensions. See the Handling URLs without file extensions section.
Image License Information
Unsplash
✅ Allowed
✅ Allowed
✅ Allowed
❌ Not required
✅ Allowed
Cannot create a competing service or sell unmodified copies
Pexels
✅ Allowed
✅ Allowed
✅ Allowed
❌ Not required
✅ Allowed
Cannot sell or redistribute unmodified images as stock photos
Free-Images.com
✅ Allowed
✅ Allowed
✅ Allowed
❌ Not required
✅ Allowed
None - completely unrestricted usage
Best Practices for Using Free Stock Images
Always verify the license of each image you use, even from these sites
Consider adding attribution when possible, even if not required
Select images that are relevant to your content and enhance your message
Use professional, high-quality images for proposals and official documents
Avoid overusing stock images that may appear generic
Best Practices for Images in Catalyst Voices
For proposals
Use high-quality, professional images
Keep file sizes small for faster loading
Host images on recommended services
Test image display
For community discussions
Use appropriate image dimensions for the context
Consider image persistence needs when choosing hosting
Respect copyright and only use images you have rights to
Provide sources for all images when applicable
Getting Help with Images
If you're experiencing persistent issues with images in Catalyst Voices:
Join the Catalyst Discord community
Post in the #technical-support channel
Include details about the image type, URL, and where you're trying to use it
Check the GitHub repository for known issues
Last updated