Tag Archives: formatting images

Formatting images for the web – Part 2: Cropping a larger image to fit specific dimensions

While many content management systems include functions to crop images to size before uploading them to a website there are reasons why it may be better to prepare yourself using image formatting tools. But getting the formatting right can be tricky.

In the last post we mentioned Photoshop and the free to use Pixlr as suitable tools but there are many others out there.

For this post, we look at tips on resizing the images to include as much as the image as possible.

Often you want to use an image but the website design requires a fixed height and width ratio that is different. We often see examples of images that are simply resized to match the specified dimension. The results are images that are distorted on the website. It cannot be overestimated what a damaging effect this can have on the visitors perception of the website particularly when portraits are used.

example

Compare the first image with the original on the right and you can see how the mountains have been squashed.

TIP: Always start off with your source image being bigger in height and width than the final dimensions of the image space on the web page.

In your image software, open up a new canvas and set it to the desired height and width. Then open up the image you need to resize.

Make a note of the height and width of the desired final image and compare that with the height and width of the original image.

Take the smallest measurement of the original image and set your software to resize to the smallest corresponding measurement of the end result image. Make sure that the option to constrain proportions is ticked so that the image is resized without distortion.

canvases
canvases2

Once resized, copy and paste the image into your blank canvas and align the image so that the smallest edge is perfectly aligned. Your software should automatically hide parts of the longest edge and you can move the image around until you get the best crop.

canvases3

Notice on the left canvas in the example above the parts at the far sides of the photo have been hidden. When you are happy with what has been cropped out, save your image ready to upload to the web.

The same principle applies to portrait shaped images and even square shaped images.

Using the crop tool to select a square shape

Formatting images for the web – Part 1: Cropping a larger image into a square

 

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
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
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.

Saving the cropped 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.