Base code
This commit is contained in:
283
docs-site/docs/features/image-studio/social-optimizer.md
Normal file
283
docs-site/docs/features/image-studio/social-optimizer.md
Normal file
@@ -0,0 +1,283 @@
|
||||
# Social Optimizer User Guide
|
||||
|
||||
Social Optimizer automatically resizes and optimizes images for all major social media platforms. This guide covers platform formats, crop modes, and batch export functionality.
|
||||
|
||||
## Overview
|
||||
|
||||
Social Optimizer eliminates the manual work of resizing images for different platforms. Upload one image and get optimized versions for Instagram, Facebook, LinkedIn, Twitter, YouTube, Pinterest, and TikTok - all in one click.
|
||||
|
||||
### Key Features
|
||||
- **7 Platform Support**: Instagram, Facebook, Twitter, LinkedIn, YouTube, Pinterest, TikTok
|
||||
- **Multiple Formats per Platform**: Choose from various format options
|
||||
- **Smart Cropping**: Preserve important content with intelligent cropping
|
||||
- **Safe Zones**: Visual overlays for text-safe areas
|
||||
- **Batch Export**: Generate optimized versions for multiple platforms simultaneously
|
||||
- **Individual Downloads**: Download specific formats as needed
|
||||
|
||||
## Getting Started
|
||||
|
||||
### Accessing Social Optimizer
|
||||
|
||||
1. Navigate to **Image Studio** from the main dashboard
|
||||
2. Click on **Social Optimizer** or go directly to `/image-studio/social-optimizer`
|
||||
3. Upload your source image to begin
|
||||
|
||||
### Basic Workflow
|
||||
|
||||
1. **Upload Source Image**: Select the image you want to optimize
|
||||
2. **Select Platforms**: Choose one or more platforms
|
||||
3. **Choose Formats**: Select specific formats for each platform
|
||||
4. **Set Options**: Configure crop mode and safe zones
|
||||
5. **Optimize**: Click "Optimize Images" to process
|
||||
6. **Review Results**: View optimized images in grid
|
||||
7. **Download**: Download individual or all optimized images
|
||||
|
||||
## Supported Platforms
|
||||
|
||||
### Instagram
|
||||
|
||||
**Available Formats**:
|
||||
- **Feed Post (Square)**: 1080x1080 (1:1) - Standard square posts
|
||||
- **Feed Post (Portrait)**: 1080x1350 (4:5) - Vertical posts
|
||||
- **Story**: 1080x1920 (9:16) - Instagram Stories
|
||||
- **Reel**: 1080x1920 (9:16) - Reel covers
|
||||
|
||||
**Best For**: Visual content, product showcases, brand posts
|
||||
|
||||
### Facebook
|
||||
|
||||
**Available Formats**:
|
||||
- **Feed Post**: 1200x630 (1.91:1) - Standard feed posts
|
||||
- **Feed Post (Square)**: 1080x1080 (1:1) - Square posts
|
||||
- **Story**: 1080x1920 (9:16) - Facebook Stories
|
||||
- **Cover Photo**: 820x312 (16:9) - Page cover photos
|
||||
|
||||
**Best For**: Business pages, community posts, announcements
|
||||
|
||||
### Twitter/X
|
||||
|
||||
**Available Formats**:
|
||||
- **Post**: 1200x675 (16:9) - Standard tweets
|
||||
- **Card**: 1200x600 (2:1) - Twitter cards
|
||||
- **Header**: 1500x500 (3:1) - Profile headers
|
||||
|
||||
**Best For**: News, updates, engagement posts
|
||||
|
||||
### LinkedIn
|
||||
|
||||
**Available Formats**:
|
||||
- **Post**: 1200x628 (1.91:1) - Standard LinkedIn posts
|
||||
- **Post (Square)**: 1080x1080 (1:1) - Square posts
|
||||
- **Article**: 1200x627 (2:1) - Article cover images
|
||||
- **Company Cover**: 1128x191 (4:1) - Company page banners
|
||||
|
||||
**Best For**: Professional content, B2B marketing, thought leadership
|
||||
|
||||
### YouTube
|
||||
|
||||
**Available Formats**:
|
||||
- **Thumbnail**: 1280x720 (16:9) - Video thumbnails
|
||||
- **Channel Art**: 2560x1440 (16:9) - Channel banners
|
||||
|
||||
**Best For**: Video content, channel branding
|
||||
|
||||
### Pinterest
|
||||
|
||||
**Available Formats**:
|
||||
- **Pin**: 1000x1500 (2:3) - Standard pins
|
||||
- **Story Pin**: 1080x1920 (9:16) - Pinterest Stories
|
||||
|
||||
**Best For**: Visual discovery, product showcases, tutorials
|
||||
|
||||
### TikTok
|
||||
|
||||
**Available Formats**:
|
||||
- **Video Cover**: 1080x1920 (9:16) - Video thumbnails
|
||||
|
||||
**Best For**: Short-form video content, trends
|
||||
|
||||
## Crop Modes
|
||||
|
||||
Social Optimizer offers three crop modes to handle different aspect ratios:
|
||||
|
||||
### Smart Crop
|
||||
|
||||
**Purpose**: Preserve important content with intelligent cropping
|
||||
|
||||
**How It Works**:
|
||||
- Analyzes image composition
|
||||
- Identifies important elements
|
||||
- Crops to preserve focal points
|
||||
- Maintains visual balance
|
||||
|
||||
**When to Use**:
|
||||
- Images with clear subjects
|
||||
- Product photography
|
||||
- Portraits
|
||||
- When content preservation is priority
|
||||
|
||||
**Best For**: Most use cases, especially when you want to preserve important elements
|
||||
|
||||
### Center Crop
|
||||
|
||||
**Purpose**: Crop from the center of the image
|
||||
|
||||
**How It Works**:
|
||||
- Crops from image center
|
||||
- Maintains aspect ratio
|
||||
- Simple and predictable
|
||||
|
||||
**When to Use**:
|
||||
- Centered compositions
|
||||
- Symmetrical images
|
||||
- When center content is most important
|
||||
|
||||
**Best For**: Centered subjects, symmetrical designs
|
||||
|
||||
### Fit
|
||||
|
||||
**Purpose**: Fit image with padding if needed
|
||||
|
||||
**How It Works**:
|
||||
- Fits entire image within dimensions
|
||||
- Adds padding if aspect ratios don't match
|
||||
- Preserves full image content
|
||||
|
||||
**When to Use**:
|
||||
- When you need the full image
|
||||
- Complex compositions
|
||||
- When padding is acceptable
|
||||
|
||||
**Best For**: Images where full content is essential
|
||||
|
||||
## Safe Zones
|
||||
|
||||
Safe zones indicate areas where text will be visible and not cut off on different platforms.
|
||||
|
||||
### What Are Safe Zones?
|
||||
|
||||
Safe zones are visual overlays that show:
|
||||
- **Text-Safe Areas**: Where text will be visible
|
||||
- **Platform-Specific**: Different zones for each platform
|
||||
- **Visual Guides**: Help you position important content
|
||||
|
||||
### Using Safe Zones
|
||||
|
||||
1. **Enable Safe Zones**: Toggle "Show Safe Zones" option
|
||||
2. **View Overlays**: See safe zone boundaries on optimized images
|
||||
3. **Position Content**: Ensure important elements are within safe zones
|
||||
4. **Text Placement**: Place text within safe zones for visibility
|
||||
|
||||
### Platform-Specific Safe Zones
|
||||
|
||||
Each platform has different safe zone requirements:
|
||||
- **Instagram Stories**: Top 25%, bottom 15% safe zones
|
||||
- **Facebook Stories**: Similar to Instagram
|
||||
- **YouTube Thumbnails**: Center area for text
|
||||
- **Pinterest Pins**: Top and bottom safe zones
|
||||
|
||||
## Batch Export
|
||||
|
||||
Generate optimized versions for multiple platforms in one operation:
|
||||
|
||||
### How to Use
|
||||
|
||||
1. **Select Multiple Platforms**: Check boxes for desired platforms
|
||||
2. **Choose Formats**: Select formats for each platform
|
||||
3. **Set Options**: Configure crop mode and safe zones
|
||||
4. **Optimize**: Click "Optimize Images"
|
||||
5. **Review Grid**: See all optimized images in grid view
|
||||
6. **Download All**: Use "Download All" button for bulk download
|
||||
|
||||
### Use Cases
|
||||
|
||||
- **Multi-Platform Campaigns**: One image for all platforms
|
||||
- **Time Saving**: Generate all sizes at once
|
||||
- **Consistency**: Same image across platforms
|
||||
- **Efficiency**: Single operation for multiple exports
|
||||
|
||||
## Best Practices
|
||||
|
||||
### For Multi-Platform Campaigns
|
||||
|
||||
1. **Start with High Resolution**: Use high-quality source images
|
||||
2. **Select All Platforms**: Generate for all relevant platforms
|
||||
3. **Use Smart Crop**: Preserve important content
|
||||
4. **Enable Safe Zones**: Ensure text visibility
|
||||
5. **Review All Formats**: Check each optimized version
|
||||
|
||||
### For Platform-Specific Content
|
||||
|
||||
1. **Choose Single Platform**: Focus on one platform
|
||||
2. **Select Best Format**: Choose format that matches content
|
||||
3. **Optimize Crop Mode**: Use appropriate crop mode
|
||||
4. **Test Display**: Verify on actual platform
|
||||
|
||||
### For Product Photography
|
||||
|
||||
1. **Use Smart Crop**: Preserve product details
|
||||
2. **Enable Safe Zones**: Keep products visible
|
||||
3. **Multiple Formats**: Generate for different use cases
|
||||
4. **High Quality Source**: Start with high-resolution images
|
||||
|
||||
### For Social Media Posts
|
||||
|
||||
1. **Batch Export**: Generate for all platforms at once
|
||||
2. **Consistent Branding**: Use same image across platforms
|
||||
3. **Format Selection**: Choose formats that match content type
|
||||
4. **Safe Zones**: Ensure text and branding are visible
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Common Issues
|
||||
|
||||
**Images Look Cropped Wrong**:
|
||||
- Try different crop mode (Smart vs Center vs Fit)
|
||||
- Check source image composition
|
||||
- Adjust crop mode based on content
|
||||
- Use Fit mode if full image is needed
|
||||
|
||||
**Text Gets Cut Off**:
|
||||
- Enable safe zones to see text-safe areas
|
||||
- Reposition content within safe zones
|
||||
- Use Fit mode to preserve full image
|
||||
- Check platform-specific requirements
|
||||
|
||||
**Quality Issues**:
|
||||
- Use high-resolution source images
|
||||
- Check optimized image dimensions
|
||||
- Verify platform requirements
|
||||
- Consider upscaling source image first
|
||||
|
||||
**Slow Processing**:
|
||||
- Multiple platforms take longer
|
||||
- Large source images increase processing time
|
||||
- Check internet connection
|
||||
- Processing is typically fast (<10 seconds)
|
||||
|
||||
### Getting Help
|
||||
|
||||
- Check platform-specific tips above
|
||||
- Review the [Workflow Guide](workflow-guide.md) for common workflows
|
||||
- See [Implementation Overview](implementation-overview.md) for technical details
|
||||
|
||||
## Cost Considerations
|
||||
|
||||
Social Optimizer is included in Image Studio operations:
|
||||
- **No Additional Cost**: Part of standard Image Studio features
|
||||
- **Efficient Processing**: Optimized for performance
|
||||
- **Batch Savings**: Process multiple platforms in one operation
|
||||
|
||||
## Next Steps
|
||||
|
||||
After optimizing images in Social Optimizer:
|
||||
|
||||
1. **Download**: Save optimized images
|
||||
2. **Organize**: Save to [Asset Library](asset-library.md) for easy access
|
||||
3. **Use**: Upload to your social media platforms
|
||||
4. **Track**: Monitor performance across platforms
|
||||
|
||||
---
|
||||
|
||||
*For technical details, see the [Implementation Overview](implementation-overview.md). For API usage, see the [API Reference](api-reference.md).*
|
||||
|
||||
Reference in New Issue
Block a user