Maximize Performance with Image Optimization - Flutter Global Summit

ladies and gentlemen welcome and thank you for your attendance I want to start off with a question how much conversion rate will your application lose for a delay in the loading page of a hundred milliseconds the answer to that is seven percent my name is Rafi and I'm here today to show you how you can improve your application in terms of conversion rate traffic and customer satisfaction before I work as a senior mobile developer at Cloud energy I've been working there for over a year I've been developing mobile apps for over 10 years now started my way back with Objective C clubbed away to Android Java Android kotlin Swift and recently platoon at my spare time I write technical blog about the things I learned because I believe that putting my thoughts into a paper makes me understand the material better I was also a lecturer for mobile system design at the University for two years and lastly it is something that I'm really proud of I'm a passionate gamer from PC to consoles any game I've just I just love playing games so before we get started I want to give you the notion of why would we choose to develop a mobile application why we become mobile developers I understand that most of you know the mobile world you live and breed code um but but why do we develop apps what's so captivating about it so I want to take a look at the following graph on the left side you can see that 66 of the internet traffic at December 2022 two months ago was through mobile devices if you add up to that the tablets you get over 68 of the internet traffic is true mobile surpassed desktop most people choose today to use the internet through their mobile devices and there are many reasons to that some of them are Improvement in battery life and screen quality that makes up for a better user experience and that's why people choose to do it on the left side you can see the App Store revenue from 2017 to 2021 you can see that the the revenue is rapidly growing up to the insane number of over 85 billion dollars at 2021. on the right side we can see the Google Revenue the Google Play revenue from 2016 to 2021 it fell short to almost 48 billion dollars those numbers are huge and they come from your applications from the subscriptions to consumables and non-consumables so now that I have your attention what we want to do is we want to build a successful application captivating reach visual we surely need to use assets text only will not do it we're not at the 90s anymore we want to show a lot of assets ideally we can hold them all on the phone locally but that's not very good because those assets change from time to time and also if you put them all on the app it will weigh a lot and no user will go to the store and download a huge application so the solution is that we need to get those assets remotely we need to pull them from the internet to the device when the app goes up so what is the problem with pulling many assets remotely first of all we are building a mobile application we're using mobile device no guarantees that the user has a stable connection he could be roaming he could be traveling he might be even standing at a spot with a bad signal getting assets that are not optimized and weigh a lot in terms of file size can be very challenging we're loading a lot of assets at once if those assets are not optimized in terms of weight height the file size the then they are not optimal for the containers we're going to put them in the device need a lot to render those and fit them into the smaller container this can cause performance issues since it takes a lot of resources from the device to decode and render and put those into the Container you might end up with what you can see in these screenshots blanks holes and long progress that will finally show the image but this is not a good user experience some applications support orientation change when I switch my phones between landscape and portrait how do we handle this do we keep an asset for each orientation do we take the same asset and put it between alternate and Landscape do we stretch it do we shrink it do we crop it do we fit it how do we handle this it might not look so good if we scratch it actually because the container changes between portrait and landscape and of course one of the biggest issues we have as mobile developers there are many many screen sizes it doesn't matter if it's iOS the problem is less severe there or Android when we have tons of screens actually we have many screens the asset size between small phone and tablet is very different do we need to create and pull an asset for each use case for each screen size what about device pixel Ratio or DPR for short do we download for each DPR a new asset those questions are questions that needs to be asked how do we optimize the media for those use case cases and if the assets are not optimized in terms of file such as we just said this means that we're pulling more bytes from the internet which means that the device modem Works more which means that we are draining the battery moreover if the user is not on Wi-Fi it might charge him extra costs we surely want to use some kind of cache mechanism where we keep the assets we already got locally we don't want to pull the same asset over and over again if the asset weighed a lot in terms of megabytes that means that the app is getting oversized and might be might actually get deleted because it captures too much space on the device rendering big assets requires memory there is so much memory that the device has and if you try to render a lot of assets at once with the big size we might turn into memory issues while some devices have more memory and might handle this scenario others might crash due to this issue and might run out of memory and since we're pulling assets remotely from the internet we are dependent on how far are we from the server physically the closer we are to the server the faster we will get the asset and vice versa if you look at this picture the guy at Australia it will take him much longer to get the asset from our endpoint which based in Europe So Physical distance does matter so we talked about the issue we showed that loading many assets without optimization can cause delays in loading pave speed it can cause performance issues or even crashes but why all that is important does loading speed of a landing page or any page in the app is really that important does it make a difference if we make our app more optimized and run faster the answer to that is definitely yes a hundred milliseconds delay in page load can result in seven percent reduction in conversion when I say conversion I mean that a user took something from your e-commerce for example and put it into his card all we actually managed to get a visitor to become a paying user or a subscribed user take this number multiply it by 10. and what you get is one second delay in page load can result in 70. percent reduction in conversion this is according to a study by Akamai and also a one second delay can cost 20 drop in traffic it can also lead to 11 decrease in page views and lastly it can lead to a 16 decrease in customer satisfaction now I'm here today to talk to you about improving your media optimization and improving your app overall performance we are not talking about tens of seconds of improvements we are talking small numbers even milliseconds can be meaningful those three slides that I just showed are by a Google study so now that we stated the problem and why it's important to us to optimize our media I want to show you how we can achieve this the first thing we need to do is improve our loading speed we want our page to load faster in an optimized way and this will improve the experience of the entire amp to do that we can start with the following reduce the asset size by resizing it reduce the weight and the height we don't need 4K images when presenting image feed on thumbnails we can also reduce the quality if we don't show the image in full size we can compress it and decrease the quality but still get a good looking image and lastly we need the right format for each platform iOS for example from our iOS 11 and above started supporting geek by Hardware this means that hik or agic is the optimal format it will weigh less and it will be rendered much faster for Android is a bit more complicated in 4.2.1 they started supporting webp but recently Android 12 and 13 started supporting Aviv which is an amazing format and it should be used if you can because it's way less and it's compressed better it looks better and it weighed less all those things that I just mentioned decreasing dimensions format and quality compression will lead to a lighter asset and then it would be easier for the device to load it and for app to get a much better performance so let's take the scenario we downloaded an image now from the internet we presented it to the user he decides to move to another screen or send the app to the background and open it again do we download the image all over again of course not we will use some kind of cache mechanism so once we download an asset it's saved on our device and we can load it locally next time we need to show it to the user but since we're keeping this asset on the device we want it to be optimized so it doesn't captures a lot of space on the user's device we want it to be optimized and the way and be a light asset responsible so we want to be able to get the same asset in different size for different orientations for example all different containers we might show the same asset but in different containers we want the same asset in the most optimized way small in size for better bandwidth usage device storage and device performance content delivery Network all CDN for shorts is an extremely important mechanism this means that there is a grid of servers all around the world that we cache our deliver assets on them once we get them for the first time this means that the second users that asks for the same assets it will be delivered to him much faster since the distance between the users and the specific CDN server is shorter than the main endpoint we can see in the screenshot that unlike the previous one we have all those cdns spread around the world and the distance between the users and those CDN servers is much shorter which means that the users will get the assets much faster some of us might have a website which presents the same assets as our mobile application but desktop design is very different from application the size of the assets May Verizon depends on the platform we need the same image but in different size keeping multiple instances with different sizes for the same asset is a good solution it would be even better if the if each device would know exactly what asset in what size to pull so now that we've seen what the challenge we're facing we talked about the implications of what could happen if we're not optimizing and we show the solution let's get a bit practical and see some code and how we can achieve a better performance so what I did is I built a small demo app this demo app uses a library that's called cloudinery that me and my team built it connects directly with your Cloud at cloudinery and allows you to do multiple Transformations on an image now what do I mean by Transformations I want to show you first I built an array of images you can see that each image is presented twice tiger lion rabbit dogs and so on and so on one image is purely a URL the other one has a transformation to it these Transformations is modifications that we make on an image to create the optimizations we just talked about let's run the the app for the first time and then start implementing some Transformations and show how we can improve the optimization of the image so I'm quickly going to run this application okay and what we're going to see is an image feed we can see that on the left side we have the original image and you can see that the gray text below it says the size of that image on the right size we have the modified image nothing will happen to it yet and now we're going to start implementing some transformations to it the first thing I want to do is I want to add quality I want to ask my tool to give me automatic quality and show me exactly how we can compress the image for me with that I'm going to add a format as well in this case I'm going to use AV why Aviv because I'm using Android the API 33 which means this is Android API level 13. I am allowed to use a so let's run this and see what happens to the image as we can see we already got some better weight if the original tiger weighted over 280 kilobytes we already managed only by quality compression and format to down it to 170. the next thing we're going to do is we're going to resize the image this image is big I don't need it that big I have a small container I want to present it as a template so the next thing I'm going to do is I'm going to resize it I'm gonna one second I'm gonna call resize and I'm going to resize it I'm going to create it into a thumbnail and I'm going to give it a width of 500. you can see that I didn't specify a height this means that I'm telling you the tool look I'm only giving you the weight at the wheat sorry you are in charge now of making it in the same aspect ratio as the image is which means I'm not specifying the height you will calculate it yourself let's run this and see what happens so just by changing the width and getting much less pixels I've managed to down the size of the image to a tent of what it was if the title started as a 280 I'm already at 29 kilobytes if the line started at 722 I am down to 26 kilobytes so I'm already optimizing I reduced the dimensions as we talked I compressed the quality I use the right format and the last thing that I want to do is I want to use the DPL I want to give the device picture ratio as it should be so I'm asking my tool to give me the DPR automatically and as you can see this is done automatically on all images because I'm using the same transformation object on all the the Dual or the second images so image number two the Tiger image Number Four The Lion and so on and so on this transformation is working on all of them and is doing the same thing it's optimizing them according to what we just said Dimensions format quality compression and device picture Ratio or DPR for shorts so I just showed you how we can optimize an image feed and if we if we can reduce the size of the image we can we can compress quality we can show format the next thing I want to show you is that this tool that we build is more than just optimizing image we can also enhance images and give it some extra things so what I'm going to do is I'm going to select a single image and I want to show you what else we can do about it so I'm going to move to the next screen the Press the first thing I want to show you is when we built this Library we wanted to make it easier for you so we built a widget called CLD image widget and all you need to give it is the name of the image it's called the public ID and the transformation we just saw how we build Transformations and you can build those Transformations and it will Implement them directly on the widget so right now we're not doing anything but let's say I don't like this image being I want to cut the line I want the square of 800 on 800. so what I'm going to do is I'm going to ask for a resize crop I'm going to give it a width and a height this time because I want a full square and I want it to be 800 and 800 let's see what happens very nice so I got a square as I wanted of the Lion but it's not so good actually because the face of the line are getting cut I actually lost one year it doesn't look that good I would expect if I wanted an image like this the face of the line to be in the center how can I achieve that so what I'm going to do next next is I'm going to ask my tool for Gravity Auto which means I'm asking it to detect the object the main object in the photograph or the image automatically so setting this up would give me this result much better now since the face of the lion are in the center and I'm quite happy about it the next thing I want to do I want to make it into an avatar I want to make it a full circle this used to be hard back in the days with old apps it became much easier to do now but it's even easier to do it with this tool all I need to do is I'm calling ground corners and since I don't know the height of the of the container since the the the container might change between different screen sizes I'm going to give it round Corner's Max I'm telling it look you do the calculations I'm not going to do them for you please give me a full circle and when I save this I get a perfect circle there are also many other things that you can do such as effect so if I call this safia effect this will give the image a more vintage look so we lost some colors and we got some more vintage look and let's say I don't like that one and I want to use another artistic filter called upusai so that will give my lion a more pinkish way and there are other enhancement that you can put on the image one of them is called the just improved this will improve the image colors and sharpness so when I save this we get this now those are just few of the enhancements and optimization you can download an image I encourage you to visit our documentation where you can see there are dozens and dozens of Transformations that you can perform on a single image there are two more things I want to show you in this live coding when we go back we can see that the image does not are not being pulled from the internet again this is due to a cache mechanism that we implemented and that's why we need optimized image because we don't want to save almost one megabyte image since it's so small we want the optimized version of it which weights 26 gigabytes one more thing I want to add in this entire session we talked about assets resources and mainly images but that's not the only case assets or visuals can also be video and this is really important since this Library supports video as well which means that all of the things that you've seen quality compression format Dimension changing optimizations and many other things that are related to videos such as intro Auto subtitles and many other things can be implemented using this Library so it doesn't work only on images it will work on videos as well so that that was it for the coding part and we've just seen practical tools of how to achieve better application performance next I want to show you a real life example just it is a food delivery company who mainly works at the UK and Australia to an app and a website you can order food on let me know if you've heard of it we use it here at Israel as well but that's what the app looks like to improve their user experience just it optimize their assets using the library I've just shown you which cut the page loading speed in the following screenshots from the app you can see image feed where you can scroll between different restaurants you can see that the screen holds multiple assets those assets use the techniques that we have just seen that they mentioned changing the format optimization the DPR and the quality compassion to achieve better performance the menu screens offer different size of images more thumbnails type we can see the round corners and even a border around them this is all done through the tool by optimizing the menu assets just it increased the menu usage loading time and Page views on the left we have a specific dish menu where we can see the same asset from the menu screen we just saw as a thumbnail but in bigger size without losing quality on the right screenshot we can see that the same dish presented in just its website same asset different size everything is optimized in terms of Dimensions format and quality so what I just showed you is the tool we created at cloudinery and it can help your application improve the delivery time by up to 60 percent and the data usage by up to 80 percent then I really have just shown you through the live coding is written in flutter what you've just seen in data and flutter but it also written in more than 15 other languages and Frameworks so a little wrap up we talked about why even develop mobile does it matter and what is the solution I gave you some practical tools through the live coding I showed you on how to optimize your media and with that your entire application performance the important thing to remember that media optimization done right can improve your applications conversion rate traffic and customer satisfaction I want to thank you for attending and listening and I hope you learned something and have some practical tools to take with you after this session if there are any questions I'll be taking them through the chat now back to you Alan hi I'm back that was awesome this presentation this package this Library uh I didn't know and I'm very impressive this how completely it is and does our functional very good and thank you so we have some questions here so we let's start there's a question uh so big and we will divide it in two main searches that is uh how do you save local photo when you download when the first time from back end and the future you don't want to download them and the continuation and cash notes work image only stock data the app is running after Library lose the day so first of all I did it back but when I had an interview actually I was interviewing for a company and I built my own cache mechanism it's not that hard actually and if you want to save assets locally you can easily do that by setting them on the mem on the on the disk itself but this is something that we don't usually do because as I said in the presentation assets tend to change from time to time if the asset is epic and never changes we usually hold it on the app itself we don't do it with many assets but we usually hold it on the app itself if the asset is coming remotely that means that we don't need to keep it for a long time we keep it for one session that's usually why we're keeping it only for one session and then we're losing it that's exactly the second part of the question the package that was shown there is a great package for caching and it does it only for one session because it understands the need we don't need to keep these assets forever we need to keep them for a certain session once the app is closed we probably need to pull the assets again think of applications that you know such as Tick Tock Instagram Facebook when you load the app you get a certain feed if you close the app and load it again you get a completely different field there's no point in Saving what you just saw from the previous I hope this answers the question great great so the next one is about the format uh the image format has the same quality than jpa jpeg okay so everything is relatively new JPEG and jpg were back from when I was studying at the University actually and uh even before that an Avic is relatively new it's compressed better than jpeg which means that it will weigh less and the quality according to what I've seen and checked I'm not going to say it like that in general was much better but again there are things to think of here this is really dependent on the image some images in let's say webp for example might look worse than in jpeg and same goes for Aviv some images that might not be compressed correctly might wet more than JPEG but in overall avif is a better format in terms of weight and in terms of quality great so the next one I is it bad to keep flowers images with normal images that if you consider images from the database depends how you save them and if you optimize them before I use some of the apps that I've built using databases as well to keep the images we're keeping some kind of record on on things or users or whatever keeping the images locally because we need them for a second run or whatever reason it is and as long as you optimize your assets before saving them to the database it doesn't matter you can keep them on a database that'd be great but make sure that they are optimized so for example if we go back to the live coding and we take the lion example you wouldn't want to save the raw lion the way it comes from the internet in 722 kilobyte that's huge that's a huge image and you don't need it well maybe you do and if you do keep it that way but usually when we're presenting in Mobile we present images in a smaller way so we want to reduce the dimensions we want to better and of course we want an optimal format and compressed quality in a way that the image doesn't get Earth it still looks good so if you keep it that way after you optimize the image on a database it would be great and yes I've been using cache Network image as well as part of my widget we are caching using that I'm not going to build the whole new cache system again uh I have a question but I will ask file at the end so the next next question is transformation API in a public package it's called cloudinary flutter or cloudinary dot if you don't want to use our widgets and of course it's public as I said it's also posted in more than 15 other languages including Android Java iOS Swift a view react angular and many other backends such as the php.net OB and more I encourage you to go to the cloud in a repository if it's not posted I will post a link and it's public go to Cloud9 slash documentation and you can find all the information that you can about Transformations and which optimization you can run and there are many other things that I didn't show like add-ons that can transcript videos and get you a full subtitles if you need them that can make you an intro of an outro overlays Watermark many other things it's public and you can use it and feel free to go and see for yourself what are the capabilities of this tool description so the next one I can use summarize I saw probably the two packages of optimizing our image basic basic try to show in this presentation that it's a DIY you can do it yourself you don't need any but I've shown you out of me coming from cloudinary is the tool that we build to make those optimization much easier um you could easily do the resizing of images compression and other things like a DPR through the device itself it has its own tools in iOS for example we can use the image kit and then perform all kinds of optimizations before we even upload it by the way this is something that we also offer as part of our library you can make complete processing changes to the image before uploading it to the cloud so it will weigh less even when you get it on the cloud but I don't think the certain tools or packages that I would put together my library the one that I showed you is amazing to do those things but everything that I've done you can basically do yourself it's not that hard it just requires some code and understanding of images converted so the next one is it possible to use this lever without storing images including area code yes we also have an option to fetch URLs you will have to register because otherwise you cannot use the library but if you don't want to store the images on the cloud in a cloud you can use a fetch method which means that for each URL you're giving a full URL we will handle it for you we will get that image we will do all the Transformations and optimizations and enhancement that you would like you won't have to use a public idea on the cloud nearest Cloud you just have to use the fetch method so great so the second one is more the suggestion and this is a good example one fashion image and suggestion on optimization while we are selecting holding and uploading images this is the first store actually I just mentioned it yes uh of course if we upload an asset and we know how we're going to use that asset next I mean if I'm uploading that line to the to the cloud and I'm going to use that line next and I know I'm going to use it as a timeline there's no point in uploading it in 4k part of our library is a pre-processing module where we can ask to pre-process and do things before we even upload it to the cloud which means that I can take this lion image for example I can reduce its size I can change its format I can compress its quality and instead of uploading a one megabyte image I would I would do all those optimizations that we just talked about and upload 100 kilobyte image it would take much less think about dating apps where users upload their profile images and we do have those use cases you want to give the user the ability to upload a profile image but a good one I mean I mean an optimized one in terms of size in terms of quality in terms of DPR everything that we just showed so we don't want it to upload the 4K and then charge your next of course and we know that Upstream is usually really slow compared to Downstream we want to give those optimization even before we upload and this is a great question yes we definitely need to make optimization before we upload all those things that I said about getting images can relate to when you are floating in images and again our library gives the ability to pre-process those images and then upload them to the cloud correct so there's so many other questions but uh by the time I will take some so that's next one so what about Vector images and for the SVG pictures has a lot of loading time and that's it that's a great question but since we are not the one I I'm not the one developing flutter I wish I would be part of the team but I'm not I can't take care of how SVG picture works on flutter and I think it's more device specific actually I know that it's not optimized yet I know that the widget doesn't work very well yet I've been playing it myself by the way at the library that I've just showed you we're also supporting SVG format completely if you want to use that um but we can't control how the widget or how the device or how the framework actually renders those as which is in white takes long time this is not part of what we do unfortunately listen so the next one so uh how to best atomize uh before sending image in support save multiple language just in case all right so we're talking about keeping an asset with multiple variations there is something at our library called versioning so we can keep the same asset but with different versions or with different sizes or with different formats even and then we can deliver it specifically to what we need because Android and iOS for example does not work with the same format as I mentioned in the session earlier iOS would work with hik where Android depends on the version but let's say we have 12 plus would work with Aviv and we need to keep you know the same image but in two different states this is something that the tool takes care of for us and actually caches those images on a CDN which means that if we have Android and iOS users and the one who's the other one puts a different the CDL will keep cash for both so the next user with Android or iOS that will ask for those same images would get them much faster because we're keeping versions of the same assets so uh uh I think there is so uh two more answers a question about adrenalizing and also the last one for the timing play finish yeah I'm taking it so I guess we don't have much time left so give format give format is something that we've been working on it's fully supported by the library you can try it format if it's supported uh but how to optimize it that is a great question gift already comes in a bad quality because it's good it's becoming a really bad quality so I wouldn't try to optimize it even more than I can again it depends on the container I'm going to present in team and then I can choose the dimensions uh and choose the quality which doesn't change much but because again if is in bad quality um there are also other formats that I would use when talking about animations there is a a webp which is animated webp I know that animated AV is not supported in Android yet so I wouldn't try that I know the third libraries that use that format but there's an official support there's no official support in aav Fiat which is having a baby but again optimizing GIF there's not much to do there besides the fact that we can reduce their width and height depends on our container so if we have a big gift and we want to put it into a small container I would resize it and make sure that I'm giving the right size so to give doesn't take much space so great so uh thank you for all this content and uh the the content delivery shared how it is and thanks so much for your time too thank you very much thank you I had a blast bye

Channel: Cloudinary

Views: 2,266

Keywords: flutter image, flutter image performance, flutter performance, flutter performance optimization, flutter performance tips, flutter image cropper, flutter image compress, optimize images flutter, flutter optimize, optimize flutter app performance, cloudinary flutter, flutter cloudinary

Id: 8_Uiz76V6sA

Length: 38min 10sec (2290 seconds)

Published: Mon Feb 27 2023