Working with Images

The Strategic Use of Images in Web Design

When used effectively, images serve a purpose far beyond aesthetic appeal. They add visual interest and can authentically represent your department, center, or office, bringing its mission and activities to life for your audience.

Adding Images to Your Site

All images available for use on your site are stored in the Media Library. While images can be uploaded directly to the library, you will often upload them at the point of use. Regardless of the upload method, every image becomes part of the Media Library and can be reused across multiple areas of your site.

For instance, most content types include a Featured Image field with options to either select an existing image from your Media Library or upload a new image directly. You can also embed images within the WYSIWYG text editor when creating the main body content of your page or other materials.

When images are uploaded, the website automatically stores the original file and generates smaller or cropped versions optimized for different display contexts throughout your site.

Image Upload Form Fields

Regardless of your upload method, you will encounter a form with the following required fields:

Name

Provide a descriptive name for the image. While this field may auto-populate with the original filename, using a more descriptive, human-readable name is recommended. This practice helps content editors locate images efficiently and maintains an organized Media Library.

Alternative (Alt) Text

Adding alternative text (alt text) is a critical component of web accessibility. Alt text provides a textual description of non-text content for screen readers, search engines and situations where images fail to load. Implementing alt text also enhances your site's search engine optimization (SEO).

Image File Size, Type, Resolution and Aspect Ratio Requirements

When selecting images to upload, consider the following technical specifications and general guidelines:

• File Type: Acceptable formats include PNG, GIF, JPEG and WebP. JPEG or WebP files are the most commonly used formats.
• File Size: The maximum upload size is 15 megabytes; however, most images should not exceed 500 kilobytes to ensure optimal site performance.
• Image Resolution: Image resolution should be set at 96dpi for best viewing and smallest file size.  Do not use 300 dpi images on your website
• Image Sizes: Listed below are the recommended image sizes (in pixels) for SUpal components containing images.

Note:  There are still a few image features that are not yet supported in Drupal Canvas so there may be minor changes to this information as new capabilities are released.