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.
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 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?
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.
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.
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.
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.
- Axios and Restler
- Written in Typescript
The Server Side API is hosted on AWS Lamda.
- 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)
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.
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:
- Send the images to the API.
- Wait for and handle the response from the API.
- Put them the response code for the each image. They will always be in the same order as sent in the
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.
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....
Thank you a lot!
For Django and Django Rest Framework
- The Official Django Rest Framework Documentation (I prefer it more to the Django Documentaion)
- Udemy - The Complete Guide to Django REST Framework and Vue JS
- Udemy - Build a Backend REST API with Python & Django - Advanced
- 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.
Great Choice! I never thought it could be done with
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.
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.
(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.
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