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.
- Maximum Resolution: Images should be no larger than 4000 pixels wide by 2250 pixels high. While you can upload larger images, the system will automatically downscale the original to fit these dimensions, potentially compromising image quality. Extremely large files may generate upload errors.
- Minimum Resolution: While there is no technical minimum, we recommend images be at least 750 pixels wide by 750 pixels high to ensure clarity on modern high-resolution displays.
- Aspect Ratio: The appropriate aspect ratio depends on how the image will be used on your site. If your site displays images in a portrait orientation, uploading images in that same aspect ratio is ideal. However, SUpal will automatically crop images to match your configured display settings.