How to Crop & Re-size Photos for Your Farm Website & Emails
If you’re working with Grapevine, we’ll be the ones to crop and re-size your photos when we build your website. This guide is especially for farms who are building their own website, as well as for our farm clients who might be managing photos for ongoing email marketing and website updates.
Getting your farm photos ready for use in your website and marketing emails is easy — just download the free software, then crop, scale, and export. Here’s our step-by-step guide!
(Related: Find out why you should be optimizing your farm photos!)
Free Software for Cropping & Resizing Farm Photos
GNU Image Manipulation Program (GIMP) is a powerful open source image editing tool that is comparable to Adobe Photoshop. Editing image files can be intimidating, but don’t worry. We will step you through the process and you will feel comfortable and confident in no time! GIMP is a free download, available for Mac, Windows, and Linux.
Once you’ve downloaded it and followed the prompts to install, you’re ready to go! (For purposes of this tutorial, these procedures are outlined as of the current (2.10.14 - October 2020) Mac OS version of GIMP. If you are using a PC, or different version of GIMP, there may be slight differences.)
Step 1: Open Your Photo in GIMP
Be sure that you are using the original photo. If the image was saved to the cloud from your phone or emailed from your phone, it may have been compressed and the image quality could be reduced. Transferring to your computer via USB will help ensure that you are working with the original unmodified image.
From Finder on Mac, or Windows Explorer, find your image file.
Right-click and choose Open With
Choose GIMP
Once selected, your image will appear in GIMP.
Click the tiny percentage drop-down on the bottom of the window to zoom your view in or out. (This only changes your view, not the actual size.)
Step 2: Crop Your Photo (change the aspect ratio)
This is where we change the proportions of your image (aspect ratio). Aspect ratio describes the relationship between the width and height of an image.
You’ll want to use this step if:
You’re changing a rectangular image to a square, or a skinny rectangle to a wider rectangle, etc. This process will help you change proportions without your photo getting distorted.
Or, you want to keep the aspect ratio the same, but you want to zoom in a little on an area of the photo.
If you don’t need to change the proportions of your photo, you can skip this step and go straight to Step 3.
First, select the cropping tool (upper left corner).
Next, decide whether you want square or rectangle. We recommend square photos for farm products on website platforms like Eat From Farms or GrazeCart. Rectangles can also work — the most important thing is to make all of them the same!
Choose the one that fits your needs…
Crop to Square
1. Click the check box next to Fixed.
2. Be sure that Aspect Ratio is selected from the drop-down.
3. Type 1:1 in as your ratio. (This means the width and height will be equal.)
Now click and drag across the image, and you’ll see a highlighted square.
Adjust it until you have exactly the area you want highlighted.
To complete the crop, just click once inside the highlighted area of the photo, or push the Return or Enter key on your keyboard.
Now you’re ready to move on to Step 3!
Crop to Rectangle
The key is to know what kind of rectangle you’re aiming for, which is defined by its aspect ratio. Common aspect ratios include:
4:3 (aka 4 parts wide to 3 parts tall — the shape of most mobile phone photos)
16:9 (aka 16 parts wide to 9 parts tall — great for wide, shallow banners)
If you want a tall photo instead of a horizontal photo, you’d reverse those (e.g. 3:4).
If your banner image will have “parallax” effect, in which it glides up as the page scrolls down, give it a little extra height so that it’s got room to reveal itself.
If you’re cropping photos that will all display together side-by-side — say your online store, blog feed, or a collage in your Drip email — make a note of the aspect ratio you choose, and stick to it for all future photos to achieve a consistent grid-style look.
1. Click the check box next to Fixed.
2. Be sure that Aspect Ratio is selected from the drop-down.
3. Type 4:3 or whatever other aspect ratio you choose.
Now click and drag across the photo, and you’ll see a highlighted square.
Adjust it until you have exactly the area you want highlighted.
To complete the crop, just click once inside the highlighted area of the photo, or push the Return or Enter key on your keyboard.
Now you’re ready to move on to Step 3!
Step 3: Scale Your Image
Scaling is an important step that helps reduce file size, enabling web pages to load faster.
The size that you choose will vary depending on your website and what area you are adding images to. Here are some guidelines that will be appropriate in most common situations…
Square product images: 1200 pixels x 1200 pixels
Banner images: 1800 pixels wide x any height
Other rectangular images: 1200 pixels for the largest dimension
Email images: 1000 pixels for the largest dimension
First, click Image at the top of your screen, and select Scale Image.
Refer to the suggested dimensions above and enter a number to modify the largest side (often the width).
Just place your cursor in the second dimension and it will auto-calculate that number for you. Click Scale.
(There’s no need to edit the resolution, whether it’s 72 or 300, because in this case it’s really the dimensions that determine the size.)
(If it’s not auto-calculating the second dimension for you, the link icon next to the numbers must’ve been toggled off. Click to toggle it back on.)
Note: In most cases you should be scaling down from a higher number. For example, going from 3600 pixels to 1200 pixels. If too much of the image was cropped out, or if you started with a low quality image, your starting number might be lower. Image quality will decrease in this case. A small difference between pixels probably won’t be noticed but be sure to carefully evaluate your image quality after processing if you attempted to scale up. Consider setting image quality to 100 in step 4 below, or taking a higher quality photo if that is possible.
Step 4: Export (compress & reduce file size)
The export step is where you tell the software how much to compress the file size, which together with the scaling we just did in Step 3, will produce a fast-loading, web-friendly image.
From the top of your screen, click File, then Export As.
Type in a file name and choose a location to save the photo.
Click the Export button.
A new window will pop up. In most cases, setting the quality to 40 is optimal. Leave other settings as-is and click the Export button.
(If you started with a lower quality image, or eliminated a large amount when cropping, you may need to set this number higher in order to retain an acceptable image.)
Now use Mac Finder or Windows Explorer to compare your file sizes.
Optimized images are smaller and measured in KB; original images, if they are high resolution, will be measured in MB. (1MB = 1,000KB)
In this example, our new optimized photo is only 156KB, which is a 97% reduction in file size!
That’s it! Now you’re ready to upload your freshly optimized photos to your farm website or use them in your marketing emails.
Do you have any questions? Would you like a video version of this tutorial? Let us know in the comments.
Need a hand?
If you’ve got enough on your list, we’ll be happy to help — just get in touch!
More Farm Marketing Resources
For purposes of this comparison, we’re focusing solely on platforms that will enable you to have both your complete website and your online store together under one roof, so we’re zeroing in on GrazeCart vs. Shopify vs. Square.