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

Posted on
Computer with photo editing software open

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.

Comparison of two photos for editing purposes

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.

Photoshop showing how to resize image
Instructions on how to resize an image

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.

Successfully resized image on photoshop

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.