CAES Web Style Guide
Working with images
Use this guide for best practices for a wide range of Web design concepts. Follow the links to supporting documents and additional links that will help prepare content for your website.
- Use ALT text on images
- Get permission to use someone's likeness
- Know your legal obligations
- Stay relevant
- Create albums and photo galleries
- Resize images for optimal load times
- Be consistent
- Publishing infographics
All images that are critical to the presentation of information on your site must have alternative text provided. This feature is commonly called "ALT text" or "ALT tags." ALT text is used to describe a visual element for visitors who may not be able to see the item for a number of reasons, ranging from technical difficulties (images won't load or images missing) to disabilities (low vision or blindness).
Provide textual content for an image in the context of the Web page. For instance, if you were to include an image of a person digging in the garden in support of how to take a soil sample, your text might not be "person digging in the garden" but "take a soil sample directly from your garden." The text puts the image in the context of the page.
Be succinct. You do not need to add any additional descriptive words to indicate that you are describing a photo or image. For instance, you don't write "photo of" or "photo:" as a start for your alt text, instead just write a description:
- GOOD (succinct): 4-H students demonstrating cooking skills
- BAD (extra wording): Photo of 4-H students demonstrating cooking skills
Contain any text included in the image that is critical to understanding the written text in the image. For instance, for our CAES and Extension logos, the alt text reads identical to the logo text. In a different case, if you were to use a photograph of a person with something written on their t-shirt, unless the writing was critical to the photo, you wouldn't include it.
Consider the image's added value. If the image on your page is NOT critical to understanding the content and is used strictly for decoration, it is permissible to create a blank alt tag. In this case, you would still need to enter a single blank space. This would most often apply for images that are included as flourishes on the page, like clip art.
Do your best. It isn't necessary to write a paragraph to describe an image but do your best to describe it in a way that makes the content valuable. Imagine what you would be missing if you couldn't see the image, and go from there.
For any image that you publish of a person it is a good practice to get permission to use that photograph of them. In some cases this permission should be in writing using a photo/video release or talent release form. At minimum, it is a trait of a responsible digital media publisher to ask permission and notify people when you publish their pictures. It's also just really good etiquette.
If you're interested in learning more about what sorts of pictures would need a person's permission, check out this discussion on when to use a release form.
If you are publishing photographs of people in your community, keep in touch and be responsive if there are any negative responses to photographs you publish. Also be sensitive to anyone who may not want his or her likeness or his or her child's likeness online.
So, you've found a really great image online that really helps you to illustrate the article that you are using. You may be tempted to use it, but stop before you do. Unless you have taken the photograph yourself, created the graphic, or hired or paid someone to do either for you — you will need to be sure that it is yours to use.
The University System of Georgia has an excellent resource on their website regarding Fair Use. See the USG Fair Use Checklist to determine if a resource you wish to use is permissible.
Depending on where you find an image, a simple, short message to the owner (or website owner) is a good starting point for getting permission. There may be specific stipulations about how you can use it, be wise on how you may need to give the photographer credit for their image (in a byline, caption, etc.)
Check out Creative Commons to learn about a modern movement for sharing media online. If a person deems their images usable under a Creative Commons license, it may be fine for you to use it, but again check for stipulations regarding original artist credit, derivatives, re-distribution, etc.
Use images that support your message, and avoid visuals that may distract from your message. Images that blink and move often clutter up your page without adding any additional value. Trade these for images that will be much more impactful and less distracting for the message you are trying to send.
If you would like to include a photo gallery of an event on your website, consider using a third-party tool like Photobucket, Picasa, or SmugMug to host your photo set. Depending on the degree to which you'd like the images to be publicly available, you may find the restrictions of Facebook photo albums perfect or too constricting.
Large images take up a lot of bandwidth and can slow down the amount of time it takes for your page to load.
Resize your images to smaller sizes (no larger than 570px) for inclusion in your Web content. If you'd like to include a larger image for detail, link to it from the smaller image in your content.
Formatting images can be accomplished through image editing software like Photoshop or PicMonkey.
If you are promoting an event or issue across different websites and other means, use similar graphics to help visitors know that your Web content supports or matches content that they may have seen elsewhere. For instance, if you have a special banner for an event that you are including on flyers, reuse the same image on the Web page that hosts details for the event.
Infographics are a fantastic way to present ideas in a visually compelling format. Keep in mind that if infographics are created and published as an image, it will still need alternate text. Consider creating a companion Web page to your image that includes all of the text in plain-text form. Not only will this serve as an accessible alternative to your image, but it will also help your content to be indexed by search engines.