Image Formats
When to Use Each Format
- JPEG: Photos, complex images with gradients
- PNG: Graphics with transparency, screenshots
- WebP: Modern format, smaller file sizes
- SVG: Logos, icons, simple graphics
Recommended Sizes
Hero Images
- Desktop: 1920x1080px
- Mobile: 750x1334px
- File size: Under 200KB
Product Images
- Main image: 800x800px
- Thumbnails: 400x400px
- File size: Under 100KB
Blog Featured Images
- Size: 1200x630px (optimal for social sharing)
- File size: Under 150KB
Logos
- Full logo: 200x50px
- Favicon: 32x32px
- File size: Under 20KB
Compression Guidelines
Quality Settings
- Hero images: 80-85% quality
- Product images: 85-90% quality
- Thumbnails: 70-80% quality
Tools for Compression
- TinyPNG/TinyJPG
- Squoosh
- ImageOptim (Mac)
- ShortPixel
Performance Tips
Lazy Loading
Images below the fold should load lazily. Lindo.ai handles this automatically.Responsive Images
Provide appropriate sizes for different devices. The AI generates responsive images by default.CDN Delivery
Lindo.ai serves images from CDN for faster global delivery.Best Practices
Before Uploading
- Resize to appropriate dimensions
- Compress to reduce file size
- Use correct format
- Name files descriptively
Image Content
- Use high-quality source images
- Ensure proper lighting
- Maintain consistent style
- Consider accessibility (alt text)
Common Mistakes
- Uploading uncompressed images
- Using wrong format (PNG for photos)
- Images too large for display size
- Missing alt text
- Inconsistent aspect ratios
Checking Image Performance
Use browser developer tools:- Open DevTools (F12)
- Go to Network tab
- Filter by Images
- Check file sizes and load times