Cropping Images

Categories: Hints & Tips, Images

In this second series of image editing for the web, we’ll be looking at cropping images.  The first in this series of articles covered resizing images (view that article here) using a free online tool – BeFunky. We’ll be using that resource again here.

As with the previous guide, I’m assuming that the image you want to edit is already saved on the computer that you’ll be working on.

Step 1

Open the image BeFunky image cropping option here You’ll see a screen similar to the one below. In the example below a preloaded image can be seen.  Don’t worry if you don’t have that (or even if the one you see is different); you’ll be replacing that with your own image.

befunky website showing a red vintage car

Step 2

At the top of the screen, close to the centre, there is a button called “Open”. Click this and select the “Computer” option at the top of the list.  Then navigate to the folder on your computer where the image is stored and upload it to the blank canvas in front of you.

Note: if the screen doesn’t look like the  one below after you’ve uploaded your image, simply select the “Crop” option from the Edit menu on the far left hand side of the screen.

befunky website showing cropping an image

Step 3

On the far left hand side of the screen, there is a “Crop” options box.  There are a number of preset options available here from the “Aspect Ratio” dropdown list. I want to crop my letterbox-style image so it doesn’t have quite so much yellow background showing on the left; for this I’m going to use the “Freeform” option.

You’ll notice the image has a box containing grid squares on top of part of it.  If you click anywhere on the box you can drag it around the image.  You can also use the white ‘handles’ to make this box smaller or bigger.

I want my image to be 1200px wide and 800px high.  So I’ve changed the size of the box that sits over the image to match these dimensions as in the example below.

Hint: in this instance the checkbox “Lock Aspect Ratio” should not be ticked.

befunky website showing cropping an image options

Step 4

When you’re happy with the cropped image, select “Apply” from the left-hand side of the screen. Your cropped image will appear on the screen in front of you.

befunky website showing a cropped image

Step 5

Go the top of the screen and select the “save” button (next to the “Open” button you used in Step 2).  You want to select the “Computer” option again. You’ll now have some save options.  The first is the type of image file you’d like.  Unless your image has a transparent background that you need to retain, you should select the “JPG” format (they tend to be smaller than other file sizes).  There is also an “Image Quality” option – if you slide the toggle from right to left you’ll see the impact of quality on file size – the higher the quality, the greater the file size.  In the example below I have reduced the quality to 95%; this gives a good image quality but at a reduced file size. Finally, select “Save” to download the image to your computer. You’ve now cropped your image!

befunky website showing cropping image options

Final Word

I hope you’ve found the guide above useful!  There’s an interesting article here on cropping vs. resizing images if you want any further information.

Share This

Contact Me

Due to my current workload I’m not taking on any new development projects at this time.  To discuss your alternative options, you can still use the button below to contact me.

Get in Touch