Cropping images

I've found that a common problem inexperienced content editors encounter is cropping an image to fit within a defined size on a web page template.

As a reference for clients - and others who might find it useful - I thought I would write a litte post with an accompanying screencast to record the process I follow in cropping an image to a set width and height.

Here is our example image:

Source image

Imagine that we want to crop the image so that it fits into this image slot on a template (I'm using my own blog template as an example):

Image cropped to correct proportions

To fit into this template the image needs to be half as tall as it is wide: let's say 600 pixels wide and 300 pixels high. If we simply upload the unedited source image into the template it will render with incorrect proportions: it will have a 'squashed' appearance, because we're trying to force it into an image slot with different proportions from those of the source image. So we get something like this:

Incorrectly proportioned 'squashed' image

To avoid this we need to crop the image to the correct proportions - in this case 600 by 300 pixels - before we upload it to the website. Here's a little screencast - which you can also view on YouTube - explaining how I do this, using the free online Pixlr graphics app which provides all the tools necessary for simple image editing:

That's it. Hope this helps.

Categories: