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.

• 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

• 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

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

        

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

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!