The Definitive Guide for Using Images on Your Website

The adage of “A picture is worth a thousand words.” still holds true. Graphics can transform an otherwise bland site into a striking and powerful communication channel for your brand. They are also the first thing that visitors notice, they help to visualize a concept, message, or product, and they also give credibility. However, there are risks with images. Keep reading to learn how to be successful in adding images to your website.

Usefulness

Adding images to your site should be used to help evoke emotion or action from your visitors, break up text for better readability, and provide a context for the content.

• Evoke Emotion - Images help to make the digital more human. When we see another person smiling or happy, we tend to feel the same way because of mirror neurons. Provide your visitors with this same reaction by including images that convey a happy state, because positive and happy experiences activate the learning process and make people more willing to try new things.
   
• Readability - A content width of 40-55 characters (or 250-350 pixels) is considered best practice because it maximizes reader comprehension and is less work for the reader. If your content is drawn-out or longer, and cannot be broken into a list, then consider including an image. 


• Context - According to the Nielsen Norman Group, users only read 28% of the text on the page if all they do is read the text. They also state the number is closer to 20% when you take into account the eyes scanning everything else on the page. Including at least one graphic per page allows visitors to quickly discern what the content is about and adds simplicity to content.

Common Image Types

Now that you know the reasons to include images, here are the file types for website image application.

.jpg – A “JPEG” is the most common form of file format for photographs because it handles thousands of colors with a reasonable file size. A drawback of using JPEGs is that they force a white background, and should not be used for images with text.
 
.png – a PNG is great for photography, images with text, and images with parts that are clear or transparent. This file type has mostly replaced GIF images as a web standard, but are often larger in size.
 
.gif – a GIF has animation capabilities. These are slowly being replaced with more modern formats like gifv, animating .svg, and videos. However, they are still great for short images with large blocks of color or placing an image over a photographic background, but are not good for photography.

Words of Caution

Avoid Copyright Infringement

Probably the most important thing to remember when adding images to your website is to ensure you legally have rights to use the photos you are adding. Images from the internet are often copyrighted, and you should understand the three categories of licenses.

• Royalty-free: the copyrighted material can be used without paying fees for each use, per each copy or volume sold or some time period of use or sales. However, “free” here is misleading, because a one-time fee could be incurred.
   
• Public Domain: the asset was either never copyrighted or the copyright has expired. These images can be used for about any purpose.
   
• Creative Commons: changes the copyright from “all rights reserved” to “some rights reserved”. The author can choose from 6 licenses (terms of distribution) for the asset. The licenses range from only needing attribution to no commercial use and no derivatives.

Finding Images to Use

There are different ways to acquire images.

1. Take them yourself - smartphones of today are equipped with great cameras.
    
2. Hire a photographer - this is an additional expense and you will not own the copyright, unless explicitly stated in the contract.
    
3. Find photos online - the internet offers all three categories of licenses, and you can often find the images you need for free.
   • iStockPhoto and Adobe Stock Images are the two most well-known providers of royalty-free images for purchase.
      
   • Pikwizard, Pixabay, Pexels, and PicJumbo are all free (both in cost and royalty) stock image providers.
      
   • Flicker and Wikimedia offer a mix of public domain and Creative Commons licensed images. (Be sure to check the footnotes of the image to see what license the image has.)
      
   • Google search should be your best friend because it aggregates all the items listed above. Simply enter search for the keyword of the image you hope to find > click “Images” > click “Tools” > click “Usage Rights” and click the appropriate selection for your situation. (Beware of incorrectly licensed images.)

Page Load Times

Using too many or uncompressed images on your web pages can slow page load times. Not only does this cause visitors to leave because they become impatient waiting for the page to load, search engines take the load time into account for their rankings. For more information on how to speed up your site, including how to optimize images, read 5.5 Easy Ways to Speed up Your Website without calling Your Developer.

Content on your website is not only the text, but also the images. Provide your visitors with relevant, useful, and engaging content to keep them on your site longer and increase conversions.