How to crop images with a consistent ratio

ratio images

Since the release of the new Call to action, List and Statement templates, we’ve been encouraging site managers to begin cropping web images using a consistent ratio. The benefits are threefold:

  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, McGill 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:

  • Croppola – A free and easy to use online cropping tool
  • Snagit – Screen capture software available through McGill’s campus software program
  • Gimp – A free and open source image editing application
  • Adobe Photoshop – A feature-rich image editing program, available for a monthly subscription fee
  • Get Ratio – An online tool that calculates image dimensions (width and/or height) based on ratio

Croppola screenshot

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 Croppola
  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 Beta Blog articles:

WMS presentation: No website left behind

Title slide: No website left behind

We were very pleased at the terrific turnout at our recent WMS Presentation at McGill’s Communications Huddle! Communications officers from across McGill learnt about recent updates in the WMS. Attendees also picked up tips on how to use WMS tools and features to improve their faculty and department communications efforts.

Below is a list of resources related to the presentation titled, ‘No website left behind’.

Download a copy of the presentation slides.

IT Knowledge Base and Beta Blog articles:

Featured WMS sites:

Featured website: McGill Office for Science and Society

The Office for Science and Society’s media-rich website sports a number dynamic updates launched in mid-February 2017.

The revised site takes advantage of a number of recently released WMS features, including our brand spanking new article content.

Home page before:

OSS old home page

Home page after:

OSS new home page

New article template:

Article layout

Improvements include:

  • A revised home page that uses the new WMS templates to produce a layout that is easier for site visitors to scan and navigate.
  • A more dynamic Trottier Symposium page that better highlights themes and content from previous years’ events.
  • The launch of article content on the OSS site (previously, OSS articles were published in a separate blog)
  • More improvements to come! Additional updates to the OSS site will be launched over the coming months

Are you planning to revamp your site using recently released WMS tools? We’d love to hear about it in the comments below.

And don’t forget to check back for next month’s featured website!

Related links:

Blog authors are solely responsible for the content of the blogs listed in the directory. Neither the content of these blogs, nor the links to other web sites, are screened, approved, reviewed or endorsed by McGill University. The text and other material on these blogs are the opinion of the specific author and are not statements of advice, opinion, or information of McGill.