The Importance of Images on a Website

Images matter because…

Studies show that people remember 80% what they see and only 20% what they read. In fact, there’s research that suggests that 65% of people are visual learners. MIT also found that the human brain can process images in as little as 13 milliseconds. These and many other statistics favor the idea that images are powerful means of communication. Perhaps, their most important function is that they remove language barriers, as they are easily understood by everyone in the world. 

On the Internet, images are used for all kinds of reasons: to enhance websites, to illustrate stories, in ad displays, to present products or services, as stand-alone “a picture is worth a thousand words” meaning-rich tools, and sure, on social media.

3.2 billion images are shared online every day, according to Brandwatch, many of which “mention” brands without the use of text.  So how do businesses track images featuring their brands? Through “visual listening,” which is essential media monitoring for images. It uses image recognition technology to uncover visual mentions (usually company logos) of a brand and not only watermarks. Visual listening can identify logos on actual objects, like a store sign, or a label on a product. For brands, this can determine social media mentions in all kinds of contexts, including discovering brand advocates, finding out how people are using a product, identifying misuse of the logo, and the list goes on. Brandwatch Image Insights gives a fair idea of how brands can use visual listening to monitor social media.

On top of it all, “Generation Y prefers a picture-based method of communicating information rather than a text-based method,” according to a 2010 paper by Soussan Djamasbia, Marisa Siegelb, and Tom Tullisb titled Generation Y, web design, and eye tracking. Generation Y, the Millennials, grew up with technology and the internet and they will soon take over as the most significant segment of consumers, surpassing the baby boomers and Generation X. 

 

Top Reasons to Use Images on Your Website

Better user experience: When it comes to websites, images matter because their role is to capture the attention of the visitor. They can convey complex messages in the blink of an eye. Looking at the image of a hotel room, the site visitor can see the décor of the room and some of its amenities without the need of reading lengthy descriptions immediately.

Relevant images – instead of “filler” images that only have the purpose to look pretty – enhance the user experience. They deliver a contextual message, which answers the need for information. Naturally, when guests visit the website of a hotel, they are looking for information and images deliver it quickly and explicitly. An image gallery optimized for stress-free browsing is another UX plus.

Increase dwell time: the time users spend on a website is a user engagement signal for Google and a search ranking factor.

“Basically, Google wants to find unicorns – pages that have extraordinary user engagement metrics like organic search click-through rate (CTR), dwell time, bounce rate, and conversion rate – and reward that content with higher organic search rankings,“ Larry Kim of Wordstream explains.

Images are an integral part of the content strategy of any website. The best images are set above the fold and act as both eye candy and informational tools. They should relate directly to the text of the page, and ideally, they should be original pictures. Stay away from stock clichés as much as you can.

Improve on-site SEO: Provided that the image used matches the text, it will rank better in the image search section of the search engines. And image search matters a lot for traffic to your site. According to research conducted by MOZ and Jumpshot, Google Images counts for 26.79% of US searches, surpassing YouTube.com 3.71% and other Google properties.

Image search matters a lot for traffic to websites

SEO for Images

Although Google has already developed image-recognition algorithms and holds several patents for systems and methods for image recognition, optimizing your images for SEO is still a good practice. As the chart above shows, image search can be a great source of traffic. Here are some tips to help boost your rankings in image search:

Always choose an image that matches your text

Image recognition algorithms identify filler images, as well as stock photography, and they will not rank. To see how Google recognizes your image without the need for text, just perform a Google image search and upload a picture instead of typing keywords. In the following example, I used an original image from Mamaison Hotels & Residences. As you can see, Google identifies what the image is, but doesn’t find duplicates. This is good.

Always choose an image that matches your text

In the second example, I used a generic stock photo and gave it a random file name, to see if Google can identify it and find duplicates. As you can see, Google knows exactly what the image is about, and the first result is a duplicate. This is bad because, as you notice, Google only shows one duplicate for “visually similar images” – most likely not the one from the original source. When you click to see “other sizes of this image” you will discover hundreds of results, merely for the purpose to enable users to find the same image in different sizes. This means that hundreds of sites already mirrored that image to illustrate content one way or another.  And the rules that apply to text apply for images too: Google doesn’t like duplicate content. So, stock images do nothing for SEO.

Google doesn’t like duplicate content - stock images do nothing for SEO

Use smart file names

If you manage to have an original image that pertains to your text, it’s not enough to upload it with a random file name. Although Google can recognize what it is, the best SEO practice is to give it a relevant, smart file name. So, instead of uploading an image straight from your camera, with a file name like IMG_20180205_163530, rename it with keywords that describe its subject, for example, hotel-name-main-lobby.jpg and without stop words (like of, and, the).

Note in the file naming example above the use of a hyphen (-) instead of underscore (_) – that’s because it is a best practice recommendation from Google for URLs and for all kinds of files. The hyphen has the role of separating words, so it makes sense for Google to prefer it.

 

Use proper alt attributes and title attributes

After you upload the images on your website, you must “describe” them. There are two types of attributes used for SEO and user experience:

  • Alt attribute, which describes the image for the search engines accurately. As you noticed in the previous paragraphs, Google can identify what the image is about, but it cannot identify where it was captured. The alt tag serves to complete the information. For example, if you have an image of a hotel room, the alt attribute would be something like: “The Presidential Room at Hotel X.”
    Use natural language when writing your alt attribute, because this is also displayed by screen readers and used by browsers for the visually impaired. Considering this segment of internet users, always end the text in your alt attribute with a full stop (dot).
    The advice offered by John Mueller, Senior Webmaster Trends Analyst at Google in 2008, before the image recognition revolution, is still valid, so consider it when you write your alt attributes (erroneously also called alt tags):
    “Feel free to supplement the “alt” attribute with “title” and other attributes if they provide value to your users!
    So, for example, if you have an image of a puppy (these seem popular at the moment :-)) playing with a ball, you could use something like “My puppy Betsy playing with a bowling ball” as the alt-attribute for the image. If you also have a link around the image, pointing a large version of the same photo, you could use “View this image in high-resolution” as the title attribute for the link.”
  • Title attribute, as you noticed in the previous paragraph, is intended as a call to action, and it is used mainly when the image hyperlinks to a different page. It displays when the mouse hovers over the image (only in case of a hyperlink). So far, there’s no proof that Google uses title attributes for rankings. But things may change.

 

Make use of captions

Captions matter and there’s enough research to support this. According to Kissmetrics:

“Captions under images are read on average 300% more than the body copy itself, so not using them, or not using them correctly, means missing out on an opportunity to engage a huge number of potential readers. (For images above a headline, the headline itself can serve as a caption.)”

Kissmetrics also recommends that you craft your captions with the same care you craft your headlines.

Optimize your images for web use

Besides naming the file right and filling in the proper alt and title attributes, you should also optimize the images for fast loading because page speed is a ranking factor, and because users tend to leave websites that load slowly. So, decrease the file size of your images by saving them for the web with Adobe Photoshop, or using an image compressor like TinyJPG, TinyPNG, toolur, Compressor.io, and others, and use responsive images. Here is a useful tutorial that shows how to create responsive images.

Optimize images for web use

 

Use the Open Graph protocol for better discoverability

According to the official website, the “Open Graph (OG) protocol enables any web page to become a rich object in a social graph. It is used typically on Facebook to allow any web page to have the same functionality as any other object on Facebook. “

The og:image property has some optional structured properties:

  • og:image:url – Identical to og:image.
  • og:image:secure_url – An alternate url to use if the webpage requires HTTPS.
  • og:image:type – A MIME type for this image.
  • og:image:width – The number of pixels wide.
  • og:image:height – The number of pixels high.
  • og:image:alt – A description of what is in the image (not a caption). If the page specifies an og:image it should
  • specify og:image:alt.

 

To conclude, images are useful because they trigger emotions, are easy to understand and transmit information faster than text. According to Dr. Lynell Burmark, images “go directly into long-term memory where they are indelibly etched.”

Avoid stock images, images that lack quality, and filler images, and use high-quality original pictures that represent actual places, objects, or beings. Remember that the modern Internet user spends a lot of time sharing, or resharing images, so encourage the practice by adding share buttons for social media: Facebook, Twitter, Instagram, Pinterest, and so on. Add proper descriptions with hashtags to the images designated to encourage sharing. This simplifies the process and saves time for the users while ensuring that your brand is not misrepresented.

We leave you with these facts and statistics that show just how essential images have become on social media:

  • “Users pay attention to information-carrying images that show content that’s relevant to the task at hand. And users ignore purely decorative images that don’t add real content to the page.” (Jakob Nielsen, 2010)
  • Tweets with images receive 150% more retweets and 18% more clicks than tweets without. (Buffer Social, 2016)
  • Articles with an image once every 75-100 words get double the number of shares of articles with fewer images. (Buzzsumo, 2015)
  • A large percentage (74%) use visual assets in their social media marketing, up from 71% in 2015. (Social Media Examiner, 2016)
  • Organic Facebook engagement is highest on posts with videos (13.9%) and photos (13.7%). (Locowise, 2015)
  • Vision trumps all senses: “Hear a piece of information, and three days later you’ll remember 10% of it. Add a picture, and you’ll remember 65%.” (John Medina)

 

 

 

 

No comments

No comments have been added yet.

Write a comment

Mandatory fields are marked with an asterisk (*)

You may use these HTML tags -

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>