Our ideas

To ensure your website stays looking as good as the day it went live, here is a useful image technique which will ensure no images bust out of your beautiful website layout.

What is cropping?

Cropping is the process of removing the outer parts of an image to improve framing of an image.

Why bother cropping?

The issue

The problem with placing an image on your website without considering where and how it will be displayed is equal to buying a large dress for a small woman without considering her size, personal colour preference or favourite material. At it’s simplest, the image size should match the size it will be displayed on the website.

Inconsistent results

Your website may have a multitude of ways of uploading and displaying images, perhaps your clever website re-sizes them and automatically crops them. You may even upload an image to your website and no matter what the width or height of the image it never busts out of the image size. No matter what technique your considerate website builder has implemented, all of these techniques are substitutes for a small learning curve which will provide you with a better consideration of web maintenance and best practice.

Cropping in Microsoft Picture Manager

Step 1 – Open file in Picture Manager

Locate the image you wish to crop on your PC, and right hand click and select Open With Microsoft Image Manager (you may need to locate this on your hard drive by selecting ‘Choose Program…’ and locating on your hard drive).

Open image with Microsoft Image Manager

Open image with Microsoft Image Manager

Step 2 – Check the dimensions the image needs to be

To find out an image dimension you will need to carry out different procedures based on your browser choice:

Image dimensions display in Safari browser

Image dimensions display in Safari browser

Step 3 – Re size the image

To ensure your image is not unnecessarily too high or wide, re size the image in Picture Manager by clicking ‘Edit Pictures’ in the top tool bar pane. This will open up a right hand menu with various functions. At this stage you may wish to press ‘Auto Correct’ which will attempt to adjust the brightness levels of the image histogram. Simply click ‘Resize’ and select the ‘Custom width x height’ option. Enter either the width or height which you determined the image needs to be in step 2. Which entry you enter is a judgement call but will generally be the width as there is far more vertical space available on a user’s browser than horizontal.

Note: Once you’ve entered the width or height attribute, check what Picture Manager says is the New Size. If any of the attributes are smaller than what the final images dimensions need to be, try adjusting the size until both width and height values are higher than they need to be.

Check and compare the image dimensions

Compare and check the image dimensions

Once you’ve entered the width or height attribute click ‘Ok’. MS Picture manager will re size the image ensuring the aspect ratio is retained therefore preventing any squashing or stretching of the image.

Step 4 – Cropping the image.

Going back to the allergy of buying a dress for a lady; Cropping is the tailoring stage, ensuring the dress is a perfect fit.

Select crop tool

Select crop tool

Crop to dimensions and select 'OK'

Crop to dimensions and select 'OK'

You’ve now created one beautifully cropped image using Microsoft Picture Manager. For more useful articles, tips and hints visit the Nvisage blog.

Finished resized image

Final cropped image

Quick question?