The elements of online communication 3: images

Fourth posting in a series describing the use of various elements in online communication.

We reach the third stop on our tour of the elements that make up all our online communications with still images. What contribution can these make? Where are they less effective? How are they best delivered online?
What images are good for
Imagine how difficult it would be to convey the following without the aid of images:

  • The new office that we will all be moving to later this year.
  • Sales territories in the Indian sub-continent.
  • Welcome to our new head of HR.
  • The process to follow when troubleshooting a machine breakdown.
  • Our fall fashion collection.
  • The process of condensation.
  • The workings of the internal combustion engine.
  • Comparative sales figures over the past five years.
  • The cypress tree.
  • The structure of the Internet backbone.

Images come in a variety of forms and these all have their particular place:

  • Photographs are capable of accurately depicting real-life people, objects, places and events.
  • Illustrations, including clip-art and cartoons, will not capture people, objects, places and events as faithfully as photos, but can depict what is impossible or impractical to photograph. In their relative simplicity, they may also communicate more clearly than photos.
  • Diagrams illustrate cause and effect relationships and the relationships between the parts of something and the whole. They include timelines, organagrams, maps and flow charts.
  • Charts provide a rapidly-accessible visual representation of numerical data, highlighting trends and proportions.
  • Screen shots faithfully capture the elements of a software interface.

When images are not so suitable
As a general rule, images struggle to convey precise meaning without verbal support from either speech or text; and it goes without saying that they have little practical function when there is no strong visual aspect to the content.
Still images will be second best to animation or video when communicating movement or representing live action.
When used for purely decorative purposes, images use up valuable bandwidth and screen space without adding anything to the communication process.
Optimising images for online delivery
When displayed online, images need to be large enough to be clear but not so large as to require excessive scrolling.
The screen is not the ideal setting for highly detailed images because of the limited resolution of most screens, typically less than 100 dots per inch. Compare this with print, where resolutions start at 300 dpi and can be very mucn higher. As a general rule, highly detailed images are better made available for download or delivered in hard copy format.
Copyright laws apply as much online as in any other medium. If you use copyrighted images in your online communications without permission, then you are taking a risk.
Accessibility guidelines dictate that, when you use images online, you provide each image with an alternative textual description. This allows those users with a visual impairment to gain some benefit from your images, because screen readers can convert your textual descriptions into synthesised speech.
Combining images with other elements
Images combine well with audio or text. With audio, you have the advantage that the eye can concentrate on the image, while the verbal content is communicated aurally; with text, on the other hand, the eye has to switch back and forth.
Images do not combine well with a second visual source such as live video. If you want the user to focus on the image, then it’s best to turn the video off, at least temporarily.
How images are represented online
Online images can be held in one of a number of compressed, bit-mapped formats. With bit-mapping, the images are stored digitally as a data structure representing a rectangular grid of pixels. Each pixel in this grid is represented by a colour or greyscale value. Bit-mapped images can be contrasted with vector graphics, which describe the image as a series of geometric functions (lines, curves, etc.). Vector graphics have the advantage of being more scalable, retaining their quality however large they are displayed. Most images other than photographs are created and edited in vector format, but must be exported as a compressed bit-map for use online. Because this removes the ability for high-quality scaling, it makes sense to export the images at the maximum size at which they will be displayed online. If you leave it to the browser to do the scaling, be prepared to lose a lot of quality.
When delivering images online, you have three choices of bit-mapped image formats:

  • JPEG (Joint Photographics Experts Group) – pronounced ‘jaypeg’ and sometimes shortened to just JPG. This format is ‘lossy’ in that the more you compress the image and thus reduce file size, the greater you will lose clarity and detail. JPEG graphics can render in full colour and are ideally suited to the display of photographs.
  • GIF (Graphics Interchange Format) is ‘lossless’ in that the compression process does not involve sacrificing quality. GIF graphics are limited to 256 colours, which is fine for computer graphics with hard edges and block colours, but not so good for photos. They can also have a transparent background, which can be useful if you want to display your images in anything other than a simple rectangular arrangement.
  • PNG (Portable Network Graphics) – pronounced ‘ping’ – is another ‘lossless’ format but is not restricted in colour rendition, making it a superior format to GIF. PNGs are ideal for computer-generated graphics such as buttons, logos, diagrams and maps, but are less suited to photographs, where the resulting file size is likely to be excessive. Be a little careful, because not all online applications – or corporate forewalls – support PNG.

Previously: text, audio
Coming next: animations

Mixing media: happiness or headache?

Describes the problems that can arise when you mix verbal and visual channels.

We are fortunate in that our brain is able to focus on verbal and visual inputs simultaneously. Although these inputs are likely to be linked, i.e. the verbal input often relates directly to the visual in some way, different parts of the brain are used to process these two channels. Where we are less fortunate is that the brain finds it uncomfortable to deal with more than one verbal input or more than one visual input at a time.
As a facilitator in a web conferencing environment, we have two main ways in which we can provide verbal input – using our voice or using text on slides. We also have more than one way of communicating visually, the most common being the graphics that we display on slides and (if we’re lucky) a real-time video feed of us presenting.
Happpiness for the participant means:

  • you present using your voice, while you display a graphic;
  • you display text on the screen, keeping quiet while they read it;
  • you present using a video feed, but with no accompanying slide.

It’s headache time for the participant when:

  • you talk over a slide full of text (the participant doesn’t know whether to listen or read; because they can do the latter much faster than the former, they’ll probably tune out what you’re saying);
  • you run a video alongside a sequence of pictorial slides (not such a disaster, but chances are your video image will draw more attention than the graphics, because it’s moving).

These rules might seem common sense, but they can’t be, because they’re commonly broken. The result? Presenters communicating happily, participants with headaches. Not a formula for success.