In this first post in a series, we look at cropping images for websites. Even with the excellent inbuilt WordPress functions, it is often better to crop images to size before uploading them to a CMS.
Photoshop is an excellent tool for cropping the image and optimising the file size for web use but many clients do not have the budget for Photoshop so this tutorial uses the free online web app Pixlr. The principals are the same whatever decent image software you use.
TIP: You must make sure the width and height of your new image is the same or larger that the desired image sizes before you start. In most instances if your image is smaller, when you stretch them to the new size the quality will be greatly compromised.
In this first example the image for the web is supposed to be a square 260 wide by 260 pixels high: the photo that needs to be cropped is 3264 wide by 1836 pixels high.
Cropping images for websites using Pixlr.
There is a creative decision to make next:
- Can a square shape be taken that is both smaller than the height and width of the image – ie a detail of the larger picture? (See below)
- Do you need to get as much of the picture into my square shape? (See our next post)
How to take a square from the image that is both smaller than the height and width of the image.
This is a simple process if there is enough detail in the picture that you can highlight.
Using the crop tool to select a square shape in the middle of your image.
Simply find the cropping tool and take a square section of the image. It doesn’t matter how big your square is at this stage as you can resize it later. Pixlr, Photoshop and other software will tell you the height and width of the area you are about to crop. When the two are the same size, release the mouse and apply the change.
TIP: If you are struggling to get the height and width to match up, try using the zoom tool in the view menu to expand the picture before you try again.
You can then use the resize function to make your image the right size (as long as it is bigger to start with). If Contrain Propoportions is ticked as soon as you change one size the other will automatically change. Save the image.
Once resized, save the image.
In the next post on the same topic, we’ll show you how tips on resizing the image to include as much of the image as possible.