³ÉÈËVRÊÓƵ

Benefits of cropping images with a consistent ratio

1. Your images will line-up nicely when displayed horizontally
2. Image alignment will remain consistent whether you choose to display your templates at full-width, half-width or third-width
3. You’ll be able to re-position templates without having to worry about image alignment

So, how do you crop images using a consistent ratio?

Image editing tools

NOTE: With the exception of Snagit, ³ÉÈËVRÊÓƵ neither endorses or supports the tools listed below. All tools are listed as examples only.

To start, you’ll need an image editing application that will allow you to crop images to specific dimensions. Here are some options to consider:

• – A free and easy to use online cropping tool
• – Screen capture software available through ³ÉÈËVRÊÓƵ’s campus software program
• – A free and open source image editing application
• – A feature-rich image editing program, available for a monthly subscription fee
• – An online tool that calculates image dimensions (width and/or height) based on ratio

Steps to crop an image

Of the tools listed above, Croppola is probably the most straight-forward to use. Here are steps you can follow to crop a  photo using the current version of Croppola:

1. Go to
2. Upload your image by browsing your computer files, or drag and drop the image
3. Under ‘Crop’ > ‘Scale to’ enter your preferred image width into the first field but leave the second field empty, e.g. 1400 x ____ pixels (we’ll discuss this further  under ‘Image width’ below)
4. Under ‘Aspect ratio’ on the right, choose your preferred ratio (we suggest using 16:9 or 4:3)
5. Drag the crop lines that appear on the image as required (crop your image to best suit what you are trying to communicate)
6. Click the ‘Download this crop’ button

And that’s it! Kind of…

Image dimensions and file size

Another practice we’re promoting is to crop all your images using a consistent image width. Most WMS features will scale images to fit the application, so it isn’t necessary to crop images to the various dimensions at which they will be displayed.

Cropping all images for the largest possible width (e.g. the full-width of the web page) will allow you to easily adjust the size and position of your templates as you experiment with different layout options.  We also suggest adding a little extra width to your image, to account for upcoming expansions to the page width as well as the possibility your image might be viewed on a large display screen.

As a general rule, you should upload the largest image (width and height), at the highest quality (dots per inch/dpi) possible, that doesn’t exceed a file size of 1MB. For the time being, we recommend choosing a width of 1400px or greater.

How to crop an image using other image editors

Not a fan of Croppola? Here are other online tutorials that explain how to crop images using other image editing tools:

Do you have any tips or tricks or favourite tools that you use when cropping images for your WMS sites? Share your suggestions in the comments below!

Related article:

• 5 template block tips for alpha site managers