If you are a content creator, the chances are you have come across stretched, shrank, non-centered or pixelated images after the posting of your material. Those are mostly caused due to uploading images with a low resolution or inappropriate aspect ratio. Visual material gets the most attention and is one of the main criteria that creates the professional impression about your work, therefore it is especially important to get right. Nothing can be worse than a well-written blog with a poorly formatted cover image, for example. During this month I came up with a solution, that allows you to forget about all the technical issues with resolutions and aspect ratios. In this article, we will review it. 💻 The project is live at: cropper.madza.dev 💾 The code is available at: GitHub repo This project was built specifically as an entry for the and hackathon. It was an awesome experience since the participation motivated me and I came up with a product that could hopefully benefit others as well. Hashnode Netlify How do resolutions and aspect ratios relate? 👀 I'm sure you already know the definition for both of them: Image resolution describes the image size as the number of pixels it contains. It is expressed by width versus height, such as "1920x1080". The aspect ratio of an image is the proportions of its width to its height, and is expressed with two numbers separated by a colon, such as "16:9". If the resolution is known, you can calculate the aspect ratio. Another way around, if the aspect ratio is known you can scale up the image up and down till it reaches a certain resolution. The headaches for content creators 🤯 The recommended resolution for uploads is often hidden. Sometimes the sites include a note below the upload button, but still, for the custom resolutions, we have to find the right aspect ratio first and then use 3rd party tools to scale it up or down. Some sites try to solve this by using the crop tools on the upload step, but even if they do, you might still end up getting a pixelated image after upload since only the correct aspect ratio is set and no information about the recommended resolution is provided. On top of all that, different sites might use different image processing techniques. If the uploaded image does not provide the required aspect ratio, it might get positioned to fit the width or height of the parent container. Manually using browser dev tools to inspect image resolutions, calculating their ratios, and using external tools like or to crop images would not be the most efficient way to go. GIMP Photoshop Creating dozens of resolution templates in would probably not be the best solution, also. Canva We should focus on content creation itself. Resolutions and aspect ratios should be the last things we worry about. That's why I created . CropScore How does CropScore work? ✨ calculates the score (since the name) of how well the real-time crop will fit for the target use. All you have to do is drag and see the magic. CropScore The app provides commonly used image presets from some of the most popular sites associated with content creation. Once the preset is selected, the correct aspect ratio is locked in, and the resolution can be further changed depending on the score. The CropScore component ⚛️ When the user drags the crop window, the gives the user a fit score, that describes the level of the match between the crop window and target use in the percentages. CropScore For example, if the recommended resolution to upload (provided by the target site) is 1600x840 and your current crop window size in the app is 800x420, then the crop score will be 50. Obviously, you are aiming for 100, although near values should work as well since sites mostly display the actual image in lower resolution. Recommended resolution is often set higher since it allows making layout changes that might require displaying images in higher resolution in the future. What about custom sizes?🗜️ With you are not limited to just predefined values for common image types. In fact, the sky is the limit once you need some customization options beyond that. CropScore In the Custom panel, the users are allowed to draw any crop window sizes they want. The crop window is flexible in both the X and Y-axis. Users are able to enter the specific resolution and aspect ratios. The input validation is provided, so if the user enters configurations that can't be performed on the image, the warning message will be shown. Users can also lock in specific resolutions and aspect ratios. This way the drag window will always preserve the width and height proportions the initial drag area had. Just type it in, lock it and then drag it to whatever resolution you want. In the custom mode, the App will calculate the CropScore based on the image width returning the following formats: SD (Standard Definition), HD (High Definition), FHD (Full High Definition), and UHD (Ultra High Definition), since there is no recommended resolution to compare against. Image manipulation 🕹️ Thanks to the UI below the canvas, the user has full control over both the image itself and the crop area that is created on top of it. The variety of action buttons provides the functionality to drag, move, zoom, rotate, transform and reset. All of those can be especially useful if a precise crop is required and it can not be performed on the image on the initial load. To preserve the maximum flexibility options for the users, the crop window is movable in both the preset and custom modes. The user is able to achieve centered crops thanks to the helper grid system. Downloading the Image 💾 Once you are done with making adjustments, it's time to download the image. You can choose between JPG and PNG formats. The final image name will have "-cropped" concatenated at the end of the original name, so you can easily know which image is processed via . CropScore Use on any device Need to get the image cropped on the fly? No problem! All the desktop functionality is fully available on both tablets and mobile as well: Features list 📋 Image upload - Supported formats .JPG and .PNG Presets - Currently there are 33 presets from 10 commonly used platforms Custom mode - User is allowed to switch to custom resolutions Ratio lock - User can lock any custom aspect ratio Input validation - Informative warning messages for invalid inputs Move tools - User can move the image around Zoom tools - Zoom the image in or out to get the precise crops Rotate tools - Rotate image clockwise or counter-clockwise by 45-degree increments Transform image - Swap image on X or Y axis Helper grid - Providing help for centering Resolution data - Updated in real-time as you resize the crop window Crop score - Real-time crop score of the fit for the target use Image preview - The user is allowed to preview the crop Reset - Reset image and crop windows as they were when the image was uploaded Download - Download the image in .PNG and .JPG Responsive - Use it on any device The tech stack I used 🛠️ - React application framework NextJS - For core cropper functionality React-cropper , - For the icons Flaticon React-icons - For the components Chakra UI - To host the code GitHub - To deploy the project Netlify , - For linting and code formatting ESLint prettier - For custom subdomain (configured on Netlify) Namecheap Who would benefit from CropScore? 👍 was designed keeping the content creators as the main target audience in mind. It should be especially useful for those who cross-post the content across different platforms. CropScore Though, thanks to its customization options, it can be efficiently used by others, too. Future plans to improve 🔮 Currently the supported platforms are , , , , , , , , and . In the future I might add other sites recommended by the users. Hashnode DEV Medium Hackernoon Twitter LinkedIn YouTube Pinterest Facebook Instagram My aim is to track the future layout changes of the sites, that might affect the use of image resolutions and aspect ratios, as well as add the newly introduced media types. Final notes 🙌 is an open-source project and the code is available on the .  The feature requests are welcome. The project is under the terms of . CropScore GitHub repository MIT license I'm glad I had a chance to create a utility that community can benefit from as well. Customization opinions for users are among their main priorities, and as a result, there are more different image types to upload. Hashnode Also, thanks to for this opportunity! Before this Hackathon, I had already hosted there and would recommend it for anyone looking for an easy to configure and effective solution for deploying their apps. Netlify multiple projects Building projects have always been my passion and it gives me pleasure to help and inspire people. If you have any questions, feel free to reach out! Connect me on , and ! Twitter LinkedIn GitHub Visit my for more projects like this! Portfolio Also Published Here

Adobe

Facebook

Instagram

Target

Twitter

YouTube

10 Best UI/UX Project Ideas to Improve Your Frontend Skills 🎨🧙‍♂️

8+ Portfolio and Resume Templates to To Showcase Your Skills 💼✨

Hire Me

Portfolio

Nominated for 2022 - HackerNoon Contributor of the Year - Music

Nominated for 2022 - HackerNoon Contributor of the Year - Html

Nominated for 2022 - HackerNoon Contributor of the Year - Job Hunting

Nominated for 2022 - HackerNoon Contributor of the Year - Css

Nominated for 2022 - HackerNoon Contributor of the Year - Product

Too Long; Didn't Read

Introducing CropScore: An Image Cropper for Content Creators ✂✨

Introducing CropScore: An Image Cropper for Content Creators ✂✨

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

10 Best UI/UX Project Ideas to Improve Your Frontend Skills 🎨🧙‍♂️

10 Reasons Why You Should Learn How To Develop Video Games

10 NoCode Tools to Help You Build Your MVP 🚀

10 Must Have Chrome Extensions for a Web Developer

10 Most Useful Code Editors Hotkeys

Top 10 JavaScript Charting Libraries for Every Data Visualization Need

10 Best UI/UX Project Ideas to Improve Your Frontend Skills 🎨🧙‍♂️

10 Reasons Why You Should Learn How To Develop Video Games

10 NoCode Tools to Help You Build Your MVP 🚀

10 Must Have Chrome Extensions for a Web Developer

10 Most Useful Code Editors Hotkeys

Top 10 JavaScript Charting Libraries for Every Data Visualization Need

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps