Using Images Correctly

If you want to increase the engagement of the content on your blog or within your website, just add some imagery. It’s a well know fact that people love to look at pictures and when they land on a webpage or a blog article, images will grab their attention first.

Yup, you really need to use pictures

Images, as online content, will make or break the engagement of your audience. Use strong images that are highly relevant to the topic of the web page or blog article and you’ll be able to pull your audience in deeper to your content. Use an image that has no relevancy to the topic of your web page or your blog article and they’ll be gone in seconds without even skimming the text.

According to usability expert Jacob Nielsen, the types of images that are used on a page are important:

  • Pictures of people and products are good and will increase the engagement of the person on the page.
  • Obvious stock photos will often times be completely ignored by the audience.
  • Large photos are a good thing, when it makes sense like a product detail page.

[Tweet “Images are important to all web content. Users spend 10% more time on pics #digitalmarketing”]

We also know that marketers are feeling very strong about using visual marketing in their campaigns. According to a 2016 report by Social Media Examiner, 74% said that they use visual elements in their social media marketing. And, this is an increase over the previous year. It’s also important to point out that these marketers represent companies in both the B2B and B2C space.

Images Done Right

So, we’ve established that using pictures is important, but using them correctly is even more important. Using images incorrectly can have a negative impact on your SEO, it can increase your bounce rate, and it can really decrease the user’s experience with your site or blog.

[Tweet “Using images incorrectly can increase your bounce rate #smb”]

Image File: We’ll start by looking at the actual image file that you’re going to put into your website page or blog post. There’s 2 areas that need to be addressed when it comes to the image file:

  • The image file’s size
  • The image file’s name
  • The image file’s meta data

File Size: This is quite possibly the most important thing to be aware of when you are using images. The larger the file size of your image the longer it takes to download to your user’s device and in some cases, it can hold up the loading of the entire page until the image is completely loaded.

Speed is so important that Google has recently made “page speed” a ranking signal for SEO Ranking. Here’s what Google has to say about page speed.

using images correctlyBecause image files can be so large, they can have a major impact on a page’s load time. Here’s an example. See the image to the right? In it’s raw form (the file that I downloaded without doing anything to it) the file was 8.5megs. That means if a user has an internet connection at 9mbs it would take a little under 10 seconds for the image to load. That’s way too long!

According to Akamai, 47% of users want a 2 second load time for web pages! That’s not just images, they want the whole page in 2 seconds. And, according to Jacob Nielsen, the average web page visit lasts less than 1 minute. This problem then compounds itself with more images put on the same page.

[Tweet “Speed is a ranking factor and pictures can slow your site down #digitalmarketing #smb”]

You can see why image size is important. So, how can you use images but not have them hurt your site? Size optimization is the solution.

  • Don’t size an image programatically. When you write the code to add an image to a web page or blog post the img tag is used. This tag has a couple of attributes that can control the display size.

    The 2 attributes that are used most often are the “width” and “height” attributes. Using these attributes will take our example image that, in it’s original format was 4949 x 3303 pixels and display that image to any size that you want without you having to do anything to the image file, itself. The problem with this is that your web page or blog post still has to deliver the whole (big) image to the user, then your site will resize the image. You’re not decreasing the file size this way.

  • Don’t use high resolution settings for your images. If you’ve every done any work with images that you want to print out you know that the higher the resolution of the image is, the better the image will look. In fact, in the Print world it’s widely considered that a 300dpi is the bare minimum resolution for an image that is going to be printed. However, in the Digital world resolution is virtually meaningless for the image. No matter what the resolution is, the size of the image (width x height) will remain the same.
  • What will change, however is the size if the image file. Going from a 72dpi to a 300 dpi will have a huge effect on the size of the image file and consequently the time that it takes to download that image. The standard resolution setting for online display is 72dpi.(Source)

Image File Name:Search engine bots can’t “see” your images. Also, screen readers can’t “see” your image. As a result the name that you choose for the image file is important to both people using your site and to your SEO rankings. Use words in the name of your image files that will describe what the image is about. Also, use keywords that are important to the page or blog post that the image is being used on to help search engines get a better understanding of what the image is about and why you’re using it. The file name of your images are important because img0000055739.jpeg has no meaning to anyone.

[Tweet “Use keywords in your picture’s file name #smb #digitalmarketing”]

Image Alt Text: Alt text is another HTML attribute of the img tag. The whole point to the Alt Text attribute is to give you an opportunity to describe in greater detail what the image is all about. Just like the image file name, this will help your SEO efforts and the users that are using screen readers. And, just like the image file name, it will help if you use keywords that are important to the page or post, in your Alt Text description.

Image Search Optimization

All of us want our content to show up on the search engines. If they don’t show up there, then no one will see it. And, that goes for all of our content, words and images. When you’re using images in your web pages and blog posts they can show up in the search engine’s image search results and drive traffic to your site, just like the main search engine results pages(SERP). But, just like ranking on the main SERP, ranking on the image SERP require some optimization. Here’s what Google has to say about it

Conclusion

Images can really help your online efforts or they can really hurt your efforts. It will be worth your time to

  1. Size the image in an image editor, like photoshop, to the width and height that you want it to appear on your web page or blog post
  2. Reduce the file size. One good way of doing that is to reduce the resolution to 72
  3. Use the file name and the Alt Text as a way of helping people and search engine bots understand what the image is all about
  4. Don’t forget about getting traffic from the image search results as well as the main SERP from search engines.