DEV Community

Cover image for Social Resizer: Generate Perfectly-Sized Images for Every Social Platform
Jeeva Ramanathan
Jeeva Ramanathan

Posted on

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

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. Image description
  • 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).

Image description

  • 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. Image description Enhance your image and download it. ๐ŸŽจโœจ You're all set for your post! Image description Enhanced cover photo Image description

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;
}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (2)

Collapse
 
philiphow profile image
Philip How

This is really useful! Great job!

Collapse
 
jeevaramanathan profile image
Jeeva Ramanathan

Glad to know that! Thank you @philiphow