A picture is worth a thousand words, but a picture of words is not the best way to convey information on the web. Learn why you should avoid using images for text.
For event flyers, newsletters, or other information, it might be convenient to upload an image of the document to a webpage for users to read. There are a lot of issues with this, though. Text in images...
- will not scale. If a user zooms in on the image, the text will be grainy and hard to read.
- cannot be read by screen readers or search engines. The details of your event/newsletter will not show up in a search.
- cannot be translated into another language for ESL users.
- can be harder to update than plain text, since the image will need to be edited and then re-uploaded.
- is much larger than plain text. Images will load slower than text and use more data. For users paying for data, this may mean your page is more expensive for them to view.
We know already that an image's 'alt' text should be used to describe an image. But 'alt' text should be concise, and not duplicate large chunks of text in an image.
Let's look at this example for an event flyer:
<img src="poster.jpg" alt="event flyer" />
Here we have a picture, 'poster.jpg', described an 'event flyer'. While this is all technically accurate, it's not very helpful. We can't tell what the event is, where it's held, when it occurs, any registration information, etc.
A better way to display this information would be like this:
Herbie County Fair
- May 30, 2021
- 8 a.m. - 5 p.m.
- Herbie County Fairgrounds
- Register at go.unl.edu/herbiefair
Join us for the 5th annual Herbie County Fair! Registration is required and includes a free t-shirt.
<img src="herbie-county-fair-flyer.jpg" alt="Herbie County Fair flyer. Details described above." />
Here, we can see the event details in plain text. The image's 'alt' says what the event is and lets a user know the details of this event are described somewhere else on the page in plain text. They know they aren't missing something if they cannot see the image. Also, a user searching for "Herbie County Fair Registration" is more likely to see this page since a search engine can find the details of the event in the text of the page.
At this point, we might consider not including the image of the event flyer at all. All the information a user needs is already on the page, and the image would only add to the load time of the page.
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.