Image Handling
Deliver high-performance visuals with real-time compression and resizing.
Image Optimisation
Image Optimisation lets you compress your images without affecting visual quality. Once processed, optimized images are cached at the edge to ensure near-zero latency for subsequent requests.
Automatic WebP conversion
Enable automatic conversion to the WebP image format. WebP compresses images to reduce image size by 25-35% on average compared to JPEG and PNG.
Image quality
The quality option determines the compression level of your images.
80- A quality setting of
80provides significant file size reduction with almost no perceptible loss in visual quality. For high-density photography, you might use90; for thumbnails,60is often sufficient.
Image Transformation
Dynamic transformation allows you to serve appropriately scaled images for any device, screen, or use-case. This reduces storage requirements and eliminates the need for developers to manually pre-render dozens of versions of every asset.
Transformations are triggered via URL query parameters and are currently available in two different ways:
- Maintain Aspect Ratio: Supply on one dimension (
?width=600orheight=320) to scale the image uniformly. - Custom Dimensions: Supply both
widthandheightparameters to resize to the exact specifications.
Allowed dimensions
Because on-the-fly transformation is computationally intensive, "Image Request Bombing" (where an attacker requests thousands of slightly different sizes to bypass cache and increase costs) is a risk. To protect your account, you must define Allowed Dimensions. Requests for sizes not on this list will be served the original image.
- Allowed widths: Example:
30,60,200,400,600,1000,2000 - Allowed heights: Example:
20,50,200,500,720,1080,2000 - Allowed dimensions:
width x heightpairs for specific aspect ratios. Example:640x400,1024x768,1920x1080
Width parameter
Customize the keys used in your URLs to match your existing tech stack or preference. The Width Parameter defines the width key (e.g., w or width).
Height parameter
Customize the keys used in your URLs to match your existing tech stack or preference. The Height Parameter defines the height key (e.g., h or height).