What are Image Transformations

Speaker 0: Hello, everybody, and welcome to Sharp Focus, the show where we shine a lens on how Directus helps you transform your images and truly make them shine. My name is Carmen, and I will be your guide over the next 5 episodes where we'll learn how images can be transformed, how they work under the hood, how they can be manipulated, how they can be resized to be more performant, how you can use advanced transformations, and how you can use presets to take all of the above and apply it in one fell swoop. Now as it turns out, Directus offers a bevy of options for working with images out of the box, powered by the sharp API from node JS. And we're going to be taking a look at how to do that in a way that's going to be super fun and super approachable. So won't you join me in grabbing our cameras and let's dive right into finding out how Directus works with images.

So here we are in my very own Directus project running locally dedicated to my photography. Right now, we are in the file library module where you can see that I have a folder over here on the left sidebar. This folder contains photos from my latest trip to my home country, Chile. Now I'm going to use Directus to work with these images for different applications, thumbnails, that sort of thing. But as you can see, a lot of these images are of varying sizes and qualities.

But that's okay. We can use directives to transform these images to create some consistency and even add some cool effects, which we'll be doing in this series. But first, let's take a little look at what makes these images tick. Now I've already uploaded these to Directus, so this gives me a couple of options to work with them. If I click on one of the images, for example, the photo of my trip to the national park, Torres del Paine, we will see that we can do things like change the title, add a description, some tags, location, if we wish, some focal points, more on that later, and also have access to its asset ID.

But that's not all. We can even edit that image. Now we're not going to be doing that in this series except for using it to create focal points. But again, more on that later. Now, if I want to access that image from say my browser, I can take that asset ID and navigate to my instances URL /assets/theid of that image, which is fantastic.

But one thing to bear in mind, I'm logged into Directus as an admin. But if I wanted to access this image from an application, I would need to assign that application the correct permissions, which we can do here in Directus. When I navigate to the settings module and then go over to access policies, we can see that I already have some permissions and roles set for administrators, which is my logged in user. But I want to make these images fully public. So what I can do is click here on public and under permissions, click on add collection and select the Directus Files system collection.

I will be able to assign different permissions for folks accessing that from anywhere. But I only want to give folks the ability to read. So we'll click here on read access and then assign all access. The last thing to do is to save that permission. Fantastic.

Now I can access this image from a browser, from an application, from anywhere. So let's go back and look at that image. Now you remember that these images are of different sizes and qualities. So in order to create some consistencies, we're going to be applying different image transformations, but also giving them a little bit of pizzazz with some advanced transformations. It's gonna be super cool.

Before we wrap up this video, I'd like to show you a couple of the types of transformations we can do. In the next video, we'll be looking at image manipulation where we can use query parameters like width, like height, and fit to manipulate our image. And in this case, make it a consistent 300 by 300 pixels. But that's not all. In our 3rd episode, we'll be looking at how we can manipulate the size and performance of our images.

For example, here we're applying a quality of 5% and a format of webP to be used in our applications. Next. Now bear with me. We're going to be doing some advanced transformations. Now this looks a little wild, but you'll see that we're applying some powerful transforms with that sharp API.

So we're applying a blur, a tint, we're negating colors. All of this is done with direct us, which is super cool. And finally, in our last episode, we'll talk about preset transformation where we can assign presets to a key. And that way we don't have to type out all of those transformations, but rather place them in one consistent place in Directus. Finally, let's talk about that processing power.

You might think it'd be pretty cumbersome if every time I reload this image, it reprocesses all of those transformations. And I have good news. That transformation is done once and then saved in Directus, and you don't have to apply it every time. That means that you can reload that image worry free of any extra processing power done. So there you have it.

Now we've seen how direct us works with images out of the box and how we can apply access permissions, which is going to be super handy because in the next 4 episodes, we're going to be working with a new Nuxt application to work with these images and display them in a variety of ways using transformations. So what's next? In episode 2, we'll be looking at how to resize our images using width, height, and other parameters, and I can't wait to show you all how it works. So till next time, keep those cameras ready.