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 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.
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).
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:
- Internet Explorer: Right-hand click on image and select ‘Properties’. There is a ‘Dimensions’ property box displayed which will provide the dimensions of the selected image.
- Firefox: Right-hand click on image and select ‘Properties’. The label is a little different this time; look for ‘Image Dimensions’ property box.
- Google Chrome: Right hand click, then ‘Inspect element’.
- Safari: Right hand click on image and select ‘Open Image in New Tab’, in the title bar, it will display the image dimensions.
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.
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 the crop tool by clicking ‘Edit Pictures’ and ‘Crop’
- Adjust the New Picture dimensions until they match exactly the width and height you ascertained in Step 2.
- Select ‘OK’ to confirm changes. Please note, if you click the save button this will overwrite the source image. It is highly recommended to select File > Save As to save a new copy.
You’ve now created one beautifully cropped image using Microsoft Picture Manager. For more useful articles, tips and hints visit the Nvisage blog.