The document discusses the importance of visuals like images and infographics for clear and impactful communication. It notes that images are processed much faster than text, and people are more likely to read and remember information when it includes visual elements. The document provides best practices for using images, such as following the rule of thirds for composition. It also discusses tools for making infographics and images, including free resources, and tips for optimizing images for search engines.

1. Inspiration
Seeing is believing
Why images hold the key to high
impact communications
Credibility
October 2013
Helen McInnes
Timing

2. Agenda

Why are visuals critical for clear & concise
communications?
Inspiration

How can you create impactful images &
infographics?

What shareability & findability tricks can
you use?

What free (or cheap) resources are
available?
Credibility
Timing
2

3. The customer journey…
A
I
D
A
wareness
nterest
esire
ction
>
“I hear and I forget.
I see and I remember.
I do, I understand.”
Confucius

4. We risk information overload…
…every day
…100,500 words
(or 34 gigabytes of data) are consumed by people
on average outside of work
Bohn, R. & Short, J. (2012). Measuring Consumer Information, International Journal of Communication, Vol. 6
4

5. We are time poor…
We are time poor…
On average users only read
28%
of words on the web per visit
Nielsen, J. (2008). How Little Do Users Read?
5

6. Images are instant…
1/10 of a second to
interpret an image…text takes time
Semetko, H. & Scammell, M. (2012). The SAFE Handbook of Political Communication, SAGE Publications
6

7. Images encourage us to act…
People are ~80% more likely to read articles with images
and…
 Believe
[1]
67% of people were persuaded by a presentation with
images vs 50% for one without. [2]

Remember
Recall increases from 20% to 80% by adding images
to text. [3]

Understand
People who following instructions with images
perform 323% better than those with just text. [4]
100bn images are made available online each year
[1] Green, R. (1989). The Persuasive Properties of Color, Marketing Communications
[2] McCabe, D. & Castel, A. (2008). Seeing is believing. The effect of brain images on judgments of scientific reasoning, Cognition
[3] Lester, P. M. (2006). Syntactic Theory of Visual Communication
[4] Levie, W. J. & Lentz, R. (1982). Effects of text illustrations: A review of research, Educational Communication and Technology
7

8. The image era…
 People are most likely to
engage with branded content
on social media that contains:
- Pictures (44%)
- Status updates (40%)
- Videos (37%) Source: Peformics
 Use a combination of photos,
infographics, “pull quotes
images”, snackable image bites
& graphs
8

9. Best practices when using images

The rule of thirds
Divide the image into thirds using imaginary lines. Place important elements
of your composition (e.g. a person’s eyes or product) where these lines
intersect. We call these the ‘points of power’.

Use Lines
Patterns, lighting and lines that'll help to take your
viewers to the point of power where you've placed your key feature.

Use light
Get up early, or stay out late, to see
how natural light picks out
different in a scene.
9

10. Get good at visual storytelling

Photo carousels on website
homepage
Encourage people to visit parts of your
site they might never reach

Scroll-through photo stories in
online newspapers/magazines
Are impactful and increase clickthroughs to your site

Snackable image stories
Are impactful and increase clickthroughs to your site
10

11. Infographics…

Provide context and not just a sound-bite
stat
Enable people to quickly….

Gain a holistic understanding of a topic

Form their own opinions
….this relationship with the information
builds trust.
11

12. Headline roundups…
Adding value like this…
Can help drive this…
Consolidate multiple
content or data points
into one image while
creating a shareable
photo for social.
12

13. Use customisable templates…
1. Write your own
title.
2. Change the
image and
group all
elements
3. Right click the
image and
select “Save as
picture.”
4. Post the image
file to social.
Title of content you’re
sharing goes here
13

14. Use customisable templates…
Title of content you’re sharing
goes here
14

15. Use customisable templates…
Title of content you’re
sharing goes here
15

16. Quotes…
Though we may come from
different countries and speak
in different tongues, our
hearts beat as one.
Albus Dumbledore
16

17. Snackable content…
Your headline here
Your story headline
goes here. Make it
short and sweet!
Your story headline
goes here. Make it
short and sweet!
Your story headline
goes here. Make it
short and sweet!
Your story headline
goes here. Make it
short and sweet!
Your story headline goes here. Make it short
and sweet!
17

18. Content curation…

Use a bitly bundle that includes
clickable images, text, maps and
video on one page:
- Screen shot of & link to a tweet
- Preview of a Flickr photo
- Embedded YouTube video
- Foursquare checkin map (useful for
events)
…and an overall description and
commentary for each of the links

Bitly:
- Tracks clicks for each link & url
sources for the bundle
- Enables people to comment
using Disqus on the bundle page
18

19. Charts…
Remove backgrounds, borders, duplicate labels,
special effects, bold text
 Reduce colours, lighten or remove lines, lighten
secondary data labels
 Remove Y-axis labels and label the bars directly

Before
After
19

20. Make images available on your website
Encourage widespread use

Feel free to use this image for
your page or blog post as long as
you include an image credit with
a clickable (hyperlinked) and
followed link to <a
href=”http://yourdomain.com/”
>yourdomain</a>

Share on other social sites
(Flickr, Picassa)
20

21. SEO…
Images should have meaningful filenames
images.site.com/hotelname-street-london-uk.jpg
(include location if relevant)
NOT 112354_main.jpg
Tips:
 Include keyword in your
file name, but don’t overdo it
 Use hyphens to split words;
avoid underscores/other signs
(e.g. + ; /)
 Go for a shorter name
(4-5 words at max)
21

22. On-page optimisation
Alt tags
 Provide a description to help search engines establish the content
or subject of your image:
<img src=”where your image is saved” alt=”Target keyword
(product name) and a short description”/>
XML Sitemaps
 Provide a caption, title, geo location and license for each image
 The tag that tells Google everything about your
image <image:image> as well as the image ULR
tag <image:loc> are both required. In addition, you can add more
tags such as geo or caption tags and more. (See Google’s Image
Sitemaps page).
22

23. Separate image sitemap


A range of tools will generate
a sitemap for you
If you run a WordPress site
you can install a plug-in (e.g.
Google XML Sitemap for
Images) which will create the
specialised Image sitemap for
you, e.g.
<?xml version=”1.0″ encoding=”UTF-8″?>
<urlset
xmlns=”http://www.sitemaps.org/schema
s/sitemap/0.9″
xmlns:image=”http://www.google.com/sc
hemas/sitemap-image/1.1″>
<url>
<loc>http://yourdomain.com/page.html</
loc>
<image:image>
<image:loc>http://yourdomain.com/imag
ename1.jpg</image:loc>
</image:image>
23
23

24. Site speed
Google assesses site speed in its
ranking algorithm
 Amazon research shows every 100 ms
increase in page load time
decreased sales by 1%

Tips
1. Reduce file sizes by compressing images
2. Use intelligent caching and delivery acceleration (e.g. edge caching)
3. Use a dynamic imaging solution (serve a compressed picture at 85%
quality for a PC, but at 60% quality for smartphones)
4. Ideally images should be hosted under a cookieless domain.
Cookies are sed to maintain session state, etc. It is unnecessary for them to be sent
with every image request as it needlessly slows down the user's experience. This is
particularly important for mobile users.
24

25. Googlebots

Upload good quality, low size images
Don’t upload images and then
scale them by setting the width
and height in HTML source code as it will waste your bandwidth.

Ensure large images are indexed rather than small search result
thumbnails
Sniff the UserAgent string and serve it the large image URL

Find out whether your images have been indexed by doing a site
search (site: yourdomain) in google.com
If you can’t see your images:
 Check every image has its size dimension
(width and height) defined in the HTML
 Do the same for the ‘Alt tag’
 Check your robots file to see if the image
sub-directory as well as the relevant page
isn’t blocked from crawling
25

26. Free (and cheap) resources
Infographics
 Piktochart.com
Do-it-yourself infographics for
free (or at relatively little cost)
Images
 Shutterstock
Great low cost image
subscription service. Sign up for
a free photo a month.
 Bigstock
Great low cost image
subscription service. Sign up for
a free photo a month or free
trial.
 Creative Commons
Search engine which you can
use to find royalty free content
from across the web.
 Smart Photo Stock
Collection of royalty free
images for bloggers by bloggers
Editing photos

Photoshop, Gimp or Tinypng
Checking your site speed

Pingdom

Google Site Speed
26

27. Stay in touch
Find more useful tips at:
www.slideshare.net/HelenMcI2
www.scribd.com/HelenMcI
Connect with me at:
uk.linkedin.com/in/helenmcinnes
@HelenMcI
Thanks for your time…
27

28. Inspiration
Seeing is believing
Why images & infographics hold the
key to high impact communications
Credibility
October 2013
Helen McInnes
Timing