Documentation

Learn how to integrate ServeProxy and optimize your website images in minutes.

How It Works

ServeProxy is a high-performance image CDN built with Rust. When you request an image through our service, we automatically optimize and cache it for lightning-fast delivery worldwide.

The Process

Caching Duration

Cache Location Duration
ServeProxy Servers 7 days
Cloudflare Edge Network 14 days
User Browser 7 days (via Cache-Control headers)
First Request vs Cached

The first time an image is requested, we fetch and optimize it (typically 1-3 seconds). All subsequent requests are served instantly from cache, delivering your images in milliseconds.

Image Optimization

ServeProxy automatically optimizes your images based on their format. We use modern compression techniques to reduce file sizes by 50-75% while maintaining visual quality.

How Different Formats Are Handled

Original Format Optimized Format Result
JPEG, PNG, BMP AVIF 50-75% smaller with same quality
Static WebP AVIF Further optimized compression
Animated GIF Animated WebP Preserves animation, smaller file
Static GIF AVIF Standard optimization
Animated WebP WebP (unchanged) Already optimized
SVG SVG (sanitized) Security cleaned, cached

Quality Settings

We use carefully tuned quality settings that balance file size and visual clarity. Most users can't tell the difference between the original and optimized version, but the file size is dramatically smaller.

File Size Limits

Images larger than 5 MB will be rejected. If you need to serve larger images, optimize them before uploading to your origin server.

Usage Limits

Rate Limiting

To maintain service quality for everyone, we enforce reasonable usage limits:

Limit Type Value
Uncached requests per IP 5,000 every 10 minutes
Block duration if exceeded 1 hour
Maximum image file size 5 MB
Cached Requests Don't Count

Only the first request for each unique image URL counts toward your rate limit. Once cached, the same image can be requested unlimited times without affecting your quota.

Security Features

Integration Examples

HTML Image Tag

<img src="https://serveproxy.com/?url=https%3A%2F%2Fexample.com%2Fimage.jpg" alt="Description" loading="lazy">

JavaScript Dynamic Loading

function loadOptimizedImage(originalUrl) { const encodedUrl = encodeURIComponent(originalUrl); return `https://serveproxy.com/?url=${encodedUrl}`; } const img = new Image(); img.src = loadOptimizedImage('https://example.com/image.jpg'); document.body.appendChild(img);

CSS Background Image

.hero { background-image: url('https://serveproxy.com/?url=https%3A%2F%2Fexample.com%2Fhero.jpg'); background-size: cover; background-position: center; }

React Component

function OptimizedImage({ src, alt, ...props }) { const optimizedSrc = `https://serveproxy.com/?url=${encodeURIComponent(src)}`; return ( <img src={optimizedSrc} alt={alt} loading="lazy" {...props} /> ); }

WordPress Integration

function serveproxy_cdn_url($url) { if (empty($url)) return $url; $encoded_url = urlencode($url); return "https://serveproxy.com/?url=" . $encoded_url; } add_filter('wp_get_attachment_image_src', function($image) { if (isset($image[0])) { $image[0] = serveproxy_cdn_url($image[0]); } return $image; });
Best Practices

Always use HTTPS URLs for origin images. Include appropriate alt text for accessibility. Use lazy loading for images below the fold. Consider using srcset for responsive images with different sizes.

Integration Examples

HTML Image Tag

<img src="https://serveproxy.com/?url=https%3A%2F%2Fexample.com%2Fimage.jpg" alt="Description" loading="lazy">

JavaScript Dynamic Loading

function loadOptimizedImage(originalUrl) { const encodedUrl = encodeURIComponent(originalUrl); return `https://serveproxy.com/?url=${encodedUrl}`; } const img = new Image(); img.src = loadOptimizedImage('https://example.com/image.jpg'); document.body.appendChild(img);

CSS Background Image

.hero { background-image: url('https://serveproxy.com/?url=https%3A%2F%2Fexample.com%2Fhero.jpg'); background-size: cover; background-position: center; }

React Component

function OptimizedImage({ src, alt, ...props }) { const optimizedSrc = `https://serveproxy.com/?url=${encodeURIComponent(src)}`; return ( <img src={optimizedSrc} alt={alt} loading="lazy" {...props} /> ); }

WordPress Integration

function serveproxy_cdn_url($url) { if (empty($url)) return $url; $encoded_url = urlencode($url); return "https://serveproxy.com/?url=" . $encoded_url; } add_filter('wp_get_attachment_image_src', function($image) { if (isset($image[0])) { $image[0] = serveproxy_cdn_url($image[0]); } return $image; });
Best Practices

Always use HTTPS URLs for origin images. Include appropriate alt text for accessibility. Use lazy loading for images below the fold. Consider using srcset for responsive images with different sizes.

Checking If It Works

Response Headers

Open your browser's developer tools (F12) and check the Network tab. Look for these headers on your images:

X-Serveproxy-Cache-Status: HIT X-Serveproxy-Image-Hash: abc123... X-Serveproxy-Node: server-name

Common Issues

Problem Solution
Image not loading Check that the original URL is accessible and under 5 MB
429 error (rate limit) Wait 10 minutes or reduce request frequency
400 error Verify URL is properly encoded and valid
Slow first load Normal - first request fetches and processes the image
Statistics Endpoint

Visit https://serveproxy.com/stats to see service-wide statistics including total requests served in the past 7 days.