Images on the web have a lot of uses. They can help provide illustrate complex problems, provide examples of locations, and help a student identify an advisor. It’s important to use images correctly and understand how they are accessed in a browser.
▶Watch video “Adding Images” (1:51)
When we use images on a webpage, we have to remember that users may experience that image differently. Unlike a magazine or newspaper that is always printed at the same size, images on the web can vary in size based on a device’s screen size. A user may also be visually impaired or choose not to load images at all to save on mobile data. Our images can still be accessible to everyone.
Images can also help with search engine optimization (SEO). Google’s image search uses data from the image and surrounding text when deciding what images to display to a user.
There are two main parts of an image related to accessibility and SEO: the image’s filename and the ‘alt’ attribute.
The filename is what the image is named in the file browser. Best practice is to use lower case, descriptive text separated by hyphens. Using spaces instead of hyphens can cause errors that make the image not display at all.
For example: ‘top-bar-beehive.jpg’ instead of ‘bee screenshot 42x93.jpg’.
The ‘alt’ attribute for an image is the same text that you put in the ‘Image Description’ field when you add an image to a page. That text describes the image. It is used by screen readers for the visually impaired and will display if the image does not load. The ‘alt’ text should be brief (think about how you would describe the image to someone over the phone).
Here's an example of the HTML code for an image with a poor filename (the “src”) and descriptive text (the “alt”):
<img src="images/12345676543234543.jpg" alt="picture" />
It’s hard to tell what this image is, and all that a screen reader or search engine has for context is the word ‘picture’.
This example is much better:
<img src="images/top-bar-beehive.jpg" alt="a top-bar hive" />
Here, if the image does not load or a user is using a screen reader, they will be able to tell this is an image of a top-bar beehive. Search engines like Google are also better able to tell what this image is based on the filename and descriptive text. This image is much more likely to show up for a user searching for top-bar beehives.
Finally, best practice is to not use images with a lot of text. That text may be hard to see for users on smaller devices, and is not nearly as accessible or SEO friendly as plain text. If your image does include some text, such as the Nebraska Extension logo, be sure to include that text in the image description.
If you have ideas for videos or articles you would like to see, please email Keith McGuffey at kmcguffey2@unl.edu. More video tutorials can be found on the Nebraska Extension County Websites Media Hub channel.
###
Site Bytes is a regular column in Nebraska Extension – Keeping UP that provides quick tips for enhancing your county website. Written by Keith McGuffey, IANR Media Web Specialist.