Image cropping guidelines

Imagery for the web can be tricky.

In addition to selecting the best images based photographic style direction and composition (cropping), we also need to consider image size, ratio, and optimization for the web.

Given that we’re adding our images to a content management system (CMS - Drupal in our case) we also need to ensure a level of consistency with the image sizes and ratios - as to not break the layout of the page, nor hinder user experience by saving very large images that will slow page load times.

In this guide, we introduce and define the differences between image ratio, cropping, resolution, and optimization. We also provide you with step-by-step instructions for cropping and saving images through easy to use, web-based cropping tools.

Along with the step-by-step cropping guidelines, we’ve documented the specific resolutions and aspect ratios of all of the different image types for the Surrey Libraries website. Also included are notes on how to best crop images of book covers in placed of featured images.

Definitions

Image aspect ratio: describes the proportional relationship between image width and height. A standard photograph taken from a professional SLR camera (in landscape orientation) is at a 3:2 ratio. This means that the width of the image is exactly 1.5 times the height.

Image composition and cropping: refers to the removal of the outer parts of an image to improve framing, to accentuate subject matter, or to change the image aspect ratio. Since mostly all of our image types (with the exception of body content images) for the site are not at the natural 3:2 SLR ratio, we will need to crop images to the appropriate requirements.

Image resolution: is a term used to describe the size and the detail of digital images. Resolution is expressed in pixels (px) - which are essentially squares of single colours that make up a digital image. A higher resolution means a more detailed and bigger image on screen.

A standard SLR camera can shoot images at varying resolutions. Typically, a Canon Rebel SLR camera can shoot at a maximum image resolution of 5184px width by 3456px height. This translates roughly to an 18 Megapixel (MP - Million pixel) image (5184 x 3456 = 17,915,904 pixels). Also note that 5184 / 3456 = 1.5 or a 3:2 ratio ;)

Image optimization: (not to be confused with image compression) refers to the best practice of intentionally reducing image resolution and size for use on digital devices. Images captured from modern digital cameras are typically quite large. Although an 18MP image from an SLR camera is very high in detail, it’s also very massive in terms of digital file size.

If we add the 18MP image file from our camera directly into our CMS, not only will this slow down our editing process, it’ll also lengthen page load times for our visitors and eat up a lot of their data plans if they’re browsing through a mobile devices.

Because of this, we can’t simply crop a very large image to reduce its size; we also need to limit our image width and height in terms of resolution.

Image cropping guide

While Adobe Photoshop has become the standard in photo cropping and editing software, it also comes with a lot of extra options that aren’t needed for optimizing and cropping images for the web. And along with these extra capabilities comes an increase in complexity when using the software - meaning it’s not the most user friendly option.

And while Drupal does have modules that allow us to crop and re-size images, there are many free web-based image cropping tools that are much more specialized and are more user friendly for the task.

One of these free cropping tools is called Croppola. The following example is a step-by-step instructional guide on how to use Croppola to save an image that we’d like to use in a featured content block.

Featured content block image requirements: Aspect ratio - 9:5 [width = 1.8 times the height] Image resolution - 900 x 500 pixels

Open croppola.com in Google Chrome or Firefox (NOTE: this tool does not work in Internet Explorer)
Either drag and drop or click on the prompt to choose a photo to work with
- The default crop settings will be set to automatically select a 1:1 ratio
In the settings box on the right side of the screen, select the “Manual” option
Edit the aspect ratio option to be ‘1.8:1’ - Note, you can also enter ‘9:5’, but the tool will refactor this down to 1.8:1 to simplify.
Now that we’ve selected our aspect ratio, we need to optimize the image by making sure our crop will be saved at the right resolution.
- The resolution options should be visible between the “crop” value and the “Download this crop” button. If this box isn’t visible to you, click on the tiny rectangular box beside the crop dimensions.
- Change the fist value inside the “Scale to” box to ‘900’ - this represents the pixel width of the saved image. The height will automatically be adjusted by our aspect ratio option to 500.
You can now select the perfect crop of your image by dragging and dropping the highlighted box. You can also click and drag the white border of the highlighted box to find the right framing for the image as well.
Once you have your desired cropping selected, click on the “Download this crop” button. And voila! The saved image from Croppola is ready to be added to the featured content block in Drupal.
Important: If the framing box is too small - you may run into some blurry, upscaled images. In the example below, note that the actual cropping pixel dimensions (relative to the original image) is at 368 x 204. Since we’re scaling this image to 900 x 500, an upsample from a much smaller natural cropping (368 x 204) will result in a very blurry image. Conversely, downsampling is no problem - If a crop resolution of 2160 x 1200 is scaled down to 900 x 500 we will still have a sharp, crisp image to load into our site!
Note that this step-by-step is only an example of image cropping for the featured content block images. In-depth details about all of the different image aspect ratios and pixel dimensions throughout the site can be found below.

Image categories, crops, and sizes in pixels and ratios

Below are all of the specific image aspect rations along with their required pixel dimensions throughout the site. Please refer to this list when cropping and adding images to the site.

Page banner image - 1200 x 480 [5:2] (width = 2.5x height)
Library location image - 1200 x 480 [5:2] (width = 2.5x height)
Featured images - 900 x 500 [9:5] (width = 1.8x height) - this includes:
- Large featured image
- Small featured image
- Custom content blocks
- Featured content blocks
- Billboard image (associated content blocks)
Content images - 900 max-width, 500 max-height - The aspect ratios for images inside the body content may be variable.

Image classes and modifiers

Image class modifiers are meant to be used with images in the body content. Simply switch into source view and add these classes inside an image tag to get the desired results.

.img-full - Sets the image to span the full width of its container. Also creates some whitespace above and below the image.
.img-left - Sets the image to float to the left of the content (text wraps around image). Whitespace around the image and image width are automatically adjusted depending on screen size to avoid breaking text line lengths. NOTE: this class is not required, but is available. You can also set image to align left in the image properties directly in Drupal and expect the same results.
.img-right - Same as above but floated to the right.
.img-center - Centers the image and clears the left and right spacing so that no text wraps around its sides.

Book cover cropping in featured content blocks

If we need to display a book cover in a featured content block, we will need to use some alternative techniques. Book covers come in all shapes and sizes so they’re quite awkward to show in a landscape oriented image with a specific aspect ratio requirement. For book covers, we basically need to “overcrop” them so that the full book cover will be displayed in the 900 x 500 or 1.8:1 image.

Cropping tools generally don’t allow us to “overcrop” so we will need Photoshop for this. Please contact a Surrey Libraries web content administrator for the Adobe Photoshop template for cropping book covers in featured images.

Note - when saving images of book covers for featured content blocks, use the 'export' or 'save for web' options. JPEG formats are best compressed at around a 60-70 Quality level (under save for web options).