API Reference

API Structure

This topic provides a straightforward explanation of how the main concepts applied in the Voidr Images API work, and the first steps to start optimizing your images.

The Voidr Images API is designed to be flexible and easy to use, with an intuitive URL structure that allows for image optimization and transformation with minimal configuration.

https://img.voir.co/:project_name/:transformations/fetch/:url

API Base URL

The base URL for all requests related to image optimization and transformation:

https://img.voir.co

Each API call follows the pattern:

/:project/:transformers/fetch/:url

Where:

  • :project is the unique identifier of your project.
  • :transformers is a string of transformation and optimization parameters applied to the image.
  • :url is the original URL path of the image you want to optimize.

Available Transformations and Optimizations

The following operations are available for use with the Voidr Images API:

  • Blur: Applies a blur effect to the image to reduce detail and smooth texture.
  • Compress: Reduces the image file size, optimizing for quick loading without noticeable quality loss.
  • Convert: Changes the image format, allowing conversion between different file formats such as JPEG, PNG, WebP, Tiff, and Avif.
  • Crop: Crops the image to a specific size and proportion, focusing on areas of interest.
  • Radius: Rounds the corners of the image, which can create a circular border effect.
  • Resize: Changes the dimensions of the image, allowing scaling up or down.
  • Rotate: Rotates the image at a specific angle, providing custom orientation.

Usage Example

To apply multiple transformations to an image, concatenate them in the URL, for example:

  • /resize:650x320/ To resize an image to 650x320 pixels
  • /compress:90/ Compress it with 90% quality
  • /convert:webp/ Convert it to the WebP format:

Using the image from the URL: https://images.unsplash.com/photo-1561336313-0bd5e0b27ec8

https://img.voidr.co/my_project/resize:650x320/compress:90/convert:webp/fetch/https://images.unsplash.com/photo-1561336313-0bd5e0b27ec8

This endpoint will perform the specified operations and deliver the optimized image in real time.

📘

Attach ?debug=true to your URL to activate debug mode

Activate debug mode for a better experience during development, so you will have visibility on possible errors during integration.

⚠️ Remember to always deactivate debug mode in production!