By default, images, background images and document files can be added to your site.

You can either add them directly to your site by going to Content > Media (/admin/content/media), or as you create content through fields and WYSIWYG text editors.

When adding an image or file, give the file a name. This is helpful when searching and selecting Image/Files later on. This can be the same as the filename, but is independent.

Next, select a file from you computer. Below each upload field there is help text that points out any restrictions regarding file size, type.

Images

Pro Tip: For images, try to upload high-resolution, small file size images. This will ensure fast loading and great viewing experiences.

After upload, more settings will appear.

Alternative Text: It is important to provide alternative text for images to aid visually-impaired users.

Image Thumbnail: A rendered thumbnail of your uploaded image should appear. There are areas of the site that will use this image and crop it to fit the space. Click on the focus area of the image. This helps to make sure that an important part of the image isn't removed during cropping. There will also be a preview link under the thumbnail image with different image styles used on the site to make sure the focus you selected will work for the image.

Image Specifications

Section Background Image: The largest is 2000x2000px scaled and cropped. Upscaling can occur. We recommend a center focal point or no focus as the image is scaled down and positioned differently based on device size and content. Square aspect ratio images (1:1) work best for most devices sizes/content combinations.

Carousel: 2000x1125px scaled and cropped. Focal Point supported.

Card/Teaser Image: 1200x600px scaled and cropped. Focal Point supported.

Article Image: 1110x740px scaled and cropped. Articles use the Card/Teaser image style for other displays. Focal Point supported.

Square: 768x768px used for pictures currently. Focal Point supported.

Large, Medium, Small: 480px, 220px, 100px (WYSIWYG areas) - Maintains original aspect ratio and scales the largest side (horizontal, vertical) to the pixel length.

Original (WYSIWYG areas): Displays the image as uploaded to the site but will have a max width of the container element it resides in. This is also the only way to display animated .gif files.