Un-optimized images are killing the performance of your app. Here is what you can do...

Published 2 years ago

notJust.dev Newsletter 🚀

Stay up-to-date with the latest technologies and become a better developer

Un-optimized images are one of the WORST performance killers of your app 😵‍💫

This profile page displays a lot of user-generated images. I ran 2 tests. Firstly, I rendered the original images uploaded by the user, which are anywhere from 1 MB up to 20 MB. And in the second test, I optimized and resized the images. The difference is Huge.

As you can see, to simply render this screen with user-generated images, it took 15s and it downloaded 88MB of data. This is also thanks to a stable internet connection. Having a slower internet, this number turns into a minute of wait time to render a screen.

That’s unacceptable, and with such a user experience, it will be tough to retain users.

Optimizing the images to the right sizes, depending on the size they are displayed on the screen, can save a ton of bandwidth and have your app load images faster. For example, the 30x30 user avatar displayed in the list of followers doesn’t have to be a Full HD image.

In this email, I want to introduce you to the solution I used in the example above to optimize images on the fly using a Serverless solution on AWS.

Brace yourself. This is a bit longer and more advanced email, but I believe will help a lot of you who are building mobile apps that have user-generated images.

Using un-optimized images

I also want you to visualize how bad this impacts the actual user experience. Here you can see how long the images load, and on the left, you can see how large are the images being downloaded.

Optimized images

And here you can see just how much of a difference it is when the images are optimized. They load almost instantly. Also have a look that now, all images are around 20kb.

The Serverless Image Handler

The Serverless Image Handler is a pre-made AWS Stack that can be launched inside our AWS Account with a click of a button and some minimal configuration.

This solution is helping us dynamically optimize and resize images in the cloud using the open-source library Sharp inside a Lambda function. Our images are then cached and served from a global CDN, which speeds up the load time and also caches the images not to process them multiple times.

This will work for any project that stores user-generated images inside an AWS S3 bucket. When it comes to the client side, the solution can be used anywhere. In this live stream, I show an example of how to integrate it inside a React Native app.

The best part about it - you can launch and configure this solution for your application in under 30 minutes.

For more details about the implementation side, I recommend you watch the live stream, which is only one hour long.

In this email, I want to show you from a high-level perspective how you can integrate it into your project.

Step 1: Deploy the solution

Open the Serverless Image Handler solution, and press Launch in the AWS Console.

In the next configuration screens, you can leave everything as default, and only change the Source Buckets field with the name of your S3 Bucket.

And while you grab a cup of coffee or approximately 4 minutes, the solution should be ready.

Go to the Outputs Tab, and open the DemoUrl. That’s a simple user interface to test the image handler before we integrate it into our app.

In the Demo UI, go ahead and type the bucket name, and the key of one image you want to resize. You can find it inside the S3 dashboard.

After you import the image, you can resize it in the Editor section and if you press Preview, you should see the resized image on the right.

You can play around with different configurations and see how they work.

Also, pay attention that the configuration is all added to the Request Body object. That’s an important detail on how we can programmatically send requests to optimized images from our application. The configuration object is Base64 encoded and added the Encoded URL.

The Encoded URL is a publicly accessible URL that serves the optimized image. You can open it in the browser.

Integrate the Image Handler in React Native

As we saw in the previous step, at the core of requesting optimized images from our newly deployed Image Handler is the Request body. That’s the first step.

1. Define the image Request object and transform it into a string

2. Base64 encode the image request

3. Create the URL, by concatenating the ApiEndpoint + Encoded Request and render the image

That’s all it takes to render optimized images in React Native.

Advance features

The deployed solution also has a Smart Crop feature that can zoom in on faces when resizing the image. This is powerful for displaying user avatars.

Another powerful feature is the AI-based Content Moderation. With a simple parameter in our request body, we can have an automatic system for detecting images you don’t want in the application. The image will simply be blurred.

Both Smart Cropping and Content Moderation features are powered by Amazon Rekognition and come with additional charges.

Architecture

Deploying and using this solution doesn’t require a lot of AWS Expertise, but it won’t hurt to know what is powering it behind the scenes.

At the core, we have a Lambda function, which is reading images from an S3 bucket and then processes them using Sharp.

The images are then cached and stored inside the Amazon CloudFront, which is a global CDN. This way, our images are cached close to our end users, and the Lambda is being invoked only once to process an image with a set of configurations.

Pricing

Speaking about the pricing, this solution is quite affordable. For an app, that generates 100,000 images every single month, it will cost around 15$ per month.

Most of the services used in this stack are also covered by the Free Tier, so for most of you, it will be completely free.

Note: The above table doesn’t include the Amazon Rekognition pricing. If you use those features, it will cost you around $1 per 1000 analyzed images.

That's all it takes

To load optimized images and to make sure your app loads fast and offers a great user experience.

If you plan to integrate it into your app, watch the live stream and follow along.

Hit Reply and let me know if you found this deep dive valuable. 🙏

🔴 Join me live

This Friday we will build a GraphQL Backend for the LinkedIn Clone using StepZen and PostgreSQL. It's going to be a tutorial packed with value, so set a reminder and don't miss it out 👇