Notes About Images

Image Sizing

All images must be sized correctly for the web prior to uploading them to your site, 72 dpi, and RGB color.  Images should generally be 500 KB, or smaller, in file size, and usually are in a JPG format, although some PNG files will also work.

The most common maximum image sizes depends on which version of Drupal your site is using.

For Drupal 7 sites the most common sizes are:

  • 1200 px wide for full-width pages with no left-hand secondary menu (this width is only for banner images and should be kept under 300 px tall)
  • 780 px (or smaller) wide for pages with left-hand secondary menu

For Drupal 8 or 9+ sites the most common sizes are:

  • 1440 px wide for full-width pages with no left-hand secondary menu (this width is only for banner images and should also be kept under 300 px tall, however banner sizes can also be up to 480 px tall)
  • 820 px (or smaller) wide for pages with left-hand secondary menu

Additional information on sizing and how to resize an image can be found on the Non-Web Tools page.

Image Naming Convention

Some ad blockers can hide or prevent images with "ad" words in the file name or Alt Text. To prevent an ad blocker from blocking an image, please avoid using "ad" words in your image names or image Alt Text such as:

  • ad
  • advertising
  • advertisement

Add New Images

To the Page

Adding images in Drupal 7 | Adding images in Drupal 8/9+

  • In the Content Editor box, click your cursor where you want the photo to be inserted.

Adding images in Drupal 7:

  • Click on the double photo icon on the right-hand side of the formatting bar (Disregard the other image icon on the left side).
Menu bar, add media button highlighted
  • This will bring up a pop-up box.
    NOTE: If you have already uploaded the image you want, or have used it previously on your site, skip down to the Add previously uploaded images section.
  • Browse your computer to find the image you want to add to your content, click on it, then click the Open button.


Screenshot of WYSIWYG of button to add a photo
  • Once the title of the photo appears in the box next to Browse, click on the Next button.
  • If you have a Destination screen, leave the setting on "Public local files served by the webserver" and click Next again. Otherwise, continue on to the next step:
  • When you upload an image, the next screen will have Alt Text and Title Text fields for the image. After you have filled out the Alt Text and Title Text fields, click the Save button, and then click the Submit button.
  • The image will now be inserted into the Content Editor box.
  • To make size or padding changes see the Edit Image Properties section below.

Adding Images in Drupal 8/9+ versions:

  • Click the Media Library button in the center of the editor that looks like this: 
Add media button

You will now see the Media Library window:

Drupal Media Library window
  • Click the "Choose file" button, then browse your computer until you find the image you want to upload.
  • Add the Alt Text for that image.
  • Click the "Save and Insert" button to insert your image where your cursor was.
  • A pop-up window will appear where you can set the "Left" or "Right" alignment to have the text wrap around the image, or choose "None" or "Center" to not have text wrap around one side of the image. "Center" is the default setting but can be changed at any time by clicking the "Edit media" button near your images.
  • You can also select a crop ratio and and size.  Crop Custom is the original ratio and size the image was when uploaded.
Edit media window showing Alignment, Alt Text, Caption, and Crop options


To the Library

Note: If you need to add more than 5 images, it could be easier to add them all at once. See Upload Multiple Images for more information.

Click on Manage Files in the Admin menu in the gray bar at the top of your page.
Note: in Drupal 8/9+ versions, this is listed as "All Media" in the white bar.


Click on the + Add file link (or + Add media in Drupal 8/9+) located below the Content title at the top left of the page.


This will give you the same screen that appears in the pop-up box when you are adding a photo while creating a page.

Accessibility in Practice

All images must have "Alt Text" for website accessibility and search engine optimization.

Alt Text should have a clear and concise description of the images or graphics appearing on your site and will be a description of the image to someone who can't see the photo.

This text can be specific, such as "Professor Plum in the EMU ballroom with GTFs John Doe and Jane Doe" or a generic "Professor Plum with students".

"Comment out" (for the screen reader) strictly decorative graphics with alt = "". Use a testing tool to view images replaced with their alt text.

Add Previously Uploaded Images

Adding Existing Images in Drupal 7 | Adding Existing Images in Drupal 8/9+

  • To insert an image previously uploaded to your library, click your cursor where you want to insert your image.

Adding Images in Drupal 7

  • Click on the same double-image icon: Screen shot of the right hand, double Image icon on the far right side of the Content Editor menu that you use for adding a new photo. This will bring up the add an image box.
  • Click on the Library tab on the right: 


Screen shot of the Library tab
  • The contents of the pop-up box will change to show thumbnails of all the images that have been uploaded to your site:


Screenshot of the photo library pop up box
  • If you know all or part of the filename for the image you are looking to add, you can type it into the File name box and click the Apply button to filter the thumbnails.
    NOTE: You do not have to type in the exact filename. If you don't remember the exact filename, you can type in the first few letters and it will show you all of the filenames that contain those letters. As an example, entering in "image" will also bring up any files with "image" or "images" in the name.
  • You can also filter the Library content by Type (Audio, Document, Image, Video) or change the Sort by method.
  • If you don't see the image you want to use on the first page of content, scroll down to the bottom and click the next or previous links to view additional thumbnails. There are 25 thumbnails per page and you can also use the numbers to jump to a different page of thumbnails:


Screen shot of the Library tab paging
  • Once you find the image you want to insert, click on the image, then scroll down and click the Submit button at the bottom to add the image to your content.
  • After the image has been added to your content, you can make changes to it the same way you would for a new image.

Adding Existing Images in Drupal 8/9+

  • Click the Media Library button in the editor: Add media button
  • Search or Browse your library until you find the image you wish to insert and click on it, then click the "Insert selected" button at the bottom:
Drupal Media Library window
  • From here, you can right click on the image to bring up other editing options, such as padding or width, or click the "Edit media" button to bring up the original pop-up window.
Note about Using the Same Images Multiple Times on a Page

If the same image appears 20 times or more on a page, it could stop rendering and may not appear. This can occur when the same image is being used as a placeholder in multiple areas on the page. If this happens, try using different images as placeholders.

Replace an Image

Replace an Image in the Editor

While editing your content, all images should have a yellow image icon in the bottom right corner of the image.

  Swap media icon
Click on that icon to bring up the media browser popup box that you see when you add new images and will function exactly the same, except you are replacing the existing image with a new one. Follow the same steps as adding a new image and the old image will be replaced by a new one.

NOTE: If you do not see the image swap button as shown above, you will need to right-click on the image and choose the "Swap image" option to select or upload a new image.


Replacing an Image Globally from the Files Section

Please note, there are no UNDO or revision options available for this method so use with caution.

Occasionally you may need to replace an image you have uploaded previously, such as if a logo has changed. See the Drupal 7 global image replacement instructions and the Drupal 8/9+ global image replacement instructions.

Replacing an image globally in Drupal version 7

Go to the "Files" section of your site:

Find the image you want to replace, either by scrolling, or filtering based on the file properties, then click the "Edit" link on the right:

Edit a file

Once you are on the Edit page, click on the "Replace File" box, which will work similar to when you upload an image:

Replace file box

If you do not want the original image available at all, you can overwrite the file name with your new image by checking the "Keep original filename" box shown below:

Keep original file name checked box

Click the "Save" button at the bottom and your new image version will be live on your site.


Replacing an image globally in Drupal version 8/9+

Go to the "Media" section of your site by clicking the "All media" link in the top "Shortcuts" menu and click the pencil icon at the top right of the image you need to replace:

Media edit pencil icon


Scroll down until you see the "Remove" button just below the crop options for that image:

Remove button

 Then insert your image using the "Choose file" inserter as if you were inserting the image for the first time:

Choose file button

Fill out the Alt text for the image and then scroll to the bottom of the page and click the "Save" button to update your image on all of your content.

Save and Delete buttons

As a reminder, there are no UNDO or revision options available for this replacement method so make sure any file you are replacing has been backed up before you choose this replacement option.


Edit Image Properties

  • To adjust the properties of a photo you can click the left-hand image icon in the Content Editor box:


Menu bar, edit image button highlighted
  • Or, you can right-click on the image, then select the Images Properties option:


Screen shot of the right click menu for an image

From the Image Properties pop-up box you can change the image size, padding, and alignment.

  • To adjust the size of the photo, click on the Width field and type in the pixel width you want the photo to appear.
  • To the right of the Width and Height boxes is a lock ( Screen shot of the image lock icon ). When it is locked (right lock icon), the height will adjust automatically in proportion to any change in the width.
    NOTE: If the lock is unlocked, the width will adjust independently of the height and can cause the image to be distorted.
  • If you need to reset the image size, click on the circle with an arrow ( Screen shot of the image reset icon ) located to the right of the lock.
  • Padding (HSpace and VSpace) adds extra space around the images so that the text and other items are not touching or too close to an image.
  • 8 is a commonly used number for the HSpace, but anything between 5 - 10 px (pixels) will work for the HSpace, although some situations may need more or less, depending on the content.
  • 8 is also a commonly used number for the VSpace, but again, anything between 5 - 10 px will work, although on rare occasions you may find it necessary to use 0-2 px for the VSpace.
  • The last Image Property option is Alignment. Alignment allows you to wrap the text and other objects around the photo and have the image aligned to the left or right of the page.
  • If you'd like the image to stand alone (not included with paragraph text), leave the alignment to the default setting of <not set>.
  • If you'd like the image to align left or right with the text wrapping around it, choose either left or right from the Alignment drop-down.
    NOTE: Make sure that the image is at the very beginning of your paragraph to ensure that it will allow the text to wrap properly.
  • Click the OK button to commit the changes.

Additional information on how to format and resize images can be found on the Non-Web Tools page.

Upload Multiple Images

On the Add File page, click the Archive link located at the top right of the page under the UPLOAD tab.


Screen shot of the Archive link



Screen shot of the uploader for multiple files
  • Click on the Browse button and find the compressed file folder that you want to add to your site.
    NOTE: The only compressed file formats that can currently be uploaded are .zip, .tar, . tgz, .gz, and .bz2.
  • The best practice is to only have just the files you want to upload in your compressed file. Although, should you need to single out a specific type of file to upload you can do so in the Pattern text field box. Type .* followed by the file type you want to batch upload.  .*jpg for example, would cause only the jpg images to be batch uploaded. However, it is strongly recommended that your compressed folder contain only the files you want to batch upload as it will make the process much easier for you.
  • After clicking the Submit button on the Archive upload page, it will process your compressed folder file and upload it to your site. It will automatically take you to the main Content page and a green banner will appear at the top of the page with a successful upload message. In the example below the message is: Extracted and added 3 new files.


Screen shot of the Uploaded message

Changes Multiple Images

  • Occasionally you may need to make updates to several images at the same time. 
  • From the Files page, you can check the boxes to the left of the images that need updating.


Screen shot of multiple files selected
  • Select the relevant choice from the UPDATE OPTIONS dropdown menu. 
  • The most commonly used choice is the Delete selected files option which will, as it states, delete the files. 
    NOTE: There is no undo button for these updates so make sure you really want to choose that update option.


Screen shot of the file options
  • You are very unlikely to use any of the other three options, and unless you know what you are doing, it is not recommended to use them.