Geometric Transformations¶
Transform images with rotation, flipping, padding, and borders for layout and design needs.
Parameters¶
flip¶
Flip image horizontally, vertically, or both.
Type: string
Values: h, v, hv
Default: None (no flipping)
rot¶
Rotate image by specified degrees.
Type: float
Range: 0 - 360 degrees
Default: 0 (no rotation)
pad¶
Add uniform padding around the image.
Type: integer
Range: 0+ pixels
Default: 0 (no padding)
Individual Padding¶
Add different padding to each side.
pad_top- Top padding in pixelspad_right- Right padding in pixelspad_bottom- Bottom padding in pixelspad_left- Left padding in pixels
border¶
Add border around the image.
Type: integer
Range: 0+ pixels
Default: 0 (no border)
border_color¶
Specify border color.
Type: string (color value)
Default: black
border_radius¶
Add rounded corners to border.
Type: integer
Range: 0+ pixels
Default: 0 (square corners)
border_radius_inner¶
Specify inner corner radius (for complex border effects).
Type: integer
Range: 0+ pixels
Default: None
Usage¶
Image Flipping¶
Flip horizontally (mirror). Flip vertically (upside down). Flip both horizontally and vertically (180° rotation effect).Rotation¶
Rotate 45 degrees clockwise. Rotate 270 degrees (equivalent to 90° counter-clockwise).Padding¶
Add 20px padding on all sides. Add different padding to each side.Borders¶
Add 5px red border. Add blue border with rounded corners.Geometric Transformations Guide¶
Flipping Applications¶
- Horizontal (
h): Create mirror effects, fix orientation - Vertical (
v): Correct upside-down images - Both (
hv): 180° rotation alternative, create symmetrical layouts
Rotation Use Cases¶
- 90°/270°: Portrait to landscape conversion
- 180°: Fix upside-down orientation
- 45°: Dynamic, diagonal compositions
- Custom angles: Artistic tilting effects
Padding Strategies¶
- Uniform: Create consistent spacing around content
- Asymmetric: Accommodate text overlays or UI elements
- Top-heavy: Leave space for titles or captions
- Side padding: Prepare for mobile-responsive layouts
Border Styling¶
- Thin borders (1-3px): Subtle definition
- Medium borders (5-10px): Frame emphasis
- Thick borders (15px+): Artistic, poster-like effects
- Rounded corners: Modern, friendly appearance
Advanced Combinations¶
Product Photography Frame¶
Polaroid Effect¶
photo.jpg?w=400&pad_top=20&pad_left=20&pad_right=20&pad_bottom=60&bg=white&border=1&border_color=#DDD
Instagram Square with Padding¶
Rotated Banner¶
Profile Picture with Border¶
Processing Order¶
Geometric transformations are applied in sequence:
1. Flip transformations
2. Rotation
3. Padding application
4. Border addition
Background Colors for Padding¶
When adding padding, specify background color using bg parameter:
image.jpg?pad=30&bg=white
image.jpg?pad=20&bg=#F0F0F0
image.jpg?pad=25&bg=rgb(240,240,240)
image.jpg?pad=15&bg=transparent
Use Cases by Industry¶
E-commerce¶
Consistent product presentation with clean borders.Social Media¶
Modern social media post formatting.Print Design¶
Traditional photo mounting appearance.Web Design¶
Subtle rotation with space for text overlay.Marketing Materials¶
Branded border treatment.Best Practices¶
Rotation Considerations¶
- Use small angles (±5°) for subtle dynamism
- 90° increments for orientation correction
- Consider crop areas when rotating to avoid empty corners
- Large rotations may require padding to prevent content loss
Padding Strategy¶
- Match padding to your design grid system
- Use consistent padding values across similar images
- Consider mobile breakpoints when setting padding
- White/transparent backgrounds work best for product images
Border Design¶
- Match border colors to your brand palette
- Use subtle colors for professional applications
- Ensure sufficient contrast between border and content
- Round borders work well for profile pictures and thumbnails
Performance¶
- Simple transformations (flip, 90° rotations) are very fast
- Complex rotations require more processing time
- Large padding/borders increase final file size
- Results are cached for subsequent requests