Engaging images play a major role in telling the Mason story. The right photo can bring your page to life and illustrate important concepts.
When you're selecting an image, always consider where on the page it's going to go. Some photos, such as those on Home pages and at the top of landing pages, will have text on top of part of the image. Try to visualize the text placement and see if it will cover something significant. If so, look for another image.
When you've selected your image, you'll need to size it correctly and format it for use on the web through PhotoShop. If you don't, that could cause a variety of problems.
- Our sites are responsive, which means pages and components will adjust to appear correctly across all platforms. If photos aren’t sized, they might not appear as they should on all digital devices. An unsized photo can also cause the Firefox browser to malfunction.
- An unsized image can be huge in terms of file size. The larger the size, the more time your page will take to load. Slow load times lead to impatient users, and they’re likely to move on to the next site. Large files also take up a lot of space on servers.
Placing Your Photos
To place your photo, select Customize this Page at the bottom of your page. You'll see the selection of blue boxes open. Select the plus sign on the right of the blue box, which will open your component list. Select Media, which will give you another list. Select Content Image.
There are two ways to place your sized photo.
- If the image is on your desktop, you can drag and drop it into the Content Image box. Once it's there, select Upload. A thumbnail version of the image will appear.
- If the image is stored somewhere on your computer, select Choose File, which will open the file navigation for your computer. Navigate your computer to select the desired image. Once you've found it, select Upload. A thumbnail version of the image will appear.
When the image is uploaded, you'll see a box for Alternate Text, or Alt Text. This will be used by screen readers for the visually impaired and by search engines. Write a description of the action that is occurring (students walk across Mason's Fairfax Campus). Don't skip this step; it's required by the Americans with Disabilities Act. It's also an opportunity to improve our search engine optimization (SEO).
Once you've placed your photo, put in your caption. Look at the caption as an opportunity to engage with the user and convey vital information. Answer the “who, what, where, why” questions. Who are these people? What are they doing? Where are they? Why is this picture on this page?
Floating an Image
If you have a vertical or square image, you can have text appear beside the photo or wrap text around it. This is called floating, and you can float the image to the left or the right.
Go to the Float box below the caption, which defaults to None, and select Left or Right. If your subject's gaze is turned one way or the other, try to place them so they're looking into the text, not off the page. If they're looking straight ahead, either placement will work.
If you want text to flow around the image, place the photo on top of the text that will wrap around it.