Examples

Practical examples and use cases for the Image Cropper tool.

Basic Examples

Profile Picture Creation

Creating a perfect square profile picture from any image:

1. Upload your photo
   • Choose a portrait or group photo
   • Any format (JPEG, PNG, etc.) works
2. Set aspect ratio to 1:1
   • Click the "1:1" button in aspect ratio settings
   • The crop area becomes a perfect square
3. Position the crop area
   • Center the crop area on the subject's face
   • Adjust size to include desired elements
4. Export settings
   • Format: PNG (for transparency support)
   • Size: 400x400 pixels for most platforms
   • Quality: 90% if using JPEG

Result: Professional-looking square avatar perfect for social media profiles.

Social Media Optimization

Instagram Post (1:1)

• Aspect Ratio: 1:1
• Recommended Size: 1080x1080 pixels
• Format: JPEG
• Quality: 85%

Instagram Story (9:16)

• Aspect Ratio: 9:16
• Recommended Size: 1080x1920 pixels
• Format: JPEG
• Quality: 80%

Twitter Header (16:9)

• Aspect Ratio: 16:9
• Recommended Size: 1500x500 pixels
• Format: JPEG
• Quality: 90%

E-commerce Product Images

Creating consistent product photos:

1. Standard crop dimensions
   • 1000x1000 pixels for main product shots
   • 800x600 pixels for detail shots
   • White background works best
2. Batch processing workflow
   • Set format to JPEG
   • Set quality to 85%
   • Use 1:1 aspect ratio for consistency
   • Process all product images with same settings

Advanced Examples

Web Design Assets

Hero Section Images

Aspect Ratio: 16:9 or 21:9
Size: 1920x1080 or 2560x1080
Format: WebP (fallback: JPEG)
Quality: 75% (balance of quality and loading speed)

Blog Post Thumbnails

Aspect Ratio: 4:3
Size: 800x600
Format: WebP
Quality: 80%
Optimization: Focus on main subject

Card Images

Aspect Ratio: 3:2
Size: 600x400
Format: WebP
Quality: 85%

Photography Workflow

Extracting Details from Large Photos

1. Load high-resolution image
   • Original: 6000x4000 pixels
   • Target: Extract specific detail
2. Precise cropping
   • Use free aspect ratio
   • Zoom in for precise selection
   • Crop to interesting detail
3. Output optimization
   • Maintain high quality (95%)
   • Keep original format if PNG
   • Resize to web-appropriate dimensions

Creating Photo Series

1. Consistent aspect ratio
   • Choose 4:3 for classic look
   • Or 16:9 for modern feel
2. Uniform sizing
   • 1200x900 for 4:3 series
   • 1200x675 for 16:9 series
3. Quality standards
   • JPEG format for photos
   • 90% quality for exhibition
   • 80% quality for web galleries

Workflow Examples

Batch Processing Multiple Images

1. Preparation phase
   - Organize source images in folder
   - Determine target specifications
   - Set up consistent naming convention
   

2. Processing phase
   - Load first image
   - Set aspect ratio and format
   - Set quality and output size
   - Crop and download
   - Repeat for remaining images
   

3. Quality control
   - Review all processed images
   - Check file sizes are appropriate
   - Verify consistent dimensions
   - Test images in target application
   

Creating Image Variants

From a single source image, create multiple variants:

Variant 1: Full Resolution

• Use: High-quality prints
• Settings: Original size, PNG, 100% quality
• Crop: Minimal, preserve original composition

Variant 2: Web Display

• Use: Website galleries
• Settings: 1200px max dimension, JPEG, 85% quality
• Crop: Optimize composition for web viewing

Variant 3: Thumbnail

• Use: Preview grids
• Settings: 300x300px, JPEG, 75% quality
• Crop: Focus on main subject

Variant 4: Mobile Optimized

• Use: Mobile apps
• Settings: 800px max dimension, WebP, 80% quality
• Crop: Ensure important elements are visible on small screens

Troubleshooting Examples

Large File Handling

Problem: 50MB RAW file conversion Solution:

1. Use browser with sufficient memory
2. Close other tabs to free memory
3. Consider pre-processing to reduce file size
4. Use progressive loading if available

Quality vs. File Size Balance

Scenario: Need small file size but good quality

Test different settings:

• WebP format: 30% smaller than JPEG
• 75% quality: Good balance point
• Optimize dimensions for actual use
• Use appropriate aspect ratio

Results comparison:

• Original JPEG (90%): 2.1MB
• Optimized JPEG (75%): 1.2MB
• WebP (75%): 800KB
• WebP (60%): 450KB

Mobile Device Compatibility

Challenge: Processing images on mobile devices

Considerations:

• Reduced memory capacity
• Touch interface for crop adjustment
• Slower processing speed
• Limited download options

Best practices:

• Use smaller source images on mobile
• Reduce output quality slightly
• Test touch gestures for crop adjustment
• Provide clear visual feedback

Integration Examples

WordPress Plugin Integration

// Example: Add crop functionality to WordPress media library
function add_image_cropper_to_media() {
    // Enqueue Image Cropper assets
    wp_enqueue_script('image-cropper', '/path/to/cropper.js');
    wp_enqueue_style('image-cropper', '/path/to/cropper.css');
}
add_action('admin_enqueue_scripts', 'add_image_cropper_to_media');

React Component Integration

import ImageCropper from './ImageCropper';

function MyComponent() {
  const handleCropComplete = (result) => {
    // Handle cropped image
    console.log('Cropped image:', result);
  };

  return (
    <ImageCropper
      aspectRatio={1}
      outputFormat="jpeg"
      quality={85}
      onCropComplete={handleCropComplete}
    />
  );
}

E-commerce Platform Integration

// Example: Shopify app integration
function setupProductImageCropper() {
  const cropper = new ImageCropper({
    container: '#product-image-editor',
    aspectRatio: 1,
    outputFormat: 'jpeg',
    quality: 90,
    onCrop: (result) => {
      uploadProductImage(result.blob);
    },
  });
}