Authoring Experience (AX) Best Practices for Images in Drupal

Do you add content to Drupal websites? Have you ever found yourself in the process of uploading an image, with no clue what size to upload? Or whether Drupal will scale or crop the image? If so, you’re not alone.

Drupal sites get built a million different ways because of scope, budget and time. Because of this, sites behave differently. One site may automatically crop and scale an uploaded image to fit within a template. Another may require you to do that work before hand. This behavioral inconsistency can leave admins guessing as to how the site behaves.

You might be thinking “But we account for this during training.” Many teams train clients how to use their sites during a hand off. They account for any lack of help text with verbal explanations. While that trained client maintains the site, everything may go fine. But what happens when that person leaves and another person takes over? Do they get trained? Is there documentation?

Even the in the best case scenarios when there is documentation residing outside the CMS, few read the manual. Most of us muddle through. We do this because we’re busy and don’t want to look for instructions and can’t remember where Frank put that file anyway. Where is Frank? Frank!

So what’s the fix?

Meaningful help text. We want to provide help text in the image field that maps to the possible questions an admin may have when faced with uploading an image. These questions are:

  • Does the image gets cropped?
  • Does the image get scaled?
  • Does the image get scaled proportionally?
  • What size do I need to prep my image at?
  • What file format is best?
  • Do I need to compress my image before upload or will Drupal do it for me?
  • Do I get to pick the thumbnail crop or is it generated automatically?

Here are some examples of well written help text to address these never-ending quandaries:

Example for when admin has to crop, scale & compress an image

  • Image dimensions: 1500px x 450px (must be exact or design will break)
  • Best file format: jpeg
  • Image file size should be less than 100K
  • Drupal will not compress your image. Upload as small as possible (without compromising quality) for performance.

Example for when Drupal crops, scales & compresses an image

  • Image dimensions: any
  • Drupal will crop and scale your image to 1500x450. You will be shown a crop interface to pick where the image gets cropped after you press the “upload” button.
  • Best file format: jpeg
  • Image file size: Drupal will compress your image for you.

Example for when image can be any size, so long as it adheres to an aspect ratio & Drupal compresses

  • Image dimension: 4:3 aspect ratio
  • NOTE: Make sure width is at least 800px wide (at at least 72 ppi)
  • Best file format: jpeg
  • Image size: Any. Drupal will compress for you

For extra credit you can add image guidelines reflecting your brand such as:

  • Do not upload images with a text overlay
  • Use imagery that is architectural, scenic or inspiring
  • Do not use images with a person as the subject. Keep it abstract

Go forth and make great help text! Share any other text you’ve found to be helpful in your sites. This small improvement can help all Drupal sites maintain their visual integrity through multiple site owners.