Directus Spotlight: Image TransformationsBy Rijk van Zanten on January 31, 2023
Images are a foundational element of any digital project. Whether you’re enhancing a web page with photos, adding an image or a diagram to a blog post, or augmenting a bio with a thumbnail of the author, the ability to easily import, manipulate and store versions of your images is essential for using them effectively in your project.
In this Directus spotlight, we’ll take a look at Image Transformations, a completely integrated and simple way to transform and enhance images, and store multiple versions that you can retrieve and use across your project with a few clicks.
What Are Directus Image Transformations?
Directus makes it easy to transform images without leaving the platform. Using Data Studio – our intuitive, no-code app that enables all business users to browse, manage and visualize data – you can crop or flip images, or change the aspect ratio, without needing an external photo editing app like Photoshop or Adobe. The functionality is embedded in the platform.
But that’s not all you can do with images in Directus. Our data engine and API exposes the full Sharp library, a high-performance image processing library for Node.js that supports various image file formats (JPEG, PNG, GIF, WebP, AVIF, SVG and TIFF). A direct integration to this library allows you to perform advanced image transformations, such as resizing or compressing images, or changing their format.
While you can always install and host the Sharp library yourself, we’ve rolled it into our platform to make it fast and easy to access over 100 different transformation types. And, here’s how Directus adds its magic: blurring, flattening, resizing or adjusting the color of an image is as simple as modifying the URL.
Say you have an image that’s quite large, and you need to resize it before using it in your project. Instead of exporting the photo to an imaging app, resizing it and importing it back into Directus, you simply add a query string to the URL with the desired width and height information, and the Directus API will dynamically generate the transformation for you, on the fly:
The whole process takes a few seconds, and you never have to leave Directus.
Create Multiple Presets for Even Faster Transformations
Through the Directus API, you can build a library of preset image transformations that are readily accessible at any time. Simply upload your high-quality photo to Directus and create multiple versions of it for your website.
For example, say you have a headshot of your CEO that’s the largest and of the highest quality, but not suitable for everywhere you need to put it on the website. With Directus Image Transformations, you can create multiple preset versions that are resized for various use cases, such as an author bio or leadership team page. You can even stylize the photo, for example, create a black and white version or screen it back so you can overlay text. Every version you create is cached and stored for rapid retrieval.
What’s more, each transformation preset has a specific key, so when you call it through the API, you can simply use a key instead of typing in a long query with all the details.
Set Permissions to Control Image Changes
Another valuable feature is the ability to set permissions with granular access control to image transformations. That way, you can control who has access to which images and versions.
For example, you can create watermarked versions for public access and only allow certain individuals to access the original image. Using an external tool such as Cloudinary, you would have to implement that logic yourself. With Directus, it’s built-in.
Added Value, Less Hassle
What makes Image Transformations in Directus so powerful is that the functionality is already integrated into your content management platform and ready to use. While media transformation platforms such as Cloudinary can perform advanced transformations, they’re external to your project – and as such, you have to pay extra to use them.
With Directus, not only do you save on costs, but you gain access to a wide array of transformation features without ever having to leave the platform. That means less hassle and time spent on transforming images, and more time to focus on your project. The best part? It’s easy enough for technical and non-technical users alike.
Check out our documentation to learn how to leverage this cool feature in Directus to enhance your project’s imagery.
Haven’t tried Directus yet? Try it today!