Images for your website part 2. Cropping and Resizing images

This is the second part of our blog series that's geared around getting the best out of the photographs and graphics that go on your website. This post will cover the basics of image editing and explain how to ensure your image is best prepared before uploading it to your website.

Cropping Images:

Probably the most common image editing task, as a web design company it's something we do a heck of a lot. Cropping, simply put, is the act of cutting off the edges of an image. Cropping can be used to focus in on a subject of an image, for example an image of you, your dog and your ex could be easily cut down to just include you and your dog, cutting your ex out of the image the same way he or she cut you out of their life.

Cropping can also be used to change the shape of an image. A wide panorama type photo can be sliced into a tall narrow photo, or you can crop a photo into a circle, focusing on someone's face, perfect for sticking to a dart board.

To demonstrate how to crop a photo, I'll be using Microsoft Paint 3D - only because it's something most people will have on their computers. There are many many different applications that can crop an image, much like moving into a new relationship, each bit of software is slightly different but in essence the principles remain the same - you fall in love, things go great for three months, betrayal, hatred, acceptance, and the cycle begins again. You get the idea. 

Step 1 - Open the image in Paint3D:

When you open up Paint3D on your computer you'll be asked if you want to create a new document, open a file, or paste in an image. If your image is on your computer, choose open and navigate to the files location and click open. If you've copied an image previously, choose paste. Either way you'll end up with your image ready for cropping, looking something like this:

Step 2 - Drag some stuff around:

Next you want to hit the button at the top that says crop. This will change the view slightly and introduce handles around the image. Drag the handles to narrow down the frame, the shaded out bits of the image are the bits that will be "cut away" and the highlighted area is the bit you want to keep, a bit like this:

Once you're happy with how your image will look, press enter, or the green tick on the right and you'll see the edges around the image will disappear. If you decide you just want things to be back to how they were, don't try calling drunk at 3AM, just press the undo button, and your image will be back to normal.

Step 3 - Save your image:

All that's left to do now is to save your image. Click save at the top and you can either save somewhere new under a new filename, or overwrite your original image. 

With photographs, cropping can become a bit of an art. More professional image editing software packages such as Photoshop or GIMP will often give you a grid allowing you to implement the "rule of thirds" (https://en.wikipedia.org/wiki/Rule_of_thirds) and straighten photos up as well, giving your black and white self portrait that extra level of professionalism that's sure to win her/him back. 

Resizing:

Just as important as cropping is resizing an image. All this means is reducing the dimensions of an image so it takes up less space on the screen. In order to preserve image quality, cropping should occur first, and resizing second. 

In order to understand how an image is resized, we need to talk about units (and no, that's not another reference to my ex). Most image editing software will give you a choice when you specify what size you want the image to be. A percentage based unit, will be a percentage value relative to the original image. For example, make an image 50% it's original width, and the result will be an image that's half the size. 

Pixels are a digital unit of measurement, tied to the resolution of your screen. An image, while it can be any size, is usually somewhere between 300 and 1500 pixels. When you specify a pixel value for resizing, your image will stretch or shrink to this exact value.

The next thing to bear in mind when you're resizing an image is aspect ratio. Aspect ratio refers to the relationship between the width and height of an image, a square would be 1:1, a photograph is usually 16:9 

If you resize a photo to be a different shape to its original, the software will have to stretch and distort the photograph in order to make it fit. Stretching an image outside of its original proportions is never recommended, and instead we recommend cropping if you need to change the shape of an image.

The final thing to bear in mind when you're resizing, is that while it's possible to make a smaller image larger, if it's a photograph, again it will have to be stretched, and there will be a noticeable loss in quality - again, much like going back to get your CD's, this is something we only recommend doing if absolutely necessary.

To resize an image in Paint3D do the following:

Step 1 - Open your image:

As we did previously when we were cropping the image, open it up in Paint3D.

Step 2 - Drag some stuff around, or enter some values:

Next click the canvas button at the top. This will add some handles to the edge of your image and a new pane will appear on the left hand side. Now, you can either drag the handles on the sides of the image to change its size. If you're doing this, hold shift, which will lock the aspect ratio and stop the image stretching and distorting.

Alternatively, give the image a new size by entering new values into on the right hand size. Note the "Lock aspect radio" checkbox, which will ensure the image doesn't get stretched, by automatically calculating the other value based on your input. It's almost like it can read your mind, but don't worry, it's just a computer doing its job. You're safe, you moved country, and there's no way she'll be able to find you.

Step 3 - save and exit

Just like we did when we cropped the image, once you're happy with your newly resized image click save, either replace the original image, or save it under a new filename.

That's covered the basics of image editing, I hope someone gets at least an ounce of value out of this post. If you want to explore more - I'd recommend checking out the highly entertaining You Suck at Photoshop series on Youtube.