[{"data":1,"prerenderedAt":74},["ShallowReactive",2],{"sharp-focus-size-and-performance":3,"sharp-focus-size-and-performance-next":55},{"id":4,"slug":5,"vimeo_id":6,"description":7,"tile":8,"length":9,"resources":10,"people":26,"episode_number":27,"published":28,"title":29,"video_transcript_html":30,"video_transcript_text":31,"content":26,"status":32,"episode_people":33,"recommendations":41,"season":42,"seo":54},"59b18d30-080b-42cf-84ef-fdca7542388d","size-and-performance","1030681873","Join Carmen as we transform our images to be more performant and format-conscious.","9534ee88-2302-4352-a715-391969efc88f",5,[11,14,17,20,23],{"name":12,"url":13},"Photo credit: Torres del paine: photo by Karla Robinson on Unsplash","https:\u002F\u002Funsplash.com\u002Fes\u002Ffotos\u002Fun-lago-rodeado-de-montanas-HT2jDxe6UF4?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash",{"name":15,"url":16},"Photo credit: Osorno: photo by Willian Justen de Vasconcellos on Unsplash","https:\u002F\u002Funsplash.com\u002Fes\u002Ffotos\u002Fmonte-fuji-vRLMbO3Wpjw?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash",{"name":18,"url":19},"Photo credit: Geysers del Tatio: photo by Jorge Fernández Salas on Unsplash","https:\u002F\u002Funsplash.com\u002Fes\u002Ffotos\u002Ffoto-de-primer-plano-de-la-montana-01pVoT_YINk?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash",{"name":21,"url":22},"Photo credit: Rapa nui: photo by Sophie Laurent on Unsplash","https:\u002F\u002Funsplash.com\u002Fes\u002Ffotos\u002Fformacion-rocosa-gris-bajo-nubes-blancas-y-cielo-azul-durante-el-dia-BNdjmu-wLFk?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash",{"name":24,"url":25},"Photo credit: Marble Cathedral of lake General Carrera, Chilean Patagonia","https:\u002F\u002Fstock.adobe.com\u002Fat\u002Fcontributor\u002F200869569\u002Fnoradoa?load_type=author&prev_url=detail",null,3,"2024-11-19","Size and Performance","\u003Cp>Speaker 0: Hello, everybody. My name is Carmen, and welcome to Sharp Focus, the show where we zoom in on how Directus allows you to transform your images and truly make them shine. Now in previous episodes, we've seen how Directus stores your images and how you can grant permission and access to them. And we've also seen how you can manipulate your images width and height and fit using the Directus SDK and REST API. So what's next?\u003C\u002Fp>\u003Cp>In this episode, we're going to focus on size and performance. If you're working with a lot of images, you wanna keep some consistency and focus on the user experience, making sure that the images are consistently sized, but more importantly, load quickly. So let's find out how Directus does that for you. Let me just grab my camera, and let's hop right in. All right.\u003C\u002Fp>\u003Cp>Here we are in my directest project dedicated to my photography. And once again, we're going to be looking at my photos from my trip to Chile. In this episode, we're going to be working with the photos of the geysers del Tapio, which are located in the Andes mountains of Northern Chile. And these are beautiful geysers that we're going to be working with. So I said in this episode, we're going to be focusing on the size and performance of transforming our images.\u003C\u002Fp>\u003Cp>Let's again, look at our Nuxt app, which has now been modified to also show the size of our image here, clocking in at 46 kilobytes. Now over in our code, we've got our width, our height, and our fit as we saw in the image manipulations of episode 2. Our first parameter that we're gonna be working with is quality, which can take a value of 0 to 100. The higher the value, the higher the quality, but let's see what happens when we go lower in quality. I'm gonna start with 50%.\u003C\u002Fp>\u003Cp>So we can see the file has been reduced to 26 kilobytes and the image looks a little bit rougher, but not too bad. Let's bring it a little lower, half that to 25. We're seeing a file size of 16 kilobytes and the image looks a little bit grainier. If I bring that down to 5%, we're gonna see the image gets even lower in quality. It becomes a little difficult to see our beautiful geysers, but the image size is 4 kilobytes.\u003C\u002Fp>\u003Cp>And if I bring it all the way to a 100%, we're gonna see the image looks beautiful, but the size is a 153 kilobytes. So let's leave it at that 80% sweet spot. Next, we'll look at the format attribute. Its value will modify the format of the image. So we have the options of auto, JPEG, PNG, webp, and tiff.\u003C\u002Fp>\u003Cp>So if we start with auto, which is a default value, directives will try to format it in webp or avif depending on browser support. Otherwise, it'll fall back to JPEG. Let's look at JPEG PNG. We'll see that our image now has a size of a 111 kilobytes. If we try and web peak, we'll see 43 kilobytes.\u003C\u002Fp>\u003Cp>Let's leave that with auto by default. And finally, we'll have a look at the without enlargement property, which defaults to true. So if we set that to false, Directus will not upscale the image. So now I have a lot more granular control over the sizing of my images when I use them in my applications. All right.\u003C\u002Fp>\u003Cp>Well, there you have it folks. We've seen how we can use the direct to SDK to manipulate the quality and the format and the upscaling of our images. And as you can see, it's super straightforward and split fast. So what's next in the next episode, we're really going to dive into the sharp API and get into all of the nitty gritty advanced transformation. This one's super exciting folks.\u003C\u002Fp>\u003Cp>So I'm looking forward to seeing you there. Just remember, keep your camera handy and I'll see you in the next one.\u003C\u002Fp>","Hello, everybody. My name is Carmen, and welcome to Sharp Focus, the show where we zoom in on how Directus allows you to transform your images and truly make them shine. Now in previous episodes, we've seen how Directus stores your images and how you can grant permission and access to them. And we've also seen how you can manipulate your images width and height and fit using the Directus SDK and REST API. So what's next? In this episode, we're going to focus on size and performance. If you're working with a lot of images, you wanna keep some consistency and focus on the user experience, making sure that the images are consistently sized, but more importantly, load quickly. So let's find out how Directus does that for you. Let me just grab my camera, and let's hop right in. All right. Here we are in my directest project dedicated to my photography. And once again, we're going to be looking at my photos from my trip to Chile. In this episode, we're going to be working with the photos of the geysers del Tapio, which are located in the Andes mountains of Northern Chile. And these are beautiful geysers that we're going to be working with. So I said in this episode, we're going to be focusing on the size and performance of transforming our images. Let's again, look at our Nuxt app, which has now been modified to also show the size of our image here, clocking in at 46 kilobytes. Now over in our code, we've got our width, our height, and our fit as we saw in the image manipulations of episode 2. Our first parameter that we're gonna be working with is quality, which can take a value of 0 to 100. The higher the value, the higher the quality, but let's see what happens when we go lower in quality. I'm gonna start with 50%. So we can see the file has been reduced to 26 kilobytes and the image looks a little bit rougher, but not too bad. Let's bring it a little lower, half that to 25. We're seeing a file size of 16 kilobytes and the image looks a little bit grainier. If I bring that down to 5%, we're gonna see the image gets even lower in quality. It becomes a little difficult to see our beautiful geysers, but the image size is 4 kilobytes. And if I bring it all the way to a 100%, we're gonna see the image looks beautiful, but the size is a 153 kilobytes. So let's leave it at that 80% sweet spot. Next, we'll look at the format attribute. Its value will modify the format of the image. So we have the options of auto, JPEG, PNG, webp, and tiff. So if we start with auto, which is a default value, directives will try to format it in webp or avif depending on browser support. Otherwise, it'll fall back to JPEG. Let's look at JPEG PNG. We'll see that our image now has a size of a 111 kilobytes. If we try and web peak, we'll see 43 kilobytes. Let's leave that with auto by default. And finally, we'll have a look at the without enlargement property, which defaults to true. So if we set that to false, Directus will not upscale the image. So now I have a lot more granular control over the sizing of my images when I use them in my applications. All right. Well, there you have it folks. We've seen how we can use the direct to SDK to manipulate the quality and the format and the upscaling of our images. And as you can see, it's super straightforward and split fast. So what's next in the next episode, we're really going to dive into the sharp API and get into all of the nitty gritty advanced transformation. This one's super exciting folks. So I'm looking forward to seeing you there. Just remember, keep your camera handy and I'll see you in the next one.","published",[34],{"people_id":35},{"id":36,"first_name":37,"last_name":38,"avatar":39,"bio":40,"links":26},"49c9e2fa-e7d7-45c9-b7b0-7125a2219f16","Carmen","Huidobro","fedb548b-def3-437c-b90a-f0d4d3d81d1d","Developer Educator at Directus",[],{"id":43,"number":44,"year":45,"episodes":46,"show":51},"4726ce9e-9ed5-4d26-b76e-47d74381bc91",1,"2024",[47,48,4,49,50],"3fd6dfb4-644b-43d0-9aef-5a6e5488efa8","954941eb-b737-412f-967b-387295df72bf","1c8eb8c1-f7eb-4b24-9cac-e742a70a9da1","731d8184-1ba4-4fa7-99e4-571492d1c552",{"title":52,"tile":53},"Sharp Focus","aa4f547b-33cf-4b5a-beb3-55ec99383ba7",{"title":26,"meta_description":26},{"id":49,"slug":56,"season":43,"vimeo_id":57,"description":58,"tile":59,"length":9,"resources":60,"people":26,"episode_number":66,"published":28,"title":67,"video_transcript_html":68,"video_transcript_text":69,"content":26,"seo":70,"status":32,"episode_people":71,"recommendations":73},"advanced-transformations","1030680517","Join Carmen as we apply advanced transformations to our images leveraging the Sharp API.","3e734707-3997-41c3-9e81-543f7d27c4a3",[61,62,63,64,65],{"name":12,"url":13},{"name":15,"url":16},{"name":18,"url":19},{"name":21,"url":22},{"name":24,"url":25},4,"Advanced Transformations","\u003Cp>Speaker 0: Hello, everybody. My name is Carmen, and welcome to Sharp Focus, the show where we truly capture how it is that allows you to transform your images and truly make them shine. Now in previous episodes, we've seen how Directus manages your images for you, how you can set permissions, how you can use the SDK to manipulate the width, the height, the fit, the quality, the performance, the format of your images, and much more. But in this episode, we're gonna get into some advanced stuff, my friends. We're gonna be looking at how Directus exposes the Node JS Sharp API to allow you to do some truly wild transformations.\u003C\u002Fp>\u003Cp>I'm talking things like rotating images, resizing them, shifting them, tilting them, applying color tints, negation. Oh gosh. There's so much. But don't take my word for it. Let's just hop into some code.\u003C\u002Fp>\u003Cp>Let me just grab my camera here and let's get right into it. See you there. Here we are in my directus project dedicated to my photography, and we'll be taking a look at one of my photos from my recent trip to Chile. In this episode, we'll be working with this photo from Rapa Nui or Easter Island. And as said, we'll be working with advanced transformations.\u003C\u002Fp>\u003Cp>In order to have advanced control over your files, Directus exposes the full Sharp Node JS API, which has a bevy of options to allow us to work with our images. I'm talking things like rotating, flipping images, flopping images, sharpening, blurring, flattening, negate, color negation, color manipulation, channel manipulation, and many other options. So let's play around with some of these. We'll be working once again with our Nuxt applications, applying some of these transformations. Now you can see that I've applied the width attribute, but we can expand on this using the transforms property, which is an array of Sharp API calls.\u003C\u002Fp>\u003Cp>And these are applied as array pairs of property and value. So for example, I'm gonna use the resize property, which allows me to resize my image and make it 1,000 pixels wide. Thereby replacing the width property. And I'm just showing this as something that's possible to do. We're not gonna see much of a difference yet, but let's make things a little bit more interesting.\u003C\u002Fp>\u003Cp>Let's add another advanced transformation. How about rotation? Let's rotate it by 90 degrees. Fabulous. Let's try some other stuff and you can see, I can concatenate several transformations.\u003C\u002Fp>\u003Cp>For example, let's make it blurry. Let's blur it by 45%. Yep. That's a bit much. Let's blur it by about 15%.\u003C\u002Fp>\u003Cp>Cool. Let's make it 5%. Just give it a little bit of an enigma here. Fantastic. Finally, we'll do something just a touch more enigmatic, which is to use the negate transformation.\u003C\u002Fp>\u003Cp>We'll negate it. And you see didn't pass any properties and it already reversed the colors. Yep. It's totally possible to concatenate several operations and you can apply them in different orders for different effects. For example, now that I've resized it to be a 1000 pixels wide after I've rotated, you can see the image is wider.\u003C\u002Fp>\u003Cp>But what if we wanted to have that height back? Well, the resize transformation does take several parameters. For example, let's make it 500 pixels high. Cool. But, yeah, as said, advanced transformations and other manipulations can be applied in combination.\u003C\u002Fp>\u003Cp>So what you can do, for example, is say I want to reduce the quality of the ultimate image. Let's make it 25%. Save that. And now I've got a blurry negated rotated image. Alrighty.\u003C\u002Fp>\u003Cp>Well, I don't know about the rest of y'all, but I'm always so impressed with how much you can do using these advanced transformations. And as you can see, it can get pretty cool, all powered by Directus' API and SDK. So what's next in store? What we're gonna cover in the next and final episode is how you can apply all of the stuff we can been doing, but with only presets, which means not having to repeat yourself. And as software developers love to keep stuff D R Y, don't repeat yourself.\u003C\u002Fp>\u003Cp>So let's find out how we'll do that in the next episode. But until then, keep those cameras handy, and I'll see you next time.\u003C\u002Fp>","Hello, everybody. My name is Carmen, and welcome to Sharp Focus, the show where we truly capture how it is that allows you to transform your images and truly make them shine. Now in previous episodes, we've seen how Directus manages your images for you, how you can set permissions, how you can use the SDK to manipulate the width, the height, the fit, the quality, the performance, the format of your images, and much more. But in this episode, we're gonna get into some advanced stuff, my friends. We're gonna be looking at how Directus exposes the Node JS Sharp API to allow you to do some truly wild transformations. I'm talking things like rotating images, resizing them, shifting them, tilting them, applying color tints, negation. Oh gosh. There's so much. But don't take my word for it. Let's just hop into some code. Let me just grab my camera here and let's get right into it. See you there. Here we are in my directus project dedicated to my photography, and we'll be taking a look at one of my photos from my recent trip to Chile. In this episode, we'll be working with this photo from Rapa Nui or Easter Island. And as said, we'll be working with advanced transformations. In order to have advanced control over your files, Directus exposes the full Sharp Node JS API, which has a bevy of options to allow us to work with our images. I'm talking things like rotating, flipping images, flopping images, sharpening, blurring, flattening, negate, color negation, color manipulation, channel manipulation, and many other options. So let's play around with some of these. We'll be working once again with our Nuxt applications, applying some of these transformations. Now you can see that I've applied the width attribute, but we can expand on this using the transforms property, which is an array of Sharp API calls. And these are applied as array pairs of property and value. So for example, I'm gonna use the resize property, which allows me to resize my image and make it 1,000 pixels wide. Thereby replacing the width property. And I'm just showing this as something that's possible to do. We're not gonna see much of a difference yet, but let's make things a little bit more interesting. Let's add another advanced transformation. How about rotation? Let's rotate it by 90 degrees. Fabulous. Let's try some other stuff and you can see, I can concatenate several transformations. For example, let's make it blurry. Let's blur it by 45%. Yep. That's a bit much. Let's blur it by about 15%. Cool. Let's make it 5%. Just give it a little bit of an enigma here. Fantastic. Finally, we'll do something just a touch more enigmatic, which is to use the negate transformation. We'll negate it. And you see didn't pass any properties and it already reversed the colors. Yep. It's totally possible to concatenate several operations and you can apply them in different orders for different effects. For example, now that I've resized it to be a 1000 pixels wide after I've rotated, you can see the image is wider. But what if we wanted to have that height back? Well, the resize transformation does take several parameters. For example, let's make it 500 pixels high. Cool. But, yeah, as said, advanced transformations and other manipulations can be applied in combination. So what you can do, for example, is say I want to reduce the quality of the ultimate image. Let's make it 25%. Save that. And now I've got a blurry negated rotated image. Alrighty. Well, I don't know about the rest of y'all, but I'm always so impressed with how much you can do using these advanced transformations. And as you can see, it can get pretty cool, all powered by Directus' API and SDK. So what's next in store? What we're gonna cover in the next and final episode is how you can apply all of the stuff we can been doing, but with only presets, which means not having to repeat yourself. And as software developers love to keep stuff D R Y, don't repeat yourself. So let's find out how we'll do that in the next episode. But until then, keep those cameras handy, and I'll see you next time.","ba4fb8f5-d77e-492b-9ee2-07449c5e10af",[72],"4daa5c56-f887-4c28-8002-4ea130548114",[],1782310058863]