Insert an Image Last Updated November 2025 If you have any issues see the image editing and troubleshooting guide. Always review your content on different devices and screen sizes and follow general best practices. On this page How to Prepare the Image Before Uploading Add an Image to a Body Field Adjust the Caption, Image Size or Alignment Making an Image a Link How to Prepare the Image before Uploading For images larger than 1MB please always adjust the image dimensions, following the recommendation in the instructions, and adjust the pixel density to 72 DPI, before you upload them. In the unlikely event that your image is not optimized by the website, as described the Automated Optimization section below, for example when used in the Body field with the Default Display Size, you must pre-optimize it. Consider the following: File Byte Size Image Dimensions Pixel Density Image File Types Automated Optimization File Byte Size While the system allows you to upload up to 10MB, please don’t. Please re-size large images before uploading them. The stated allowed upload size is much greater than needed for images. We allow up to 10MB to accommodate document uploads. The web is not print and monitors do not require the density of pixels that print does. People are visiting our websites on their phones and standard size monitor screens. There’s no reason to have images larger than 1MB, even if you have added them to a Full-width Section. Typical file sizes should be under 500KB. Fortunately, our websites do some automated optimization, which you can read about below. This should mean, all you really need to do before uploading an image is to re-save it with the recommended pixel dimensions and 72 DPI pixel density. Image Dimensions Follow the pixel size recommendations in the Content Block Type instructions. The largest recommended pixel width on any of our sites is for Heros, which is 3600px wide. Which should result in a good looking image, even in a a Full-width Section on a high density monitor. Do not put more than a few images this size on a single page. 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. Image File Types Allowed types: png gif jpg jpeg. PNG is not recommended and must be pre-optimized. In depth information about file types. Automated Optimization Upload the largest recommended pixel size and the website will deliver smaller versions, especially on smaller screens. The system will deliver smaller image derivatives when viewed on smaller screens. For most image fields and images in the Body field, the website will re-optimizes the images and turn them into WebP file format. It will also deliver different sized versions of your image on different device types. For example, a hero on a high density monitor will be double the size of a regular monitor and on desktop sized screen it will have a much larger pixel size than on a mobile phone. We use a <picture> element in HTML to know which size image will display for your visitor. The instructions usually advise uploading an image that is 2x larger than we are currently using. So, if we ever increase the size the images will not have to be re-added. 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. Please optimize them before uploading them! When the percentage options are used in Sections that are greater than 50% the container width, the images will display at the designated percentage size. The image will fill the width of narrower Sections 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. Making an Image a Link Please always use the Image Link Content Block in Layout Builder to make an image a link. Please do not use the option to make the image a link available in the Body field. Unfortunately, it may cause problems with device responsiveness and display size.
