Social Resizer: Generate Perfectly-Sized Images for Every Social Platform
Tags: netlifychallenge, devchallenge, webdev, javascript
Published: 2024-05-12 18:23:52

*This is a submission for the [Netlify Dynamic Site Challenge](https://dev.to/challenges/netlify): Visual Feast.*

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

## What I Built
<!-- Share an overview about your project. -->
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](https://social-resizer.netlify.app/) application here and begin resizing your images effortlessly.

####Explore the Features: 

- <u>Upload Your Images</u>
: Start by effortlessly dragging or uploading your images to our platform.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tts5b6pjnoywz0qglky5.png)
- <u>Customize Resizing Options & Color Tone</u>: 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/om6rwtrzxtaru6pmgpl0.png)
-  <u>Optimized for All Platforms</u>: 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7xrkpgs7trmnquq92pxz.png)
Enhance your image and download it. 🎨✨ You're all set for your post!
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yk5wwsskon5kgxwauqjs.png)
Enhanced cover photo
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l27u61zkg5v524ts917j.png)

## Platform Primitives
<!-- Tell us how you leveraged the Netlify Image CDN. -->

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`
```js
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;
}
```
<!-- Did you implement additional platform primitives like Netlify Blobs or Cache Control? Tell us about that too! You may qualify for more than one prompt. -->

<!-- Team Submissions: Please pick one member to publish the submission and credit teammates by listing their DEV usernames directly in the body of the post. -->


### 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/ 
<!-- Don't forget to add a cover image (if you want). -->
<hr/>
> Thanks for reading. Feel free to comment your opinion😊. You can hit me up on [**Linked In**](https://www.linkedin.com/in/jeevaramanathan) | [**Github**](https://github.com/jeevaramanathan/) | [**Twitter**](https://twitter.com/jeevaramanathan)
Few other posts to check here.

- [Decoding Why 0.6 + 0.3 = 0.8999999999999999 in JS and How to Solve?](https://dev.to/jeevaramanathan/decoding-why-06-03-08999999999999999-in-js-and-how-to-solve-640)
- [How to Hide the Source Code in React from Dev Tools [3 different ways]](https://dev.to/jeevaramanathan/hide-the-source-code-in-react-from-dev-tools-3-different-ways-5467)


<!-- Thanks for participating! -->