The elements of online communication 3: images

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

About Clive Shepherd

Clive Shepherd has written 243 post in this blog.

Clive is a consultant specialising in the application of technology to learning and business communications. He was previously Director of Training and Creative Services for a multinational corporation and co-founder of a major multimedia development company. For four years he was chair of the eLearning Network.

Download Our Free eBooks

Onlignment ebook link image

Leave a Reply