Varnish Logo

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.

Recommended Value: 80
  • A quality setting of 80 provides significant file size reduction with almost no perceptible loss in visual quality. For high-density photography, you might use 90; for thumbnails, 60 is 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=600 or height=320) to scale the image uniformly.
  • Custom Dimensions: Supply both width and height parameters 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 height pairs 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).