Editing, Resizing, and Cropping Images

There are a few considerations to take into account when you upload an image to your website to make sure you are getting the best performance out of your image.

Do name your images something meaningful

Don’t upload images above 8MB

Don’t upload images less than 1200px for hero images as they will come out grainy.

>> Follow the steps on how to upload images over on this tutorial <<

Resizing Images

To make sizing quick and easy, Carrot utilizes a scaling and resizing tool that you can see immediately after uploading an image. The best thing to use is the Thumbnail, Medium, or Large size options located in the drop-down portion of the image. The resize will automatically display the image on the screen as that scaled size and you still have the original file in your media folder that can be used elsewhere and adjusted per page.

The GIF below will show you how a large image can be adjusted on the page to a preferred size. Notice how height and width are automatically changed to scale and keep the image’s resolution intact.

If you are going to use an image that takes up at least half of your screen, please use a Large image. If your image is less than half of the page, please use a Medium or a Thumbnail size image.

When the scaling takes place, the image resizes to a maximum pixel listed below. The maximum will depend on if the image width is the maximum—an image that’s wider horizontally, or if the height is the maximum—an image that’s taller vertically.

Thumbnail Image

always squared at 150×150 px

Medium Image

Max height or width is 300 px

Large Image

Max height or width is 1024 px

Full-size Image

Use for hero and cover block images only

Cropping Images

Find the image in the “Media” tab, select it, and click “Edit.”Click Edit to open the edit tools. Click a spot on the image, hold the mouse down, and drag a box around the image to crop the extra space around the image.  Adjust your crop using the outside edges by clicking the boxes and dragging the frame where you’d like to crop. The cropping tool will now be available. Click the tool to crop the image and then click the orange “save” button to save your edit.

You can also rotate, or invert your images in that same screen. Click the options and then the save button when you have the image the way you want it to be.