API reference
Unbody’s Image API, powered by IMGIX, offers developers a seamless way to host, transform, and optimize images for their applications. The API uses IMGIX's robust image processing features, allowing you to deliver high-quality images with minimal loading times.
This documentation will guide you through using the Unbody Image API, helping you to leverage IMGIX's functionality to enhance your image content.
Getting Started with Unbody Image API
Prerequisites
Before you begin, make sure you have the following.
- An active Unbody account.
- Access to the Unbody GraphQL endpoint.
- Familiarity with basic image processing concepts.
Fetching Your Image URL
Every image synced with Unbody is accessible through our GraphQL endpoint. Given below is a basic query to fetch an image URL.
query {
Get {
ImageBlock(where: { path: "/your/image/path" }) {
url
alt
width
height
}
}
}
With the url
obtained, you can perform a variety of operations using IMGIX parameters directly in the URL.
Basic Image Transformation
To apply IMGIX transformations, you can append parameters to the image URL. Given below is a simple transformation that resizes the image to a width of 300 pixels.
image.cdn.unbody.io/[path_to_image]?w=300
API Reference
The Unbody Image API with IMGIX includes a suite of operations that you can directly apply via URL parameters. Given below is a condensed reference of the most commonly used functionalities.
Resizing and Cropping
- Resize (w, h): It sets the width and height of your image.
- For example:
?w=300&h=200
- For example:
- Crop (crop): You can crop your image to a specific aspect ratio or dimension.
- For example:
?crop=top,left&h=100
- For example:
Image Adjustments
- Brightness (bri): You can also adjust the brightness of the image.
- For example:
?bri=10
- For example:
- Contrast (con): It you wish to adjust the contrast of the image, you can use the
con
parameter.- For example:
?con=20
- For example:
Format and Compression
- Format (fm): You can specify the output format of your image (e.g. jpg, png, webp).
- For example:
?fm=webp
- For example:
- Quality (q): You can even control the output quality of your image for size optimization with the help of this parameter.
- For example:
?q=75
- For example:
Advanced Features
- Auto Enhance (auto): This parameter applies automatic enhancements to your image.
- For example:
?auto=format,compress
- For example:
- Text Overlay (txt): This parameter will overlay text onto your image.
- For example:
?txt=Hello%20World
- For example:
These are just a glimpse of what you can achieve with Unbody’s Image API. For a full list of parameters and detailed usage, you can refer to the IMGIX documentation linked at the end of this page.
Best Practices
When using the Unbody Image API with IMGIX, you may consider following the best practices given below.
- Lazy Loading: You may implement lazy loading to defer loading off-screen images. This helps in optimizing the user experience.
- Responsive Images: You can use the
srcset
attribute in<img>
tags for responsive image delivery.
Take a look at the Best Practices page given below for more details on best practices.
Conclusion
The Unbody's Image API with IMGIX is a powerful tool for developers to enhance the visual component of their applications with ease. By leveraging the features and functionalities detailed above, you can ensure that your images are always optimized for performance and quality.
For a deeper dive into all available IMGIX parameters and to explore more advanced features, please refer to the official IMGIX documentation (opens in a new tab).