Insert an Image Last Updated April 2025 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 Add an Image to a Body Field Adjust the Caption, Image Size or Alignment Best Practices for Images in Drupal Please be aware of the following: File Size Automated Optimization Image Dimensions Pixel Density Making an Image a Link Image File Types 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. Making an Image a Link 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: align the image left, right or center, customize the alternate text, select a display size, add a caption, link (please do not use this feature) 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 “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. Make it a Link 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.
