Featherify - The Image Substitute Generator

Introducing Featherify - The dynamic, highly customizable and super fast image substitute generator for your Images

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.

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

without.gif

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.

image.png

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

image.png

  • 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 šŸ’»

image.png

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.

āœŒšŸ»

Aditya Mitra's photo

In case you are wondering how to use Featherify during the build time, please checkout this github code. I have done this using NextJS using some of my Amazon S3 urls.

You could use it with any framework. Basically, you would need to:

  1. Send the images to the API.
  2. Wait for and handle the response from the API.
  3. Put them the response code for the each image. They will always be in the same order as sent in the request array.
Pritam Kumar's photo

Awesome Code Demonstration Aditya Mitra.

The Base64 method could also be used in any device during compilation.

Awesome Job!

Martin Smith's photo

Believe me - one of the nicest I have seen.

You should spread this on social media so that others can also use this.

Gamer Dev You are right. I too think even Hashnode should implement this. I am browsing this on a mobile device so the GIF on the top of blog took some time to load. They should have an indication like what Aditya Mitra demonstrated.

I will share this with my colleagues. Great job!

Once again! Well done.

Aditya Mitra's photo

Thanks Sir, I really appreciate that. šŸ¤©

Gamer Dev's photo

M@@@@G!!!!!!!!!!!!!C

Although I am not much of a Frontend Guy, I have to admit that this one is OUT OF THE BOX.

I will surely share this with my fellow web devs.

I wish even Hashnode implements this. I too sometimes skip images while reading the blog posts.

casiimir's photo

Cool Idea!!! Congratulation Aditya !! šŸ‘šŸ‘

Aditya Mitra's photo

Thanks a lot!

Mohith Gupta Korangi's photo

Great Job...and Congrats on winning the Hackathon. Would you mind letting me know the resources that you learned from? (like getting started with AWS, Nextjs, backend) Would really appreciate it if you do that....

Aditya Mitra's photo

Thank you a lot!

For NextJS:

For Django and Django Rest Framework

AWS

  • To be honest, I did not refer to a particular tutorial. I just searched for terms related to "AWS Amplify" and "AWS Lamda" and went to the through Blog Posts and YouTube Videos of the results.
Swarnava Das's photo

Great Choice! I never thought it could be done with Pillow itself. I would have straight gone for OpenCV for handling images šŸ˜.

Can you please tell me how you deployed Django in AWS Lamda? I had tried it once but could not complete it.

Show +1 replies
Aditya Mitra's photo

Can you please tell me how you deployed Django in AWS Lamda? I had tried it once but could not complete it.

Thanks for asking that question!

I used Zappa for deploying Django into AWS Lamda.

api-flow.png

(First, I thought I would rewrite the code in AWS Amplify as function itself. But doing so took time, I had to change those functions everytime I made changes in my Django project, and also it made the overall code structure look bad. But, AWS Amplify uses AWS Lamda as its functions, I thought why not deploy to AWS Lamda directly)

I referred to this video for setting up an automated deployment.

Swarnava Das's photo

Aditya Mitra Thank you!

I guess this will do it!

Arpit Patra's photo

Just how did you do that! šŸ¤Æ

I tried the webapp. The substituted image was so close to the original! How did it resemble so close to the original. That too in a css code.

I am learning NextJS and this one feature that I will surely use!

Aditya Mitra's photo

Please checkout the documenation blog post if you want to generate feathers (image substitutes) using the API itself.

The API is hosted here https://dtam87cvk4.execute-api.us-east-2.amazonaws.com/production/api/manipulate