Resizing and Cropping Images
Andrew Cafourek avatar
Written by Andrew Cafourek
Updated over a week ago

Pictures come in all shapes and sizes and can sometimes be too large or small for where you need the image. Your site is designed to look good on the majority of computer/mobile screens so many of the picture frames that you see on the site are a set number of pixels wide by a set number in height.

For example, on your Homepage you'll see that you have a large image slider where featured Events and featured News Updates can appear. That is a picture frame for the image you designate as a Featured Image when creating or editing the News Update or Event. The optimal image size is 590 pixels wide by 400 pixels high. If you upload an image that is too wide or too tall, the site will automatically crop it (and you may not like the results). If you upload an image that is not wide enough or not tall enough, it will appear blurry or stretched.

Take for example this picture here of a one of my personal favorite sports moments:

The image you see here is 180 pixels wide by 179 pixels tall. See how much space it takes up? Not that much. If you were to have selected this as a featured image the featured image frame on the homepage would automatically stretch it to fill the 590 pixels wide by 400 pixels tall frame, and it would look like this:

See the problem? Good photo, good memory...gone bad. The problem is that it was not properly sized to be a Featured Image, so the end result is an image that looks stretched and distorted.

Step 1 - Choose an Appropriate Photo

The first thing you need to do is make sure that your image is large enough to fit in the frame without needing to be stretched (590 x 400). Make sure you're also choosing the right orientation (landscape vs. portrait).

Step 2: Crop and Resize

The easiest way to crop or resize an image is to use Cropp.me. Cropp will automatically attempt to find the focal point of the image, so all you will need to do is upload the image - enter in 590 for the custom width and 400 for the custom height, click the Cropp Your Images button and then download the image to your computer and upload it to your site.

Did this answer your question?