How to Crop and Re-size Images in GIMP and Photoshop

Most modern cameras are capable of taking very, very large photos. However, these large photos are not good for the web. They take a long time for you to upload and a long time for users to download. Sometimes, they are so big that the entire image wouldn't even fit fully on the screen at full size.

There is no reason to have an excessively large image up on the internet. Optimize them for the web by cropping and re-sizing.

How to Crop

In Gimp, the crop tool looks like a utility knife.

In Photoshop, the crop tool looks
like two L-shaped pieces.

Cropping refers to cutting off a portion the image in order to get the shape (and perhaps size) that you want. In Gimp, the crop tool looks like a little utility knife; in Adobe Photoshop, it looks like two L-bars. (Photographers sometimes take two L-shaped pieces of matte board to play with framing options on a print.)

Tool Options in Gimp

Cropping in Photoshop

In order to crop, you just select the tool and then drag a box to the show the image you wish to keep. The parts that are going to be cut off will be greyed out slightly.

If you click Shift while you drag in Photoshop, you will end up with a cropped selection that is a perfect square. In Gimp, you can tell it to use a fixed aspect ratio - a 1:1 ratio will give you a perfect square.

Photoshop generally gives you guidelines dividing the image into thirds both vertically and horizontally. This can be handy for creating compositions using the rule of thirds. You can also tell it to use No Guides. In Gimp, you can choose from several different guideline options, including Rule of thirds, No guides, and several others.

Cropping in Gimp - no guides selected in tool options

Both programs allow you to drag the corners and sides of the cropped selection in order perfect it by clicking at the edges or just barely inside them. Clicking roughly in the center of the cropped selection will let you drag to move the box.

In Photoshop, you can also rotate the cropped section if you click and drag outside of the cropped box. In Gimp, clicking outside of the cropped box will result in a new crop selection being started. If you want to rotate in Gimp, you need to use the rotate tool before you crop. (For example, if you took a landscape photo and the horizon line isn't quite horizontal, then rotating the image or the cropped section can fix it.)

Once you press enter, you'll have your newly-cropped image.

How to Resize

Resize Image Dialog for Photoshop

You re-size images by using the top menus for both Gimp and Photoshop. In Photoshop, you go to Image -Image Size.

In Gimp, you go to Image -> Scale Image.

This will allow you to change the size without affecting the proportions/shape. Just type in a different width or height, and the program will change the other measurement accordingly.

Just as a note, you can specify the image to resize according to pixels or percentage. Pixels ought to be selected by default.

Scale Image Dialog for Gimp

The other option on the screen is to change the resolution. If you're not going to be printing, then you really don't need to worry about it. Standard inkjet printers print at 150 dpi or higher. (DPI stands for Dots Per Inch.) If you're going to have an image printed for business cards and brochures, then you want 300 dpi. Computer screens generally display at 72 dpi, but generally websites work in pixel height and width, so you don't really need to change anything in regards to resolution for internet applications.

What Is The Ideal Size? 
Now that you know how to alter the shape and size of your image, what do you change it to?

There is a cost and a benefit for any size you pick. If you post a large photo on the internet, it's easy to see lots of detail, but it will also take longer to download and it may be more appealing to image thieves. If you post a smaller photo, it'll download more quickly and be less appealing to copycats, but on a large desktop screen, the image will seem small. Mobile phones have a small screen, so for mobile browsing the format of how manage images will be crammed across one screen is more important than the actual pixel dimensions.

Where Are You Going To Use The Image?
What size is ideal for you also depends on where you're planning to use the image for. For example, Artfire currently displays a maximum of 500 pixels (either wide or tall) on the screen but allows users to zoom into an image that is up to 1000 pixels wide or tall. Google Shopping is now asking for images that are at least 800 pixels wide and tall if you use a platform that can feed into it. Etsy wants things to be a minimum of 570 pixels wide, but recommends 800-1000 pixels.

If you're planning to post your photos on pinterest, then they need to be at least 81 pixels wide and tall for the site to even accept them. However, they show up on the pinterest board screen at 192 pixels wide and at 554 pixels wide on the enlarge pin screen.

If you're optimizing for mobile devices, 200 pixels is a good number for thumbnails.

Which Shape?

A square image like this work well for
thumbnails on Wanelo.

If you sell online, then you want to crop your initial images to get a good thumbnail. Some platforms always display their thumbnails in a consistent format. For example, the social shopping site Wanelo always displays things as a square. (If you've never heard of Wanelo, it's a bit like Pinterest, but for shopping.) If you post a product on Wanelo, you risk having important areas cropped out of their thumbnails if the image is not square.

Other platforms do not display thumbnails in a certain format automatically. For example, Artfire, Pinterest, and many standalone e-commerce platforms (like SupaDupa). In this case, you may want to crop all of your initial images to the same proportions to create a consistent look across your store.

Tall, vertical images like this bib
photo display better on Pinterest.

Best Shape for Pinterest?
Pinterest displays images in columns that have a set width. This means that image that are long and vertical take up more space on the screen, are more visible, and hence, tend to get more re-pins and likes. So, if you're planning to use the image on Pinterest, then you want to use a vertical rather than a horizontal format. I've even seen some photographers post underwater panoramas there flipped onto one side to help them remain visible. I've also seen collages of a lot of different images all stacked together into an extremely long, vertical column to try to take up as much visible real estate on Pinterest as possible.

Pinterest limits the height of extremely long, narrow skinny pins with an 'Expand Pin' option. I've noticed that it happens on pins that are 800 or more pixels tall at the 192 wide preview size. (This means you'd have to have an image that is 192 pixels wide by 800 pixels tall before you're going to get limitations. If you're really trying to optimize for Pinterest so that it shows up well on the enlarged pin screen, then the image would be 554 pixels wide x 2375 pixels tall.)

If I were selling this apron on Etsy, I would crop
it to have a .8 to 1 ratio to ensure the most important
details are visible in the preview thumbnail.

Best Shape for Etsy?
If you sell on Etsy, then you want to optimize for a slightly horizontal format. The ratio they use for thumbnails is about 5 wide by 4 tall. This works out to about 554 x 444 on the small end and 1000 pixels wide by 800 pixels tall for the large end. You can easily post images that aren't exactly in the website's standard format, but you do want to preview it to make sure that it's going to look good in the cropped thumbnail.

If you want to crop your image at an .8 to 1 ratio for Etsy, you can adjust the crop tool settings in GIMP - just pick "Fixed Aspect Ratio" and use .8 as your ratio.

Photoshop makes it easy to crop to a square, by clicking shift. If you want a different proportion, you have to type in the finished pixel dimensions (like 1000 wide by 800 high) into the crop tool settings. The program will crop and resize in the same step once you click enter. (If you want to have a certain proportion, but you don't want Photoshop to resize anything, then you can use the square selection tools and specify a fixed aspect ratio there. From there, you can copy it into a new file.)

You can specify a finished size for the image using the crop tool settings in Photoshop.
The program will crop and resize in one step once you approve a selection.