While our site's Drupal content management system and the Rivet design system allow for flexibility with processing images, it is important for content creators to follow some basics steps to ensure that images render properly on our site and provide users with the best experience possible.
Below are a few tips and best practices for preparing images for the website.
The majority of images on our site are digital photos, and most of those are JPG or PNG files.
JPG files are preferred for photos on the website, as they are usually smaller files that facilitate faster loading times on pages, and thus improve search engine optimization (SEO) and the overall user experience.
PNG files are preferred for images with graphics, and they're particularly useful for graphics with transparent backgrounds.
In some cases, SVG files may be useful for graphics that need to be scalable for different components/layouts across the site. We recommend consulting with DUX before using SVG files on pages.
PDF files are not recommended for images. In general, any PDF files on the site should be documents that have been formatted for accessibility. If you have a PDF file of an image that you would like to use on a page, you should convert it to one of the file types listed above.
Before adding an image file to the Media Library, be sure to give it a unique and easily identifiable file name. Most digital cameras and smartphones automatically generate file names that are long strings of numbers and/or letters. When dozens, or hundreds, of such files are in the Media Library, it becomes very difficult to search for and identify individual files.
As a best practice, image files should be named according to this basic structure:
descriptive-name-crop.file
The 'descriptive-name' portion of the file name should make it as easy as possible for users to identify what is portrayed in an image without actually opening the file, and the 'crop' should indicate the image ratio (more on cropping below).
For example, the sample image below is a JPG filed named as follows:
wells-exterior-south-entrance-16x9.jpg
Note: When including the image ratio in the file name, use an x between the numbers, rather than a colon.
When you add an image to the Media Library, you will see fields in the user interface for "Alternative text" and "Title." While only the first is a required field, it is best practice to fill in both.
Alt text provides a short description of an image for users who rely on accessibility tools such as screen readers. Alt text is not only essential for a smooth user experience, it is required by law on a website such as ours that is owned by a public university receiving federal funds.
Alt text should provide a visually impaired user with a clear sense of what is shown in the image, while also being as succinct as possible. When writing Alt text, keep in mind that the user will be reading it within the context of the page on which the image appears.
For example, the sample photo below might be placed on a page just below a paragraph that mentions Wells, or may include a caption identifying the building as Wells. In that case, there would be no need to repeat the building name in your alt text, since the user will already receive that information via the screen reader as it reads the page text and image caption. So appropriate alt text for the image might read as follows:
"A large limestone building with glass doors in the entranceway and a patio with several tables and a tree out front."
The image title, although not required, helps facilitate searches within the Media Library, making it easier for you or other users to find individual images. Keep titles short but descriptive, and as unique as possible. Often, the title will be very similar to the file name. For example, an appropriate title of the sample image below might be: Wells Exterior South Entrance.
Although Rivet components that include images are generally adaptive and can accommodate images of various sizes, extremely large images often do not render properly within some components, or in certain contexts. Moreover, larger images can slow the loading time of a page, negatively impacting the user experience and SEO.
A width of 600 pixels is a good standard to use when sizing your images for the website. The sample image below is 600 pixels wide and will resize nicely in various components/contexts.
Although Rivet will automatically crop an image to fit within a particular component, this doesn't always produce the best results. Often, the automatic crop may cut off a portion of an image that you feel is essential to the user.
As a best practice when you resize an image for the website, you should also crop it to the preferred aspect ratio of the component in which you'll be using it. Some of the most common aspect ratios in Rivet are as follows:
This is a Rivet Card component. The above image is cropped in a 16:9 aspect ratio, with a width of 600 pixels.
You should generally avoid presenting a single Card component with an image, as it produces a large image like this one. This is done here solely for training purposes.
Card components with images are best used as part of a Card Grid/Feed, as seen below.
This is the same image file as above, with a 16:9 aspect ratio and a width of 600 pixels. Note that here and to the right within this Card Grid/Feed the Card component has resized the image to accommodate a row with two columns.
As a best practice, you should not present the same image multiple times on a page. This is done here solely for training purposes.