Smart Cropping with BunnyCDN - Face Detection & Auto Crop Guide

BunnyCDN Optimizer includes powerful smart cropping features with AI-powered face detection that automatically crops images perfectly. Instead of manually editing each image, Bunny's smart cropping detects faces, analyzes content, and crops to ideal positions in milliseconds using simple URL parameters.

This works perfectly for profile pictures, thumbnails, and responsive layouts. Learn about other image optimization features.

What is BunnyCDN Smart Cropping?

Smart cropping is a feature in BunnyCDN Optimizer (Bunny's image optimization service) that automatically crops images to the most important areas instead of simple center cropping.

Why Smart Cropping Matters

Without smart cropping (manual editing):

• Takes 10-15 minutes per image to edit
• Faces get cut off in thumbnails
• Different crops needed for mobile vs desktop
• Inconsistent results across images
• Expensive designer time

With BunnyCDN smart cropping:

• Automatic cropping via URL parameters
• AI detects faces and keeps them in frame
• Instant processing (100-200ms)
• One image URL works for all devices
• No manual editing needed

Example: Upload one team photo, automatically extract perfect headshots for each person using different crop parameters.

Smart Face Crop with AI

BunnyCDN's most powerful feature is AI-powered face detection that automatically detects and centers people's faces in your crops.

How BunnyCDN Face Crop Works

Face detection process:

1. Analyzes image in milliseconds
2. Detects all human faces automatically
3. Calculates optimal crop position
4. Centers crop on faces with padding
5. Ensures all faces stay in frame

Face Crop Parameters

Format 1 - Auto Size (face_crop=true):

https://yourcdn.b-cdn.net/image.jpg?face_crop=true

What BunnyCDN does:

• Finds all detectable faces
• Automatically determines best crop size
• Adds padding around faces
• Keeps all faces visible

Perfect for: Team photos, group pictures

Format 2 - Specific Dimensions (face_crop=width,height):

https://yourcdn.b-cdn.net/image.jpg?face_crop=800,1000

What BunnyCDN does:

• Detects faces in the image
• Centers crop on single face (or midpoint between multiple faces)
• Crops to your specified 800x1000 pixels
• Ensures proper framing

Perfect for: Profile pictures, user avatars, thumbnails

Face Crop Example

Scenario: Wide landscape photo with person on the left side

Without face crop:

?crop=800,1000

• BunnyCDN crops from center
• Person's face gets cut off
• Shows empty space on right
• Unusable as profile picture

With BunnyCDN face crop:

?face_crop=800,1000

• Automatically detects face on left
• Centers crop on the person
• Perfect framing with padding
• Professional profile picture ready

Time saved: 5-10 minutes of manual editing per image.

BunnyCDN Cropping Methods

BunnyCDN Optimizer offers four smart cropping methods:

1. Aspect Ratio Crop

Parameter: aspect_ratio

Automatically crop to specific aspect ratios for different platforms and layouts.

Common use cases:

?aspect_ratio=1:1      (Square - Instagram, profile pictures)
?aspect_ratio=16:9     (Widescreen - YouTube thumbnails)
?aspect_ratio=4:3      (Standard photos)
?aspect_ratio=2:3      (Portrait - mobile screens)

Example - Instagram post from landscape photo:

https://yourcdn.b-cdn.net/blog-photo.jpg?aspect_ratio=1:1&width=1080

BunnyCDN automatically:

• Crops landscape to square
• Resizes to 1080x1080
• Centers the crop
• Perfect for Instagram without manual editing

Real benefit: One photo works for Instagram (1:1), Twitter (16:9), and Pinterest (2:3) using different aspect ratio parameters.

2. Crop Gravity

Parameter: crop_gravity

Control where BunnyCDN "snaps" the crop when using width/height format.

Available positions:

?crop_gravity=center      (Center - default)
?crop_gravity=north       (Top center - faces at top)
?crop_gravity=south       (Bottom center - products on table)
?crop_gravity=east        (Right center)
?crop_gravity=west        (Left center)
?crop_gravity=northeast   (Top right - logos in corner)
?crop_gravity=northwest   (Top left)
?crop_gravity=southeast   (Bottom right)
?crop_gravity=southwest   (Bottom left)

Example - Portrait with face at top:

?crop=800,800&crop_gravity=north

BunnyCDN crops 800x800 from top of image, keeping face in frame even if it's not centered.

Example - Product on table (overhead shot):

?crop=600,600&crop_gravity=south

BunnyCDN focuses on bottom area where product sits.

3. Focus Crop

Parameter: focus_crop

Crop centered on a specific point you choose.

Format - Relative Coordinates (recommended):

?focus_crop=800,600,0.7,0.3

• Crops to 800x600 pixels
• Centers on 70% from left, 30% from top
• Works with any original image size
• Perfect for templates

Format - Absolute Coordinates:

?focus_crop=800,600,1200,800

• Crops to 800x600 pixels
• Centers on pixel position X=1200, Y=800
• Exact control for specific images

Use case - Product catalog:

?focus_crop=600,600,0.5,0.6

Products in overhead shots usually appear center-horizontal (0.5) and slightly below center-vertical (0.6). This one parameter works perfectly for entire catalog.

4. Standard Crop

Parameter: crop

Manual crop with optional position coordinates.

Format 1 - Width and Height:

?crop=800,600

Uses center gravity by default (combine with crop_gravity for control).

Format 2 - With Position:

?crop=800,600,100,50

Crops 800x600 starting at X=100, Y=50 in original image.

Important: BunnyCDN applies crop first, then resizing:

?crop=1000,800&width=500

1. BunnyCDN crops to 1000x800 from original
2. Then resizes to 500px wide (~400px tall)

How to Use Smart Cropping

Basic Implementation

Profile picture with face detection:

<img
  src="https://yourcdn.b-cdn.net/users/john.jpg?face_crop=200,200&quality=90"
  alt="John Doe"
  class="rounded-full"
/>

YouTube thumbnail (16:9):

<img
  src="https://yourcdn.b-cdn.net/videos/thumbnail.jpg?aspect_ratio=16:9&width=1280&quality=85"
  alt="Video thumbnail"
/>

Product image with focus:

<img
  src="https://yourcdn.b-cdn.net/products/item.jpg?focus_crop=800,800,0.5,0.6&quality=85"
  alt="Product"
/>

Combining BunnyCDN Parameters

Face crop + optimization:

?face_crop=800,800&quality=85&sharpen=true&auto_optimize=medium

BunnyCDN processing order:

1. Detects face and crops to 800x800
2. Optimizes to 85% quality
3. Sharpens the image
4. Applies medium auto-optimization

Aspect ratio + resize + optimization:

?aspect_ratio=16:9&width=1920&quality=90&auto_optimize=low

Responsive Images with BunnyCDN

Different crops for different screens:

<picture>
  <!-- Desktop: Wide 16:9 crop -->
  <source
    media="(min-width: 1024px)"
    srcset="
      https://yourcdn.b-cdn.net/hero.jpg?aspect_ratio=16:9&width=1920&quality=85
    "
  />

  <!-- Tablet: Standard 4:3 -->
  <source
    media="(min-width: 640px)"
    srcset="
      https://yourcdn.b-cdn.net/hero.jpg?aspect_ratio=4:3&width=1024&quality=85
    "
  />

  <!-- Mobile: Square with face detection -->
  <img
    src="https://yourcdn.b-cdn.net/hero.jpg?face_crop=800,800&quality=80"
    alt="Hero"
    loading="lazy"
  />
</picture>

Result: BunnyCDN serves perfect crops for desktop (wide), tablet (standard), and mobile (square with faces).

Real-World Examples

1. User Profile Pictures

Challenge: Users upload photos in any size, faces anywhere.

BunnyCDN solution:

<img
  src="https://cdn.yoursite.com/users/avatar-{id}.jpg?face_crop=200,200&quality=90"
  alt="User"
/>

What happens:

• Any uploaded photo (landscape, portrait, square)
• BunnyCDN automatically detects face
• Centers 200x200 crop on face
• Consistent professional avatars

Savings: Manual cropping takes 30 seconds per user × 10,000 users = 83 hours saved.

2. Blog Thumbnails for Multiple Platforms

Challenge: Need different sizes for homepage, sidebar, social media.

BunnyCDN solution - One upload, multiple crops:

// Homepage (16:9)
const homepageUrl = `${image}?aspect_ratio=16:9&width=800&quality=85`

// Sidebar (1:1)
const sidebarUrl = `${image}?aspect_ratio=1:1&width=300&quality=85`

// Facebook share (1.91:1)
const fbUrl = `${image}?aspect_ratio=1.91:1&width=1200&quality=90`

Result: Upload once to BunnyCDN, get perfect crops for all placements automatically.

3. E-commerce Product Grid

Challenge: Overhead product photos with item not perfectly centered.

BunnyCDN solution:

<img
  src="https://cdn.shop.com/products/{id}.jpg?focus_crop=800,800,0.5,0.55&quality=90"
  alt="Product"
/>

Why this works:

• Products usually in center-ish area
• 0.5 horizontal = centered
• 0.55 vertical = slightly below center (common for overhead)
• BunnyCDN applies same crop to entire catalog
• Consistent 800x800 grid without manual editing

4. Team Directory from Group Photo

Challenge: Extract individual headshots from one group photo.

BunnyCDN solution:

const teamMembers = [
  { name: 'Alice', position: [0.2, 0.3] },
  { name: 'Bob', position: [0.5, 0.3] },
  { name: 'Carol', position: [0.8, 0.3] },
]

// Generate individual headshots
teamMembers.map((member) => (
  <img
    src={`https://cdn.company.com/team-photo.jpg?focus_crop=300,300,${member.position[0]},${member.position[1]}&quality=90`}
    alt={member.name}
  />
))

Result: BunnyCDN extracts 20 perfect headshots from one group photo in seconds.

5. Social Media Auto-Posting

Challenge: Auto-post to Instagram (1:1), Twitter (16:9), Pinterest (2:3).

BunnyCDN solution:

function generateSocialImage(baseUrl, platform) {
  const ratios = {
    instagram: '?aspect_ratio=1:1&width=1080&quality=90',
    twitter: '?aspect_ratio=16:9&width=1200&quality=85',
    pinterest: '?aspect_ratio=2:3&width=1000&quality=85',
  }

  return baseUrl + ratios[platform]
}

Result: BunnyCDN handles all platform-specific crops automatically.

BunnyCDN Smart Cropping Performance

Processing Speed

• Simple images: 50-100ms
• Face detection: 100-200ms
• Subsequent requests: ~10ms (cached at edge)
• Global CDN: Cached at 140+ locations worldwide

First request: BunnyCDN processes and caches All future requests: Instant delivery from nearest edge location

Face Detection Accuracy

Based on BunnyCDN's AI:

• Single face: ~99% detection success
• Multiple faces: ~95% success
• Works with: Glasses, hats, partial side views
• Struggles with: Very small faces (<50px), extreme angles, very low light

Cost Savings

Manual editing costs:

• Designer: $50-100/hour
• 100 images at 15 min each = 25 hours
• Total: $1,250-$2,500

BunnyCDN Optimizer:

• $9.50/month = $114/year
• Unlimited cropping operations
• Savings: $1,000+ per 100 images

Best Practices with BunnyCDN

Do's ✅

1. Use face crop for people:

?face_crop=800,800&quality=85

2. Use relative coordinates for flexibility:

?focus_crop=600,600,0.5,0.6

Works with any source image size.

3. Combine with optimization:

?face_crop=400,400&quality=85&auto_optimize=medium

Smaller files, better performance.

4. Test different gravity positions:

?crop=800,600&crop_gravity=north
?crop=800,600&crop_gravity=south

Don'ts ❌

1. Don't use absolute coordinates for responsive:

❌ ?focus_crop=800,800,1500,900
✅ ?focus_crop=800,800,0.6,0.5

2. Don't skip quality optimization:

❌ ?face_crop=800,800
✅ ?face_crop=800,800&quality=85

3. Don't use face crop for landscapes:

❌ ?face_crop=true (on nature photos)
✅ ?aspect_ratio=16:9&crop_gravity=center

4. Don't forget to test on real devices: Desktop preview ≠ Mobile reality.

Troubleshooting BunnyCDN Smart Cropping

Face Not Detected

Problem: BunnyCDN face crop returns wrong crop or empty.

Solutions:

1. Face too small: Must be at least 50x50 pixels
2. Poor quality: Use higher quality source
3. Fallback strategy:

const imageUrl = hasFace
  ? `${url}?face_crop=800,800&quality=85`
  : `${url}?aspect_ratio=1:1&width=800&crop_gravity=center&quality=85`

Wrong Crop Position

Problem: Gravity crop cuts off important content.

Solutions:

Try different gravity:

?crop=800,600&crop_gravity=north     (if subject at top)
?crop=800,600&crop_gravity=south     (if subject at bottom)

Or switch to focus crop:

?focus_crop=800,600,0.6,0.4

Crop Too Tight

Problem: BunnyCDN face crop cuts off edges.

Solutions:

Use auto-size face crop:

?face_crop=true

Or crop larger then resize:

?face_crop=400,400&width=200

Crops 400x400, resizes to 200x200 for more breathing room.

BunnyCDN vs Manual Cropping

Time Comparison

Manual workflow: 10-15 minutes per image

• Download original
• Open in editor
• Crop for desktop
• Crop for tablet
• Crop for mobile
• Export and upload all versions

BunnyCDN workflow: 30 seconds per image

• Upload original once
• Add URL parameters

For 100 images:

• Manual: 16-25 hours
• BunnyCDN: 50 minutes
• Time saved: 95%

Feature Comparison

Getting Started with BunnyCDN Smart Cropping

Step 1: Enable BunnyCDN Optimizer

1. Sign up for BunnyCDN
2. Enable Bunny Optimizer ($9.50/month)
3. Configure your pull zone
4. Point to your image origin

Step 2: Use Smart Cropping Parameters

Add parameters to your image URLs:

<!-- Face crop for profiles -->
<img src="https://yourcdn.b-cdn.net/user.jpg?face_crop=200,200" alt="User" />

<!-- Aspect ratio for thumbnails -->
<img
  src="https://yourcdn.b-cdn.net/post.jpg?aspect_ratio=16:9&width=800"
  alt="Post"
/>

<!-- Focus crop for products -->
<img
  src="https://yourcdn.b-cdn.net/product.jpg?focus_crop=600,600,0.5,0.6"
  alt="Product"
/>

Step 3: Combine with Other Optimizations

?face_crop=800,800&quality=85&auto_optimize=medium&sharpen=true

BunnyCDN handles:

• Smart cropping
• Quality optimization
• Sharpening
• Format conversion (WebP/AVIF)
• Global CDN delivery

Conclusion

BunnyCDN Optimizer's smart cropping features eliminate manual image editing for most use cases:

Best for:

• ✅ Profile pictures (face crop)
• ✅ Blog thumbnails (aspect ratio)
• ✅ Product grids (focus crop)
• ✅ Responsive layouts (multiple crops)
• ✅ Social media sharing (platform-specific ratios)

Key benefits:

• AI face detection (99% accuracy)
• 4 cropping methods (face, aspect, gravity, focus)
• Real-time processing (100-200ms)
• Global CDN caching (~10ms cached)
• $9.50/month unlimited crops

Bottom line: Upload once to BunnyCDN, crop infinitely using URL parameters. No manual editing, no multiple versions, no wasted time.

Learn more about BunnyCDN's features: automatic format conversion, pricing details, and image format comparison.