Quick Introduction ✍🏻

Featherify is an image substitute generator for you apps. It can generate lightweight image substitute for your images during build time or you can manually generate them via the webapp.

It generates substitutes for your high-quality images. It will help you to prevent compressing of your images and losing their quality by acting as a substitute for while your image loads.

The Problem

The images take long time to load.

Try pasting this url as image - https://featherify-demos.s3.us-east-2.amazonaws.com/mountains.jpg - in your app. Doesn't it take a long time to load?

Scenario 1

As you see in the above demonstration, the images take a long time to load. The user scrolls to bottom of the page to find content (skipping those images). This results in bad user experience as the user skips many images which you wanted to show. If you have many users visiting your platform daily, you probably would not want this to happen.

Scenario 2

You have compressed and optimized images in your app, but the CDN you are using is free or bad. Also, you are not sure if the end-user would be having good internet connectivity. Again, those images will be blank and you would be letting a bad user experience.

The Solution

What if you could use a substitute for your image while it has not loaded? What if this substitute could be extremely small in size?

The solution would be to use a resized, blurred, and small-sized consisting not more than 200 pixels (or lesser if you want) of the original image. This image would resemble the actual image very closely which would gain the user's attention and let the user know that there is high-quality image that you would want to look into.

Introducing Featherify ⚡

Featherify is a fast, highly customizable, and dynamic image-substitute generator.

Featherify offers two interfaces to let you generate feathers (image substitutes).

• The WebApp which offers a playground to generate images in the application itself. (Hosted on AWS Amplify)

• The API which is being implemented by the WebApp. This would be useful if you want to generate images during build time. (Hosted on AWS Lamda)

I have the written the documentation for this API in this blog post.

Featherify generates CSS Styles or a Base64 encoded image which could easily put in your code. Check out the demo page for a full demonstration.

I will be explaining in detail how Featherify works in a later blog post.

Tech Stack 💻

The Client Side is hosted on AWS Amplify.

• NextJS
• ChakraUI
• Axios and Restler
• Written in Typescript

The Server Side API is hosted on AWS Lamda.

• Pillow
• Django
• Django Rest Framework
• Written in Python

I wanted to use the Amplify's API for the server side but I wanted to expose the API so that we all could use it and automate the process. Also, since I used Django, I did not want to rewrite the code again as a function because it would make the code-structure bad.

Further Enhancements 😎

Featherify was built within in a week!

I wanted to start earlier but since there were lab examinations in my college, I had this week only to build it.

I will work further to extend Featherify to:

• GIF Images
• Building a NextJS plugin (so that it is easier for you to use)

Conclusion 💖

The Source Code is in this GitHub Repository which can be found here - https://github.com/aditya-mitra/featherify

The AWS Amplify Hosted App Can be found here -

Please checkout the documentation blog post if you want to generate image substitutes using the API itself.

Lastly, I want to thank Hashnode and AWS Amplify for conducting this hackathon. I would have never even started working on Featherify without this hackathon.

✌🏻