You Can’t Write for the Web without Working with Visuals
What would the web be without images? Pretty boring, right? Consider using relevant visuals on your web pages to enhance the meaning of the copy that you have written. Here are a few important tips to follow:
- There are three main file formats for images that you can currently use on the web: GIF, JPG, and PNG. GIFs work well for icons and other graphics with large areas of simple colors, but because GIFs are limited to 256 colors, they are a poor choice for photographs. JPEG (or JPG, as they are commonly called) is a lossy format (like MP3s) that supports millions of colors and can work well for photographs. In fact, JPG is likely the default file format that your digital camera uses. Beware. The more JPGs are compressed to reduce file size, the more image quality (information) they lose. PNG is a lossless format that can support both a small range of colors, like GIFs and millions of colors in photographs, like JPGs, only without any visual quality loss (but larger file size).
- Make sure your visuals are appropriate and relevant to what the rest of the text says on the page. Don’t pick a visual just because it looked “cool” when you found it. Visuals should enhance the meaning.
- Make sure your images are good quality. JPG “artifacts” and pixelated images (caused by making a very small original image larger) look unprofessional and sloppy. A good rule of thumb is to stick with the “high” setting (60 or more) when saving JPGs.
- Beware of stretching images out of proportion if you prepare them in an image manipulation program. Don’t make your images look like they came from a distorted reflection in a fun house mirror.
- Provide captions when using multiple visuals in longer web texts. Captions will orient the reader to your reason for including the visual. Otherwise, readers have to guess your intentions.
Copyright Issues
This is a warning from the TechSoup website about using images:
“It wouldn’t be morally or legally right to take someone else’s e-book and put it on your website to attract new readers. In the same way, you can’t simply grab someone else’s graphics or photos and use them for your own means. In simple terms, doing so could be copyright infringement. You need to find out whether the image is licensed under Creative Commons or whether it’s in the public domain. If it isn’t either of these, then you could face a pretty hefty fine.
Thankfully, there are numerous websites that feature images that are either free or low cost. Here is a very small list of those sites:
Creative Commons: Images
Pixabay
Unsplash
Flickr
Pexels
Making Your Visuals Accessible
Because you have enhanced the meanings of your texts using images and visual design, you have to think about how that will impact readers with visual impairment. Although many people with disabilities use devices or software to assist them, there are still things you can do as a web writer to improve their reading experience. For instance, minimally, any images should have captions or “alt” text (alternative text) to describe the image for those that cannot see it.
It is particularly critical that any image that does rhetorical work in your web pages have an alt tag. For example, here is a photograph of Hugo the Hawk, SUNY New Paltz’s mascot. I want to include it on a web page such as this one. So, in the line marked Alt Text, I write a description of the photograph:
How to format an Alt Text
An automated assessment tool like WAVE: Web Accessibility Evaluation* can help HTML coders determine the accessibility of their web pages. Still, WAVE is only going to get you so far if you don’t understand the principles of how to design for accessibility.
For an introduction on how to make your website accessible, consult the United States’ government website Developing Accessible Web Content.*
Another source of important information about Web Accessibility is: Web Content Accessibility Guidelines (WCAG)*
Note: Also, keep in mind that videos that you may embed on your web page should have closed captions for visitors to your site who may be hard of hearing or otherwise may have trouble understanding the audio portion of the video.
Captions often make it easier for all people to understand and process videos.
*Due to technical issues, the links to these pages are not provided; however, you can easily find these pages by doing a search on the web.
One Final Point—Animated GIFs Aren’t Cool Anymore?
What’s considered cliche in the world of web writing?
Animated GIFs are cute, but they can slow down page loading times considerably. While they were immensely popular in the 1990s, today they are usually only found on MySpace pages, fan web sites, and signature lines in forum posts in some online communities. Animated GIFs do not show up on smart phones, and they are usually limited to certain interface elements.
And while we’re at it, Flash can be uncool too, especially when it’s used to create a slow-to-load, super-fancy introduction screen that does little but keep users from getting to the content they want.
