Image Optimization API Parameters¶

Peakhour's Image Optimization API provides on-the-fly image transformation and optimization capabilities. Transform, resize, and optimize images automatically at the edge for improved performance and user experience.

Overview¶

The Image Optimization API uses URL parameters to specify transformations. All transformations are applied automatically and cached at our global edge locations for optimal performance.

API Endpoint Structure¶

https://yoursite.com/path/to/image.jpg?param1=value1&param2=value2

Available Parameters¶

Image Format & Quality¶

format - Convert between image formats (JPEG, PNG, WebP, AVIF, JXL)
auto - Automatic format selection and quality optimization

Resizing & Dimensions¶

resize - Resize images with various scaling options
fill - Fill specific dimensions with cropping and padding options

Visual Effects¶

blur - Apply Gaussian blur effects (0.1-10.0 intensity)
sharpen - Unsharp mask and sharpening effects
color - Brightness, contrast, saturation, gamma adjustments
tone - Hue, vibrance, highlights, shadows control
style - Sepia, grayscale, monochrome, duotone effects

Geometric Transformations¶

geometry - Rotation, flipping, padding, borders

Masking & Shapes¶

mask - Ellipse and corner radius masking

Content Overlay¶

txt - Add text overlays with custom positioning and styling
watermark - Watermark images with positioning and opacity

Color Utilities¶

colour-string - Color specification formats and options

Quick Examples¶

Basic Resizing¶

https://yoursite.com/image.jpg?w=300&h=200&fit=clip

Format Conversion with Auto Optimization¶

https://yoursite.com/image.jpg?fm=webp&q=85&auto=optimize,format

Smart Cropping with Face Detection¶

https://yoursite.com/image.jpg?w=400&h=300&fit=crop&crop=faces

Advanced Image Processing¶

https://yoursite.com/image.jpg?w=800&h=600&blur=1.5&brightness=15&contrast=20&sepia=30

Profile Picture with Masking¶

https://yoursite.com/image.jpg?w=200&h=200&fit=crop&crop=faces&mask=ellipse&border=3&border_color=white

Text and Watermark Overlay¶

https://yoursite.com/image.jpg?txt=Sample%20Text&txt_size=48&txt_color=white&wm_url=/logo.png&wm_pos=northeast&wm_opacity=0.7

Creative Effects¶

https://yoursite.com/image.jpg?duotone=blue,yellow&hue=15&vib=25&rot=5&mask=corners&corner_radius=20

Performance Features¶

Global Edge Caching - Optimized images cached worldwide
Automatic Format Selection - Serve best format for each browser
Quality Optimization - Balance file size and visual quality
Lazy Loading Support - Optimize for modern loading strategies

Supported Input Formats¶

JPEG (.jpg, .jpeg)
PNG (.png)
GIF (.gif)
WebP (.webp)
SVG (.svg)
BMP (.bmp)

Supported Output Formats¶

JPEG - Universal compatibility
PNG - Transparency support
WebP - Modern browsers, excellent compression
AVIF - Next-generation format with superior compression

Best Practices¶

Performance Optimization¶

Use auto=compress for automatic quality optimization
Specify exact dimensions when possible to prevent layout shift
Use WebP format for modern browsers when supported

Quality Control¶

Test different quality settings for your specific images
Monitor Core Web Vitals impact of image optimizations
Use progressive JPEG for large images

Caching Strategy¶

Image transformations are cached permanently at the edge
Original images are cached according to your cache settings
Use consistent parameters to maximize cache hit rates

Integration Examples¶

Responsive Images¶

<img src="/hero.jpg?resize=800x600" 
     srcset="/hero.jpg?resize=400x300 400w,
             /hero.jpg?resize=800x600 800w,
             /hero.jpg?resize=1200x900 1200w"
     sizes="(max-width: 400px) 400px,
            (max-width: 800px) 800px,
            1200px"
     alt="Hero image">

CSS Background Images¶

.hero {
  background-image: url('/hero.jpg?fill=1920x1080&format=webp&auto=compress');
}

@media (max-width: 768px) {
  .hero {
    background-image: url('/hero.jpg?fill=768x432&format=webp&auto=compress');
  }
}

For detailed parameter documentation and examples, see the individual parameter reference pages.