Overview
In this guide, we review some best practices for using images on your website in Dornsife WordPress.
Finding images
You can find an abundance of images, including photos of campus and stock photos (both free and paid), by referring to the following image libraries: https://dornsife.usc.edu/website/image-libraries/.
Image component guidance
This guide focuses on general image guidelines. For practical details about which components to use when adding images to WordPress, refer to the following guide:
Image resizing and editing
Why do images need to be a certain size or aspect ratio?
A few components, such as Rich Text, allow you to use images in a range of sizes. Most other components, however, have specific image size guidelines to ensure that the image looks its best within the component's design. For example, Contact Block requires a square image, while Signup Form requires a horizontal or landscape-oriented image with a 3:2 aspect ratio (an aspect ratio is the width to height proportion of the image).
If the image you upload does not meet the component's image size guidelines, WordPress will still show the image but may automatically crop or resize it in an unpredictable way.
Can I use WordPress to resize my images?
We recommend resizing or cropping your images to the size guidelines before you upload them, using a non-WordPress program. While WordPress does have a built-in image editor, it can be inconsistent in how it performs or applies edits.
What program can I use to resize or edit my images?
Resizing, cropping, and basic color/lighting adjustments
The following options are already installed on your computer and their toolbars are not overly complicated:
More advanced editing
For more advanced editing, you can consider one of the following options:
- Adobe Creative Cloud: You can purchase an Adobe CC license and then install Photoshop or Illustrator.
- Adobe Express: Adobe Express has a free version, no purchase needed. You will need to create a free Adobe account with your USC email address.
- Canva: To purchase a Canva license, you must first submit a request to DTS. Once we review and confirm that no confidential data will be stored in Canva, we will approve it for p-card purchase. (Canva does have a free version but, as it has not been vetted by DTS, you shouldn't use non-public data with it.)
You can also contact webproject@dornsife.usc.edu for image assistance.
Best practices and considerations
Add alt text (descriptions) to images
This ensures that images are still accessible to website visitors who have low vision or use screen readers, and that there is a fallback if the image doesn't load due to a poor Internet connection or other issue. Refer to our guide for examples and instructions:
Avoid putting text in images when possible
When possible, use the Wordpress editor or the text fields within the component to type your text. Do not insert important or essential text into the image itself. Keeping the text distinct from the image ensures the following:
- Website text can be automatically translated to other languages more easily
- The text is still available if the image fails to load
- Search engines can crawl ("read") your website content and make it findable
You can add the text separately from the image in many components. Some components keep the layout simple, such as Rich Text, while others such as Signup Form and Full Width Image + Text can help the text stand out visually.
Make sure images have sufficient contrast
This is particularly important for website visitors with any type of color blindness. For instance, graphs and maps often rely on color coding to convey information, so you may want to check that such images are still understandable if a viewer has limited color perception. If you have text in your image, having sufficient contrast between the text and the image is important for readability.
A quick way to test contrast without being distracted by color is to desaturate an image using Photos on a Windows PC or Preview on a Mac, or print out the image in black and white.
The example below depicts the USC campus map, with a path drawn to show a visitor how to navigate from Kaprielian Hall to Stauffer Hall. The original image in the first row lacks sufficient contrast, while the original image in the second row has higher contrast and is still readable when not all colors are available.
Deuteranopia and protanomaly images were simulated using the Colorblindly extension for Chrome.