How to Optimise Image Performance in React Native using AWS

unoptimized images is one of the worst performance killers of your application that's why in this video I'm going to show you a solution that can help you fix this problem by dynamically resizing and optimizing the images that are being displayed in your application in the end you can get benefits uh of up to 1,000% faster low time uh in the application but actually instead of me telling you this let me actually show you because this problem with slow loading images is very common especially in applications that have user generated content so here is a before scenario uh and I'm trying to just render a simple screen something similar to Instagram with a grid of posts some uh profile pictures maybe some pictures of people who are following and this loading speed is in real time and as you can see it's super slow it not only increases the amount of data that is being downloaded because in total all of these images we 88 megabytes but it also impacts the user experience because you have to wait 15 seconds just to see all the images loaded well we're going to fix this isue and at the end our application will load like this I'm not sure if you saw it but it's didn't even blink like the images appeared instantly just because they are optimized and they are the right size uh displayed so in the end our application rendered in less than 100 milliseconds as you can see here it took around 1 millisecond for every single picture and in total we downloaded 490 19 kiloby so real quick to to show you before it was 15 seconds and 88 mbes that's actually 99% faster and I think it's uh one like yeah it's probably 1,000 times uh faster to load the images and less data being loaded on the end user device so that's uh the solution that we're going to build today this uh solution is designed for any kind of project that is storing the images in an S free bucket so if you're using S free it doesn't matter if it's a web or a mobile application you're going to be able to implement this Solution on AWS to optimize your images that are stored in s free so we're not going to use any third party providers everything is going to be directly on AWS and we're going to take advantage of a pre-made solution so anyone will be able to follow along in fact the whole solution will take probably less than 30 minutes because we only have to configure it with our own project so anyone with uh no matter your experience will be able to implement and improve a performance in your application when it comes to the front end as I said this solution is front end agnostic it doesn't matter if you're using react view angular react native or anything else I'm going to show you an example inside react native but the front and side is really minimal like it's a couple of lines of code to build a URL in V you can uh serve that image anywhere in your application so the agenda for today what we're going to do is first of all we're going to deploy the solution on AWS and it takes literally one click to do that uh we're going to then explore the demo UI to see how it works to play with it and make sure that the solu solution actually is working and after that we will be ready to integrate it in a client side application in this case I'm going to show you how you can do it in react native after that I'm going to also explain you of architecture and I'm going to explain how everything works behind the scenes so that you understand it better and also I'm going to cover the pricing at the end uh to so that you know uh what to expect and by the way it's way cheaper than uh using third party providers but more about that at the end so if you're ready I'm ready let's roll the intro and let's get [Applause] [Music] started before we jump into the implementation I want to say a big thank you to the sponsor of today's video staben if you haven't heard of stepen staben is a unique graphql uh server that allows you to build graphql apis really easily and uh you get an optimized and a very scalable API out of a box so the way it works you can connect steps Zen to different data sources starting from uh SQL backends like postgress SQL MySQL also to rest apis for example if you have a rest API you can uh create a graphql layer on top of it with a one line of code and two other graphql back hands if if you're interested to learn more about that make sure to follow our LinkedIn clone that we are doing at the moment this Friday we're going to do the back and side using staben and there you'll learn more about the benefits and how easy it is to build graphql apis thank you very much staben for making this video possible and if you're ready I am ready let's go ahead and talk about the prerequisites that we're going to need and right away start working on it so here I prepared the prerequisites you're going to need an AWS account it's free to create one you have a free tier but more about pricing I'm going to talk about it later uh I have prepared also a step-by-step guide on our website so go ahead to uh nodev blog AWS image Handler and there you should find all the steps that we're going to have to take today including the uh asset bundle the asset bundle will contain uh first of all this presentation that can help you uh serve as a step-by-step guide to implement it in your project and also I included V the starter project that we're going to use today and also the final component that will render these smart images so make sure to download the asset bundle as well all the links you can find in the description below and yes we that being said hello everyone from the live chat uh let's go ahead and open up the page for this solution so what we have to do is go ahead open the servus image Handler inside the AWS solution library because as I said this is a pre-made solution it's a cloud formation stack that we can launch inside our um AWS account and this stack was created by AWS professionals so in the end it's a very secure scalable stack that uh can help us get started with this uh we don't know we don't have to know all of the things that goes behind the scenes we can simply launch it connect it with our application and benefit out of it anyway I'm going to also explain you all of this architecture how it works and why why works so well but to uh to launch this tag it's very simple it takes one click of a button so if you follow that link I also included it uh here in our blog uh here in the right panel we can go ahead and to scroll to the deployment options here in the deployment options we can press on the button launch in aw console and what this will do is it will go ahead and I'm already logged in in my AWS account if you're not make sure to log in or create an account if you don't have one but probably if you're watching this video you have an AWS account and that button redirected us to the cloud formation AWS service that allows us to um create AWS text based on predefined templates so on the first page the only thing that we have to do is press next because everything else is prefilled with the URL to this serverless image Handler template so we don't have to touch anything here let's press next in the next one go ahead and give it a name you can leave it a serverless image Handler or you can provide here more details about your project and let's go ahead and select some of uh the only important parameter that we have to change here for this to work is the image sources here we need to specify the name of a bucket where uh our original images are stored so if I'm going to go ahead in S3 S3 uh here I'm going to see a list of uh a list of buckets if you are using amplify you might see something like amplify like this or go ahead in your AWS uh config file from inside your project and there you'll find the name of bucket where your uh objects are stored the bucket that I'm going to use is called uh something with dummy data I think I will have to yeah it's this one that includes some images for the dumy data and here I prepared some high resolution images that are basically three to I mean 1 to 4 megabytes and this is usually the sizes of images that user are uploading from their phones so inside these buckets let's go ahead and copy the name of a bucket and back in our cloud formation here inside image sources we're going to delete the default once and enter the name of our bucket if you have multiple buckets that you you want to add this image Handler for you can add them as comma separated but for us one bucket is enough let's leave everything else uh by default and let's go ahead and press next here we can add some text but that's not the most important and on the last page let's press next and here to confirm everything let's scroll down I add knowledge that AWS cloud formation might create ym resources and submit all right that was everything that it took for us to start initializing this stack and now what we're going to see is this create in progress you're going to see a list of events and we're going to have to wait around four to five minutes until we see that the last thing uh is in create complete um status so while it's still creating progress we're going to have to to wait for a bit so stay patient and actually I'm going to maybe move it here not here here yeah I think this way it's going to be better okay we can from time to time refresh this but yeah like as I said it should take around 3 to four minutes not sure what's going on Stacks here the last one and in the event and we're going to see the it's a bit weird when I'm zooming in so much somewhere here events yes oh yeah should be like this yeah so now um cloud information is initializing all the services that V solution depends on inside our own AWS account and uh is connecting them together in order to make it um make it accessible for us uh yes as I was saying this solution is especially important for application that have user generated cont content for example if users are allowed to upload images inside your application then uh most probably your application has this performance performance issues because whenever the user uploads an image from his phone that image is usually a couple of megabytes large it is very uh it's a very large image and whenever we are displaying it inside our application if you're trying to display a 4K image inside a circle that is a size of 50 pixels by 50 pixels uh like in the case of these followers in that case you are wasting so much uh data by loading the original size high quality image so a better approach like as you can see here if I'm going to refresh this application it takes quite a lot of time to load them it's real time like as you can see like it's it's that slow um but if we change to Smart image here in our code and that's what we're going to do in a moment if I refresh as you can see it's instant like I don't even see like any flickering it feels like the images are displayed even faster than the static text uh that we see here so the the quality didn't decrease too much maybe we can uh we can uh be more generous here and have a even a better quality uh because there is a lot of room uh to to increase the quality from here but anyway like everything looks the same uh but it's it's loaded the images are loaded with the right size for example this profile pictures that wear in total I don't know like 20 megabytes now we are a couple of kilobytes because all of these profile pictures they should be 30 by 30 pixels not more that's what we have in our application so that's an optimized way to to show the the images so the idea of this video actually was generated from uh the startups that I am advising so a couple of them had this problem where the application felt very slow the images were loading very slow like you would open the feed and you would have to wait a couple of seconds for the profile picture for the images in the feed to load and they asked me like how can they improve this uh the speed of um of the the application by improving the optimizing the images so I decided to do this uh video for for for them and also for you guys on YouTube because I believe this can be helpful for you as well so yeah if we go back to our uh cloud formation here we see that the last one serverless image Handler is in create complete stack uh status so that means that everything has been created and we are ready to test it out how do we do that let's go ahead and press on the outputs Tab and from here uh we are going to see a couple of variables that the stack output gave us back one of is this demo URL let's go ahead and open the demo URL in a new page and what we will see is a user interface that was deployed for us to test our resizing solution so this is a great way before we integrate it inside our own application it's a great way to test it out to make sure that everything works to also try to play around and understand how the solution works so what do we have to do here in the image source we need to provide the bucket name so the bucket name in my case that's not just Dev dummy and the image key go ahead and actually navigate inside your uh s3e bucket to an image for example this one one. jpg from here you're going to see the key so let's copy the key of this image and let's paste it in the image key here let's press import and if everything works we should see the original image being displayed here if something not uh didn't work make sure you follow along and um the the configuration that we provided at the beginning make sure that uh you didn't touch the default values and uh maybe the names of the files and the key should also be important another limitation that I'm going to talk about later is um try some standard um extensions for your images like PNG jpg and so on because the hake Doh extension from IOS it's not supported here so if the image is not loading make sure you're working with a PNG or something like that anyway so that's our original image that means that our solution is able to access the data from the s bucket now the second step is to specify how do we want to edit this image for example we can provide here the wave of I don't know 50 by 50 we can uh enable the size mode and here we can choose probably cover in order for the image to cover the whole 50x 50 square and if I press simply preview right now we're going to see the image 50x 50 here so if you open it in a new tab if you download you're going to see that it's actually 50x 50 and yes that's how easy it was um there are some other things that you can play with here for example if uh there are different resize modes uh so if we have with maybe 100 and height something different than the original image if we're going to do preview it's going to be cut like this maybe maybe you want to change the resize mode from cover to contain and in that case it's going to contain here but in this situation you also can provide the feel color and the background color like I don't know one two one two one two what's going to be that I don't know or should it be the FI color it's it's a it's a gray color and here we see the green color um anyway if you leave a height empty and only provide one uh dimension for the weave or only the height in that situation uh the other the aspect ratio will be uh kept the same and only one part will be changed like the wi for example so this is very good when you want to resize the images but keep the aspect ratio you can also do some uh different um changes modifications to the image because behind the scenes uh behind the scenes this solution is using the open-source Library sharp for uh processing the images so a lot of things and a lot of configuration that is available in sharp we can uh use here for our request and configuration body for the image for example we can go ahead and make the image grayscale by sending here a new property grayscale and that's going to make it grayscale we can flip it we can flop it what does flop mean I don't know oh okay okay I I understand it's like um like in a mirror you can make it even negative for some reason if you if you need that uh so yeah there is a lot of things that we can do here uh I'm going to remove this field and background color and let's do preview okay that's that's better now uh now no now what's the yes what we have done so far is we deployed the the solution we configured it uh properly we deployed it we waited and we played with the demo UI the next step is to integrate this solution in our rec native application and to basically request optimized images the same way as we are doing here with the demo UI inside our application so how does that happen uh do I explain it here no I don't so uh how does that happen how do we actually implement this uh as you can see at the end the demo UI gave us an encoded URL so if we go ahead and access this uh encoded URL in a new tab we're going to see that it actually this URL contains everything that we specified here inside our editor so now if I'm going to copy it we should see that it's a image grayscaled image okay perfect so as we can see the URL this URL is very important because the first part is the URL of the um our cloud formation basically the global CDN that we have to access to access our images but the second part which looks like a very weird string this is in fact a base 64 encoded version of this object at the top so everything that we provide here in the object is going to be encoded and added to the URL and the cool thing about this is that sending a second request with the same parameters will not trigger will not uh do the job twice because the object where this request with this options is being cached in the CDN and it's only uh executed on the Lambda side only once so that's something to to to to understand maybe when I'm going to talk about the architecture it's going to make more sense but what I wanted to say is in order to integrate it inside our application there are a couple of steps that we have to do first of all is to Define this request body that has fre problem properties the bucket basically the name of a bucket the key basically the name of a file that we want to optimize and an object with edits the edits you can play around here to get exactly what you want uh where I'm going to show you the documentation to see what extra edits you can do because these are not everything that you can edit in the image this is the basic that you most probably will need so after we create this object as a j an object inside our application we go ahead and encode it as a Bas 64 you can do that in any kind of uh framework or application JavaScript and so on and having that encoded we put it together with a URL and we can load the images inside a normal image component so let's go ahead and Implement that in our application actually I'm going to close this and solution uh because I want uh to start from the starter project the project that everyone has access to if you download the asset bundle so let me go ahead and open it here give me just one second so it should be YouTube videos and this one so here we have it here we have the asset bundle that you should all also have access to and I included this the starter project zip folder so let's go ahead and unzip it and I'm going to go ahead and open it in Visual Studio code let me open a new window and will it work like this yes so here when our project is opened in uh Visual Studio code let's go ahead head and install the dependencies by running npm I and then npm start uh so I think I just have to wait a second to stop the other server where is it come on and start it here again so npm start to start our development server and here I can press I to run it on iOS all the code for this application uh is inside this up. TSX I mean most of the things uh is inside up. TSX and let's try to run it again and I'm going to show you what's everything okay so here is the application loading very very slowly and the our application starts with a header and this header includes the background image uh this s fre image then it includes the profile pictures of a person some bio and after that a list of users that are following me this component is very important to optimize it because the images are very very small so you don't want to load very large images there anyway this header is later used as the header of the flat list and the flat list is what renders our grid view with fre columns so all the data is coming from the users. Json here I added some D data for you as well to test it out to see how it works okay and yeah the component that is being used for all the images at the moment in the application is called S free image the S free image is a component inside our component components folder and this is an unoptimized component that will receive the image key from the S3 bucket and we'll simply concatenate the URL of the bucket with the image key inside here and we'll render a rock native image using that URL and that's everything it does now let's go ahead and actually copy paste this S3 image and let's call it smart image let's call it smart image and let's go ahead and actually change the name here smart image and smart image properties here okay so here as well so as I said the first step that we need in order to render these optimized images is their request body so let's see how do we want to resize a particular image for example we will have to specify with maybe height the siiz mode it's most probably going to be cover and we don't need gray scale and I think that's all the edits that we need so if I press preview it Updates this object here so let's go ahead and copy it from here inside our code so const image Quest equal to this object I'm going to save to get rid of the bracket to codes and I'm going to also uh adjust some some of the things here for example uh S3 bucket here uh I'm going to put this one as the S3 bucket and maybe I'm even going to call it bucket I mean you don't have to but I will just take it outside this image request so the bucket is my bucket replace it with the name of your bucket the key is going to be the property that this component receives the image key because we need it dynamically from outside to be able to use this smart image and by sending the image key and the width and the height it will automatically do that so uh what do we do with this object well we have to first of all stringify it because we need a string version of it so I'm going to wrap it inside json. stringify and we put the whole object here now having the object as a string as I said the last step is to base 64 encoded to do that I'm going to have to install a library called buffer uh in re native so let's do npm install buffer like this uh no version available for buffer that's weird npmi buffer I don't have internet or what yeah now it seems to to work so let's go ahead and import buffer from buffer and here inside our smart image component we can get the encoded version of our image request by calling buffer from image request dot to string and here we can encode it as base 64 so now if I'm going to so now the last step is to go ahead and add the encoded part after the URL of our cloud formation you can take it from here or you can go ahead in the cloud formation check the output and here is the API end point this API end point is how we can access the cloud formation so let's go ahead and do here const URL is going to be equal to this one uh maybe we can add the um slash Advent here because later on we can simply when rendering the image we can simply concatenate URL and then the encoded uh image request object after it so that's everything that we have to do I'm going to come back in a moment to improve it a bit uh but uh now I want to test it out and see if it works so let's go ahead in our app. TSX let's import the smart image from component smart image I'm actually going to go ahead and Define a variable called image here which will be equal to Smart image because this way I'm going to be able to replace the image with either S free or with smart image and inside the code I can use this image component make sure you don't have it imported from react native uh to be used from here so every time I see S3 image which is in one two three four places I added the S3 image and as you can already see the application is loading instantly the first qu the first query maybe took a little bit of of time because as I was saying before the first time the image is being processed it takes a little bit of time because uh the AWS Lambda is using sharp to optimize the image but then it is being cached in the CDN and all the other requests to that image with the same options from your phone or maybe from any other user in general is going to be served from the cache and and it's going to be super fast and that's why we see here if I refresh the application right now it instantly shows here and if I replace back to with a S3 image you're going to see the difference yes I always love seeing this this difference and the impact uh all right so another thing another thing that um we can do here maybe to improve a little bit um in order for for this not to be recreated every time maybe we can put it in a use memo so if I precalculate the encoded URL once uh using the use memo it's going to be better for the performance of our react side but this is very optional like everything is going to be working uh fine before so use memo needs to return a value here which will be the value of our URI so if I copy everything here the image request and the encoded part from here and what's going to be the URI well the use memo should have this Arrow function sorry what should be the URI the URI should be the actual end result of a URL plus encoded so let's go ahead and copy it from here and return it as URL from the use memo plus encoded and here we can simply say Source URI because this URI is calculated inside the memo and we can add the image key as the dependency of uh the use memo and this way every time the image key changes this use memo will recalculate the encoded version of the URI and will upd ated so this way if I'm going to refresh everything is perfectly fine and our URI is only calculated once uh okay so another thing that I want to make um more configurable is the width and the height uh we're going to do that using the properties so let's go ahead and add the with not while but with as a number and also the height as a number because sometimes I only want to specify wave or sometimes I only want to specify height I'm going to make both of them uh optional with question mark and let's go ahead and destructure them from the smart image properties as WID and height now here in our image request instead of hardcoding 100 let's give the wi coming from here and the height also coming from there so if I save right now it still should work but we lost the the very fast uh loading images because width and height is undefined and it simply renders the original one to to to fix this let's go back to up. TSX and for every single image you need to think about the sizes of that image in some situation it's super simple for example uh if I look at this followers that are rendered here on the screen to define a fixed size and wave for these images that are rendered here is easy because we can look at the style followers image and we see that this followers image will always be 35 pixels wide by 35 pixels tall so we can go ahead to this image that is being used here and we can provide the height 35 with 35 and now the followers maybe the first time it doesn't improve but if I do it again it's again not improving why image wi and height followers in the header uh let me go ahead and uh do console. log image or URI maybe I should also add the wi uh and height as the dependenc of this array and if I refresh maybe the actual images are loaded okay but they are loaded after the other images that take a lot of time so let's go back to up. TSX and for example for the image uh rendering our profile picture right this one the Avatar if I look at the Styles the Avatar will always be 100 by 100 with so for the Avatar image I can go with 100 and I can leave it even like this because the height will try to maintain the same aspect ratio for the image of the background if I look at the background image the wi is dynamic is 100% however the height it will always be 150 so I can be I can go ahead and give the height 150 here save yes I already see that it's working because the quality decreased maybe for the header the quality is too little so maybe you can increase it a bit like to 300 400 or something like this uh yeah now it it looks better and you have a lot of room to to increase the the speed without having these slow images and what else what else what else so image optimized image has WID image has width and height and then in the flat list these images that are rendered in the grid here we can specify the wi of I don't know 300 pixels might be okay now if I refresh it still takes a bit of time but the second time that was the first time but the second time when I refresh it's already cached in the CDN it's not cached locally so this is very important to to understand I'm going to open the debugger and from Smart image I don't have to console log anything because it works so in the debugger we can have a look at the network request that are being made so if I refresh maybe one more time we see all the images being loaded so as you can see this let let me zoom in a bit so these images are already not a couple of megabytes they are 44 kilobytes 43 30 and so on and the images of people who are following they're super small and they are only uh like this one is only 3.7 kilobytes it took 1 millisecond to load and I can even disable the local cache and the images will still load very fast I can even uh probably uninstall Expo go from here and the next time it's going to open uh also fast because it's not necessarily cached locally it's cached at the cdan level so it's also clo like in a physical place where it's close to our application so as we can see the images loaded uh and now it takes like literally instantly to load them so to recap what uh is how do we integrate the process and optimized images in our application all we have to do is to create a image request that contain bucket name where to take the images from the key with the uh key of the image and a list of edits that you want to uh to do on the image after that the object will be stringified and then encoded to base 64 and it will be uh uh mer together with the URL of our deployed cloud formation Cloud front I mean uh that we can take from the output here and that's it then that URL can be used with a re native image where it can be used to be downloaded it you can do anything that you would do with a publicly accessible image uh there so now our application is loading a little bit faster I would say all right so that was the integration of the image Handler in react native uh let's see what do we have next in the presentation you have all of these steps with more code Snippets that you you can take uh take a look at uh and if you have a an amplify project because on this channel we have done a lot of amplify projects where two things uh but I want to mention here specifically for you guys so first of all if you have created the the uh amplify Buck the S3 bucket using amplify you can also manually Define the name here but a better approach would be to take the name of a bucket from the AWS config so AWS has that AWS exports file which contains the user file S free bucket so by having by taking the bucket from that f file you dynamically take it from the configuration of amplify next thing is the prefix so with amplify uh here it's also depending on how you store the images because if you uh if your image key that is stored in the database for the uh for the user avatar for example if it doesn't start with a public or private or secured in that case you need to when specifying the image request you need to add manually the public here before the image key because amplifier will create three folders in the root Direct in the root of your bucket one for public files one for protected files and one for uh private files so make sure uh to to add the public at the beginning and later on I'm going to talk about the limitation but long story short this solution will only work with publicly accessible images so yeah if you're using amplify make sure to follow the steps as well and yes this is our result it takes less than 100 milliseconds to to load 100 is probably too much because all of them are literally 1 second and the total size is less than 419 again this depends on how aggressive you are with resizing the width and the height of the images sometimes uh you can do that quite a lot like for example for small images like this sometimes you want to preserve some uh some quality so if I'm going to check here for the this one in this case it's less than 1 megabytes for all the images here 25 images in the feed and more here in the header okay so guys if you we're not done yet I also want to cover of architecture some Advanced features and also a pricing but if you enjoyed it so far make sure to subscribe to the Channel Down Below uh because we are doing this kind of content every single week Project based mobile application so if you want to learn that if you want to become a full stack developer make sure to subscribe it can take you literally two seconds and it will help us a lot and if you do that you are officially part of a 1% gang and you can comment that uh Down Below in the comments because from the analytics only 1% of you watching this video right now are actually subscribed which is mindblowing it takes you one second so if you've done that comment below the 1% gang I will be very thankful to you and uh yes we can continue with our build um here I want to specify a little bit uh to talk a little bit about some of the advanced features uh some of this is the Smart cropping feature so where how can we play with it I'm going to show you how we can play with it in the demo UI because this is the easiest way and anything that you can do in demo UI why you can just simply adjust the request body in your application and it's going to work the same so I want to load a picture of some uh some some some humans so I think uh horoi or how it called so if I import yes this is a picture of a person uh standing so the thing is that if you want to render the Avatar of this picture in instead of reducing the WID and size to let's say one 100 pixels maybe I can do it to 300 so you can see better if I will do it like this maybe not even show giving the height to preserve quality let's do it even smaller yeah so if you want to resize this picture to show as an avatar it's not that smart to Simply crop it down completely uh or resize it completely it would be smarter to crop it and focus on the face of a person with this solution you can and you can do that with a couple of options to your request body to do that go ahead and select smart cropping and add some cropping pting like I don't know if you don't add it what you're going to have at the end is this small face uh preview yes as you can see this automatically smart cropped it and focused on the person fac it's a bit weird like this but if you add some padding like I don't know 50 it's going to look better and you can use this picture now for the Avatar because it's make it's going to make more sense for if you're building like for example a social media application uh this is working behind the scenes with the Amazon recognition it comes with additional costs which I'm going to cover in a moment but it's very nice to see that this thing is possible here anyway uh so again like you can use this in your application by simply adding this smart uh smart crop and the Ping 50 that's it you can also choose like if you have more people like on which one to focus that's optional by the way that is the AI feature of smart cropping to people fa Faces by recognizing it and focusing there another thing that is powered by the same service Amazon recognition which does image analysis is the content moderation tool so the content moderation tool can help you automatically detect images that are not safe for watch uh like for example new nudity or uh even other filters that you can Define where so if you're building an application I don't know maybe targeted to kids or even like any kind of application if you start growing and if you don't have any content moderation in place you'll very soon get weirdos on your application that will start uploading pictures that are not very safe to for for everyone to watch and these issues like if you don't Del delete those posts uh manually uh these issues can actually get your application removed from App Store because um it has uh this not safe for watch um content so with the next feature from the same solution that we have here is we can enable content moderation with a simple parameter content moderation through and this will activate the content moderation and it will uh it will how is it called uh blur the image if the Amazon recognitions believe that it's um it's not safe to to show it so uh actually maybe we can I didn't prepare a demo for this but maybe I can do it quickly um so I know I will not show any like nudity but I know that there is an option to to also filter out where is it I can open the the implementation guide I think for smoking as well like there is a smoking images you can hide things that people that are smoking basically so if I'm going to download this image and if I'm going to upload it to the same highres things smoking let me add it here and I'm going to make it publicly accessible okay um now this content moderation I cannot uh let me just check if I can upload the image here but I cannot uh ad web content moderation from this demo UI so we're going to have to do it inside our own application so let's go ahead and um inside the code of our application I'm going to add inside users. Json I'm going to add one more post at the top that will have the image smoking and this should be the latest image here yes that's what we see and in smart image if in the edit I'm going to do how's it called content moderation through content moderation through let's refresh and see what we have it takes a bit of time because now it regenerates again because our image request has changed and it should go through the Lambda function again and as you can see just by doing that the latest image is blurred and we cannot see it so that's a super powerful feature for social media applications to automatically do content moderation yes it comes with some additional prices but it can save you a lot of time and yes the first time it took a little bit more more because it went through Amazon recognition as well but now if I'm going to refresh it's cached and it's automatically it's render way way faster anyway I'm going to turn down content moderation I just wanted to show you what's possible and uh I will also actually show you some details about this content moderation in this guide uh where is it use the solution I want to show you what what you can do basically with content moderation because I simply enabled it and it will moderate everything but you can also specify exactly how you want to to to moderate so yeah if you simply do content moderation through that will enable it but there is also operations like minimum confidence to increase the uh the threshold where the image will be blured or not it will you can also specify how much blur you want because you can maybe blur it not that much as in our situation that was completely blurred uh and this moderation label is also very important because moderation label labels you can uh specify what exactly do you want to uh to to hide because maybe you don't want to hide everything maybe in your application smoking content is okay but nudity is not okay so you can go to this page and you can look at the different labels for the moderation there are top level categories and there are more specific so you can specify you only want explicit nudity to be a filtered from your application or violence or drugs or uh tobacco alcohol and so on hate symbols you can also do that rud gesture middle finger you can hide it as well it's impressive anyway this was the smart content moderation powered by the AI tool Amazon recognition and how it can also help you with this solution uh another Advanced feature is the fber but I don't have a lot of experience with fber the only thing that I know is uh you can specify different filters with it so if you if you're interested in this fber compatibility what you can do is you you can specify this edits inside the inside the URL inside the URL and I saw that how it can actually be very helpful is for example adding um adding a watermark to all of your images that's another cool feature that you might be interested in where is it uh come on fun look I'm not going to I'm going not going to stop here I will only say that this solution supports like fber filters and you can have like different things like you can rotate the images you can add different filters on top uh you can also add water marks and so on so if you are interested in that check out the documentation of the solution to to find out more um okay now now it's about the architecture um as we saw we didn't didn't have we didn't need a lot of experience and knowledge about AWS to implement this solution it literally took us a click of a button to spin it up and that's cool and that's perfectly fine but I also wanted to sorry to dive deeper a little bit into architecture for us to understand what's behind the scenes and how this solution actually works because it will help you better understand understand how to use it how not to use it how to adjust it maybe or how to look into the implementation details because you can do that as well it's open source so at the core of architecture there are actually two main services so the client will send a request and the request will go through the Amazon Cloud front Amazon Cloud front is a CDN a Global Network of servers where that works as a cache for your uh data for example if your S free bucket lives on a server on AWS in USA and some users from Europe or from Asia are requesting that image that image will physically move through the wires from USA all the way till the the till it gets to the user so the speed will differ for a user that is using your application inside us compared to a user using it somewhere far from USA because it literally takes more time for the buys to travel through the wires with Amazon Cloud front AWS has a lot a lot a lot of servers all over the world and the way it works is you put it in front of a for example S3 bucket and when someone is requesting a image from the cloud front it first checks if it has it there locally cached if not it will go to the source uh S free Bucket from us it will download it will give it to the user and at the same time it will cach it on that physical server that is closer to the end user Maybe from the same country maybe for example if a user from Germany uh joins the application the image will be cashed at the at a Germany um at a on a server that is in Germany so the next time someone else like another user joins from maybe Belgium it will come from the same Germany um server and it will take way less time to to download the image because it's physically closer to you so I think I'm uh going too much into details uh to to these servers maybe if you're interested I can have like separate videos about that but long story short Amazon cloudfront is a global CDN Network that caches our images now the second important part is on the right it's the AWS Lambda function the AWS Lambda function is using internally the open source Library sharp and is taking an image from ns3 bucket is using sharp to do all the optimization and edits on it and then it gives it back to to to the Amazon Cloud front so the logic of processing is happening in AWS Lambda in between them we have an Amazon API Gateway that simply uh creates the endpoint and invokes the AWS Lambda function it's like a g like a middleware between the Cloud front and the Lambda that executes the code these are the most important parts but uh the whole solution has a little bit more uh Services there for example if you enable smart cropping or the content moderation AWS Lambda will uh talk with Amazon recognition to uh to to process the images with the smart dropping and AI features here here on the bottom we have AWS Secrets manager and if your files that users are uploading if they are encrypted inside your S3 bucket you can specify the a secrets that are used for the encryption and a Lambda will get them from there and lastly we have here an Amazon S3 bucket and this is different bucket than the one where we store the images this s fre bucket is used there are actually two buckets one of them is used for the logs where Lambda will write all the logs and another one is used uh for the demo UI so it will only be there if you enable demo UI so that insured the whole architecture how it how everything works so the first time uh the user will request an image it will go for Amazon cloudfront it will see that the image is not in Cache with that specific configuration it will go ahead for Amazon API Gateway will invoke the Lambda function the Lambda function will read the image from the from the source S free bucket where images are stored it will use sharp to optimize and edit it if you enable smart cropping or content moderation it will call the Amazon recognition to do all of these uh AI things then yeah like it will bring it back we'll write the logs to S3 bucket and we'll give it back to Gateway the Gateway will send it back to Amazon cloudfront and the cloudfront will give it to the client but the second time the user uh request the same image it's going to go to cloudfront cloudfront will have it already cached and it will return it back to the client so only the first time we invoked all of the services after that everything is served from a cloudfront from a CDN so that's why you saw that the first time maybe takes a little bit of time for the image to be processed but after that it's right uh right away being loaded and it will not work only on our device it will work once for everyone okay so that was our small architecture when it come to pricing um that's also very important to understand how everything is going to be priced it's important to understand that cloud formation step ta that we launch on our account we personally we personally are responsible for all the charges that the services used in that stack will incur so if we look at the previous architecture diagram it's going to it's helpful for us to understand what services is are being used behind the scenes because this way we can understand what costs should we expect AWS this solution comes with a example diagram that gives you a little bit of uh ideas of how everything is priced and here we have an example of for example having uh an application where users are uploading 100,000 new images every single month so if your application has 100,000 new images every single month expect to pay for the whole image uh process processing around $15 and most of them are coming actually from the Amazon Cloud front uh the the CDN but because we have a cloud front we are saving a lot a lot of first of all comp compute power from AWS Lambda because the Lambda is invoked only once and after that only cloud formation is doing the work uh and without a cloud formation we would have to use Lambda for every single request so them and price would be way higher and the Amazon is free for storing these images is very cheap and the Gateway as well is quite cheap the secret manager as well and you can see how it grows for example for 1 million images expect to uh pay 10 times more 150 and for 5 million that's going to be around $752 per month but if you're at vet levels where your application is generating 5 million pictures every single month I think you are in a very good uh situation and uh $700 is not that much uh I also want to mention that the services that are used for this solution they some of them I mean Mo most of them are also included in the free tier so when you create a new account on AWS you get the free tier for most of the services contain it for 12 months and some of them are actually always uh there so speaking about the services that we use in our application expect to have like this amount of things for free so every single month you're going to have 1 million Lambda request for free when it comes to the cloud front you're going to have always every single month you're going to have one tbyte free of charge and it's not only for the first 12 months it's always for the Amazon API Gateway again one million API calls per month are free and this is only for the first 12 months and Amazon is free 5 GB of storage free for the first 12 months so I believe that uh if we go back to this pricing thing the AWS Lambda for 100,000 images this is going to be under ti so minus three uh dollar but cloud formation it depends 1 Megabyte per image so if we have 100,000 image that uh that's less than one terabyte so that's going to be for free Amazon is free it's going to be free so you're for the first uh tier here most probably you're going to pay actually zero because most of these things are covered by the free tier more information about the free tier and the services that are included there you can access at AWS amazon.com free and lastly about the pricing is that maybe you saw that in this diagram the Amazon recognition service is not included so this is very important to understand because if you're using smart cropping or content moderation you are actually invoking Amazon recognition and Amazon recognition is a paid service and the pricing you can check here by following this L and I gave you a little example from the from that documentation is the to analyze 1,000 images it's around $1 and the more images that you analyze the cheaper it gets so use the recognition responsibly because most probably this is going to be the most expensive uh part of your architecture because everything else is quite cheap um yeah so that's the pricing if you have any questions let me know lastly uh some limitations that I want to mention is uh first of all this solution is uh available only for public images so images that are open to public anyone can access them they're not protected by authentication flows or so one so that's important to understand and also another thing is that this solution does not support the do hake images and this is a limitation of the open source sharp Library used to process the images and it's important because on iOS a lot of images are do hake so we would have to probably pre-process them transform them to jpeg or PNG or something else and after that use them inside our architecture and the sharp supports V this for uh image format so quite a lot anyway that was everything for today super excited about this video uh if you have any questions let me uh let me know in the live chat or down below in the comments um I hope this video helped to improve the performance of your video of your video of your application and uh if you have like an application where you have images uploaded by users you definitely have some problems with image optimization so this is a great solution that takes probably less than one hour if you do it back to back anyway at the end I want to say big thank you to stabs and again for making this video possible for sponsoring this video stepen uh we're going to integrate stepen in the LinkedIn clone this Friday so make sure to join the live stream it's already scheduled or if you're watching this up afterwards the live stream is already on the on the channel so you can watch it and learn how to build a full stack LinkedIn clone um stepen thank you very much uh and yes let's see one question we have here I want users to see where data only I was making an up with a amplifier react native I want to add authentication but I want users to see their data only how do I do that you can do that from from limiting like the permission of your API so allowing only uh owners of the data to to query it to modify it and so on that's on the API level on the images uh you can do that but this solution that I showed today is only working with publicly accessible images so maybe it's not exactly what you need or you can adjust it there is also the source code of this solution is it suitable for any size of application yes this solution is very scalable so it doesn't matter if you have 10 users or 10 million users all of these Services they are serverless servers serverless services and they will scale up with the demand of your application so it's perfectly scalable for any size of application okay so thank you very much guys uh if you enjoyed this one make sure to subscribe to the channel we're going live every single Friday this Friday we're going to build the LinkedIn clone with stepen and I'm going to see you there okay thank you very much and have a great day bye-bye

Channel: notJust․dev

Views: 4,387

Keywords: vadim savin, not just development, notjust.dev, react native live coding, live coding, react tutorial, react native tutorial, react native for beginners, React Native, AWS Services, Stepzen, Dynamic Content Delivery, Image Optimization, enhance image performance, image performance, how to optimize images for web, how to optimize images, optimize images for web, resize image without losing quality, optimize images, resize image, optimize images for app, aws images

Id: XzYsV6eMs2w

Length: 76min 44sec (4604 seconds)

Published: Thu Jul 27 2023