Image Library
Organize and reuse your uploaded images across all presentations. The Image Library provides a central repository for your media assets.
Overview
Section titled “Overview”Every image you upload to Deckyard is stored in your Image Library. This makes it easy to reuse images across presentations without uploading them again.
Uploading Images
Section titled “Uploading Images”From the Editor
Section titled “From the Editor”- Click any image field in a slide
- Click Upload in the image picker
- Select an image from your computer
- The image uploads and is added to your library
Supported Formats
Section titled “Supported Formats”| Format | Best For |
|---|---|
| JPEG | Photos, complex images |
| PNG | Graphics, screenshots, transparency |
| GIF | Animated images |
| WebP | Modern format, smaller sizes |
| SVG | Logos, icons (vector) |
Size Limits
Section titled “Size Limits”- Maximum file size: 10 MB (configurable by admin)
- Recommended resolution: 1920x1080 for full-screen slides
- Images are not automatically resized on upload
Browsing the Library
Section titled “Browsing the Library”Accessing Your Library
Section titled “Accessing Your Library”- Click any image field in the editor
- Switch to the Library tab
- Browse your uploaded images
Organization
Section titled “Organization”Images are displayed with:
- Thumbnail preview
- Filename
- Upload date
- Dimensions
Search
Section titled “Search”- Search by filename
- Filter by recent uploads
- Sort by date or name
Selecting Images
Section titled “Selecting Images”Quick Select
Section titled “Quick Select”Click any image thumbnail to insert it into the current field.
Preview
Section titled “Preview”Hover over an image to see:
- Larger preview
- Full filename
- Dimensions
- File size
Image Sources
Section titled “Image Sources”The image picker provides multiple sources:
Library Tab
Section titled “Library Tab”Your uploaded images, organized by recency.
Upload Tab
Section titled “Upload Tab”Upload new images from your computer.
Unsplash Tab
Section titled “Unsplash Tab”Search stock photos from Unsplash (if configured). See Unsplash Integration.
Giphy Tab
Section titled “Giphy Tab”Search GIFs from Giphy (if configured). See Giphy Integration.
URL Tab
Section titled “URL Tab”Paste any external image URL.
Managing Images
Section titled “Managing Images”Storage
Section titled “Storage”Uploaded images are stored on your server in the uploads directory:
server/uploads/├── {user-id}/│ ├── image1.jpg│ ├── image2.png│ └── ...Deleting Images
Section titled “Deleting Images”Currently, images must be deleted through the file system. A library management interface is planned for a future release.
Image CDN
Section titled “Image CDN”For production deployments, consider using an image CDN like ImageKit for:
- Automatic optimization
- Responsive sizing
- Global delivery
- Format conversion
See Media Services for CDN configuration.
Best Practices
Section titled “Best Practices”Before Uploading
Section titled “Before Uploading”- Optimize images - Compress files before uploading
- Use descriptive names -
team-photo-2024.jpgvsIMG_4532.jpg - Check dimensions - Match intended display size
- Verify licensing - Only upload images you have rights to use
Organization
Section titled “Organization”- Organize by project or purpose
- Use consistent naming conventions
- Remove unused images periodically
Performance
Section titled “Performance”- Use JPEG for photos (better compression)
- Use PNG only when transparency is needed
- Consider WebP for modern browsers
- Keep file sizes under 500KB when possible
Image Usage in Slides
Section titled “Image Usage in Slides”Image Fields
Section titled “Image Fields”Different slide types have different image handling:
| Slide Type | Image Handling |
|---|---|
| Image Slide | Full-screen with layout options |
| Team Cards | Cropped to square or original |
| Title Slide | Background with overlay |
| Logo Wall | Uniform sizing |
Focus Points
Section titled “Focus Points”For cropped images, set focus points to control which part of the image is visible:
focusX: Horizontal position (0-100)focusY: Vertical position (0-100)
Alt Text
Section titled “Alt Text”Always provide alt text for accessibility:
- Describe the image content
- Keep descriptions concise
- Mark decorative images appropriately
Integration with External Services
Section titled “Integration with External Services”Unsplash
Section titled “Unsplash”Search and insert free stock photos:
- High-quality images
- No attribution required (but appreciated)
- Requires API key configuration
Search and insert GIFs:
- Animated content
- Reactions and expressions
- Requires API key configuration
ImageKit (CDN)
Section titled “ImageKit (CDN)”Automatic image optimization:
- Resize on-the-fly
- Format conversion
- Quality optimization
- Global CDN delivery