RatioBuddy: The Ultimate Tool for Perfect Aspect Ratios

Designers know the pain of trying to match images to ratios. This happens all the time when you’re building a WordPress theme and trying to figure out the best image sizes for thumbnails.

But, there are dozens of similar tasks for figuring out the proper aspect ratio of an image, video, or embedded element. Thankfully, RatioBuddy can help.

This small web app lets you calculate aspect ratios of anything dynamically from your browser. All you need is Internet access and the proper size you want (or the aspect ratio required).

RatioBuddy web app

To start, all you do is enter the current image aspect or the size you’re thinking of using. Let’s do an example for building a WordPress theme and choosing a featured image size.

Let’s say you want your featured image to measure 800px wide by 500px tall. Enter this into RatioBuddy and you’ll get an aspect ratio of 8:5.

What you can do now is lock the ratio by clicking the small padlock to the side. This means if you change either the width or height values then the other will update accordingly.

Now, you can start finding thumbnail sizes to match your primary feature image.

So, let’s say you want a thumbnail size of about half that width (400px), then another even smaller at 300px. You know how wide you want the images, but how tall should they be?

With the padlock enabled, you just change the width value and you’ll immediately see the results in the height value box.

RatioBuddy example resizing ratio

Pixel values update immediately and you’ll even get custom CSS code you can copy and paste if you want to create an element at this ratio.

You can also use this web app to auto-calculate the size of YouTube embeds to keep your video ratios even. Or, you can use it to generate ideas for image gallery thumbnails.

Really, for anything to do with aspect ratios, this tool is a lifesaver. So, be sure to bookmark it if you do a lot of photo work and resizing for the web.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail