Social Resizer: Generate Perfectly-Sized Images for Every Social Platform

#netlifychallenge #devchallenge #webdev #javascript

This is a submission for the Netlify Dynamic Site Challenge: Visual Feast.

Application Link: https://social-resizer.netlify.app/

What I Built

I built a dynamic image resizer that caters to every major social media platform. The application allows users to upload images, apply custom resizing, and even adjust image colors. The highlight of this application is its ability to automatically resize images to fit the ideal dimensions for various social media platforms using netlify image CDN, ensuring your posts always look their best.

Demo

Experience the Social Resizer application here and begin resizing your images effortlessly.

Explore the Features:

Upload Your Images : Start by effortlessly dragging or uploading your images to our platform.
Customize Resizing Options & Color Tone: Adjust your image dimensions with precision to meet your specific needs. Enhance your images with a variety of color filters to match your brand or mood. Color filters are done using CSS (ImageCDN doesn't support color filters by now).

Optimized for All Platforms: Choose the social media platform that meets your requirements, edit and enhance your image by resizing and applying color tones, then effortlessly download the optimized image for easy sharing. Enhance your image and download it. 🎨✨ You're all set for your post! Enhanced cover photo

Platform Primitives

This application leverages the power of Netlify's Image CDN. When a user uploads an image, it is stored in imagekit and processed using Image CDN. Users can then select their preferred social media platform and post type, prompting the application to generate a URL with the necessary parameters for the Netlify Image CDN to resize the image. This process happens dynamically, ensuring that the image is always perfectly sized for the chosen platform and post type. By utilizing Netlify's Image CDN, the application ensures optimal performance and efficient delivery of images, tailored to various platform sizes.

Code snippet that generates url leveraging Netlify Image CDN

const generateImageUrl = () => {
  let url = `/.netlify/images?url=${imageUrl}`;

  url += `&fit=${fit}`;
  url += `&w=${imageSize.width}`;
  url += `&h=${imageSize.height}`;
  url += `&q=${quality}`;
  url += `&position=${position}`;
  url += `&fm=${format}`;

 return url;
}

Challenges faced

During the initial development of the application, handling images directly and converting them to base64 format resulted in inefficiencies due to the large size of high-resolution images. This approach led to performance issues and slow load times.
I planned to use ImageKit for storing and managing the images uploaded by users. However, I encountered several issues with this approach, particularly with server-side operations.

To overcome these challenges, I switched to using Netlify Functions for handling image uploads and storage. This significantly improved the application's performance, resulting in faster load times and a smoother user experience. The switch also simplified server-side operations, making the development process more efficient and allowing a focus on improving the application's core functionality.

Reference for Social Media Sizes - https://blog.hootsuite.com/social-media-image-sizes-guide/

Thanks for reading. Feel free to comment your opinion😊. You can hit me up on Linked In | Github | Twitter
Few other posts to check here.