Drupal - Basic: Preparing Images for the Web in MS Word

Before uploading your images to Drupal, it’s important to correctly crop, size, and optimize them to ensure they will display correctly and be accessible. The instructions below are for performing those tasks within MS Word on Windows and MacOS.

Insert the desired image into the MS Word document

There are two ways to insert images into a MS Word document. 

Method 1:

  • Click on the Insert tab on the ribbon
  • In the Illustrations group, click on the Pictures icon
  • Locate the desired image, click on it, and press the Insert button

Method 2:

  • From the Windows Explorer or Mac Finder, locate the desired image
  • Drag and drop the image into the MS Word document

Cropping Images

If you wish to cut out a portion of the image, use Word’s Crop tool. For example, you may wish to remove the students on the left side of the image below.

image before cropping


  • Click on the image to select it
  • Click on the Format tab in the ribbon
  • In the Size group, click on the Crop button
  • 8 handles will appear around the border of the image. Click and drag inward to crop the image as desired

image mid-cropping

  • When you’re finished cropping the image, press the escape key or click outside of the image to finalize the change. If you’ve made a mistake, don’t worry! Cropping is non-destructive, meaning the full original image is still available. To undo your cropping, click on the Undo button or press Control + Z

cropped image

Resizing Images

Images have many different uses in Drupal, and there are optimal image sizes for various applications. If an image is too large or is an inappropriate ratio, the image may not display correctly in Drupal.

  • Click on the image
  • Click on the Format tab on the ribbon
  • In the Size group, adjust the Height and Width measurements based on how you intend to use the image. The chart below outlines recommended image dimensions for various use-cases.
    1. Note: If you change one of the measurements and the other measurement changes automatically, you must perform the following step.
      1. Click on the menu launcher button in the lower-right corner of the Size group

        image height width in toolbar


  1. On the Size tab of the Layout menu, ensure Lock aspect ratio is unchecked.
  2. Click OK


Image Type/UseDimensions (in Inches)
WYSIWYG Images:

Maximum 15 inches wide

Minimum 9.5 inches wide


Squares and Vertical orientation: Thumbnails; Headshots used for Admissions Officer;  staff directories; News – Portrait; Social Media Connect; etc.

9.5 inches

wide for portrait or thumbnail-only


Horizontal orientation: Most Flexible Content Items; News – Wide; Hero; etc
40 inches wide by 18.52 inches high


Optimizing the image for the web

Optimizing the image will ensure that it loads quickly on the web.

  • Click on the image to select it
  • Click on the Format tab on the ribbon
  • In the Adjust group, click on the Compress pictures icon
  • Under Compression options, ensure the check boxes for Apply only to this picture and Delete cropped areas of pictures are selected
  • Under Target output, ensure Web/Screen (96 ppi  is selected
  • Click OK


Saving Images

  1. Right-click on the image and select Save as Picture…
  2. Select a location to save the picture
  3. Insert a file name
  4. In the Save as type: drop down menu, select JPEG File Interchange Format
  5. Click Save

Your image is now ready to be uploaded to Drupal!

Still need Drupal help? Have more Drupal questions?

If after reading this article or watching the training videos you still have questions, we can help!

Sign-up for any of our Drupal Drop-ins throughout the year. 

Schedule a Drupal training session for you or your whole department with our Drupal Trainer.

Questions?

If you have any additional questions or problems, don't hesitate to reach out to the Help Desk!

Phone: 610-526-7440 | Library and Help Desk hours
Email: help@brynmawr.edu | Service catalog
Location: Canaday Library 1st floor