UT Shield

College of Fine Arts Drupal Instruction

University of Texas At Austin

Insert an Image

If you have any issues see the image editing and troubleshooting guide. Always review your content on different devices and screen sizes.

On this page

 Best Practices for Images in Drupal

Please be aware of the following:

File Size

While the system allows you to upload up to 8MB, please don’t. Please pre-optimize your images. Never upload any images larger than 1MB. Try to keep image file sizes under 500KB. (To accommodate document uploads, the stated allowed upload size is much greater than needed for images.)

Automated Optimization

Drupal re-optimizes the images for all devices. Upload the largest recommended pixel size and it will deliver smaller versions, especially on smaller screens. The system will deliver smaller image derivatives when viewed on smaller screens.

Image Dimensions

Follow the pixel size recommendations next to each Content Block Type demonstration on your Content Editor Guide or in the inline instructions. The largest recommended pixel width on any of our sites is for Heros, which is 2280px wide.  Also, pay attention to the maximum recommended display width for the type of Content Block and do not insert it into a Section or Column that is larger than recommended.

Pixel Density

Images for the web should be saved at 72 pixels per inch (PPI). To ensure your images will look good on high density retina screens the recommended dimensions are greater than the area in which you will place the image.

Please use the Image Link Content Block.

Image File Types

Allowed types: png gif jpg jpeg. PNG is not recommended and must be pre-optimized. In depth information about file types.

Add an Image to a Body Field

Follow the instructions to open the Media Library interface to add media on a webpage in a Body field then return to this page to complete inserting the image.

  • While the system allows you to upload up to 8MB, please don’t. Please pre-optimize your images. Never upload anything larger than 1MB.
  • Enter the required alternative text description for you image.
  • Click the “Insert Selected” or “Save and Insert” button.

Adjust the Caption, Image Size or Alignment

Once the image is inserted into the Rich Text Editor, click it and you will be presented with options to:

Options for adjusting the display caption, link, size, and alignment

Alignment Options

If you use an alignment options, please read more about floating an image, especially since you may need to “clear the float” when you don’t want content to continue to align left or right, which may be particularly important on different sized screens.

Customize the Alternate Text

It is difficult to imagine a circumstance when one instance of an image would need a different alternative description than another. However, if this edge case should occur, there is an option to alter the alternate text that was entered when the file was uploaded to the Media Library. If you want to change the alternate text for all instances of the image, it is better to update the field in the Media Library. Even if there is only one instance.

Display Size Dropdown

Media Options

Image Sizes

“Default” displays the image at its uploaded size or, if it is larger than the column, at the full-width of the column. Percentage options can be used in columns that are greater than 50% the container width.  The images will display as full width in smaller columns and on small screens. As the window gets smaller the images fill a greater percentage so that they remain comprehensible.

Caption

Click the Toggle Caption on button and type in the area. Your text in the caption can be styled and formatted.

Please do not use the option to make the image a link. Unfortunately, may cause problems with device responsiveness and display size. Instead, please use the Image Link Content Block type in Layout Builder.

×