HOW TO USE IMAGES AND OPTIMIZE FOR SEO

Images will help the reader, and Google, understand your article. That “a picture is worth a thousand words” is a well-known fact in print publishing such as newspapers and magazines, as well as in social media. In short, use images to every article you write online. A good video can also enhance the reader experience quite a bit.


Finding the right image


If you can use your own image, do so. Use an image that has the same subject as your article, reflect the topic of the post, or have illustrative purposes. An image that is surrounded by related text ranks better for the keyword it is optimized for.

Some reasons to use images:

  • To emphasize the title or subject of the post
  • To trigger a visitor to read the post
  • To be used in OpenGraph tags and Twitter Cards, which will add the image to social shares
When everything else fails, posting a photo of your cat online always do the trick, or not.

When everything else fails, posting a photo of your cat online always do the trick, or not.

Make featured images unique by adding your own touch.

If there is no way to use images of your own, look at Flickr.com as an image source. The article Flickr and Creative Commons explains this process. There are other sites like freeimages.com.

Stock photos can be okay – it can be hard to photograph a doctor yourself and be able to use the image – although they tend to look stock photo-ish, especially photos of people.

Sometimes an illustration, a graph, or a map (an illustrated one can even be better). Animated GIFs are popular, although they can be hard to find and, at times, very distracting, like in the post where the cat animated GIF was found. Keep your audience in mind when choosing images.


Preparing images


When you have found the right image to use, either an illustration, chart or photo, the next step is to optimize that image for use on your website. There are a number of things to take in consideration:


Choose the appropriate file name


Image SEO starts with an appropriate file name. This is the first location to use that keyword. You want Google to know what the image is about. If your image is a sunrise in Paris showing the Notre Dame, the file name shouldn’t be image-1.jpg, but rather notre-dame-paris-sunrise.jpg. The main keyword would be Notre Dame, as that is the main subject of the photo, that is why you should add that at the beginning of the file name.


Scale for image SEO


Loading times are an important UX and therefore SEO aspect. The faster the site, the easier to visit and index a page is. Images can have a huge impact on loading times, especially when you load a large image and show it really small, like using a 2500×1500 pixels image and showing it at 250×150 pixels size. The entire image will still have to be loaded. Scale the image to the size you want to show it before you upload to your site. WordPress helps by providing the image in multiple sizes after upload. That doesn’t mean the file size is optimized as well, that’s just the image size.


Reduce file size


Make sure that scaled image is served in the smallest file size possible. There are tools for that. Although you could export the image and test what percentage of quality is acceptable, but because of retina and similar screens, using 100% quality images might be better.

Image SEO: Optimize image file size using JPEGMini

There are other ways to reduce file size of these images by removing the EXIF data. Using tools such as ImageOptim or websites such as JPEGMini or PunyPNG, and Kraken.io. After you have uploaded the image, tools like YSlow can tell you if your image optimization succeeded. Smush.it is a WP plugin that reduces file sizes.

wp-smush.it


Adding the image


Add the image near/at/in related textual content. That makes sure the content is relevant for the image as well.


Captions


The caption of the image is the text that accompanies the image. Commonly that’s the text in the gray box below it. This text is important for image SEO and because people use the text in scanning an article. Nielsen wrote back in 1997: “Elements that enhance [human] scanning include headings, large type, bold text, highlighted text, bulleted lists, graphics, captions, topic sentences, and tables of contents.” In 2012, KissMetric stated that “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.”

Sometimes images such as a logo serve another purpose and do not need a caption. Decide whether the image at hand is an image you want to use for SEO or not. Add a caption only if it would make sense to the visitor if that caption is added. Think about the visitor first, don’t add a caption just for image SEO.


Alt text and title text


Alt text is the text you see when you hover an image in most browsers (IE shows the alt text, Chrome seems to show the title text instead). Wikipedia: “In situations where the image is not available to the reader, perhaps because they have turned off images in their web browser or are using a screen reader due to a visual impairment, the alternative text ensures that no information or functionality is lost.” Be sure to add alt texts, and that it includes your SEO keyword related to the image.

Title text for images is similar and it’s okay to copy the alt text, if including it at all. “The title attribute can be very useful, but it is not a safe way of providing crucial information. Instead it offers a good way to provide non-essential information, for example the mood of the image, or what it means in context.”


OpenGraph


For social sharing, add the right image tag to your <head> section like this:

<meta property="og:image" content="http://example.com/link-to-image.jpg" />

That will make sure the image is included in your share on Facebook (and OpenGraph is also used for Pinterest, for instance). Yoast’s WordPress SEO plugin has a Social section where you can set this image. Make sure to use a high quality image, like the original image you use in the post, as higher quality/larger images tend to be used by the social platforms more often. If you have set this up correctly, and it doesn’t work, try to flush Facebook’s cache in the URL Debugger.

Twitter Cards do the same for Twitter, and are also generated by the Yoast plugin.


TL;DR (too long; didn’t read)


Image SEO is the sum of a number of elements. With Google being able to recognize elements in the image better every day, it makes sense to make sure the image and all elements contribute to user experience as well as SEO.

Take these things in mind when adding an image to an article:

  • Use a relevant image that matches your text
  • Pick the right file name for your image
  • Make sure image dimension match the image size as displayed
  • Reduce file size for faster loading
  • Add a caption for easier overview of the page content
  • Use an image alt text, title text is optional
  • Add OpenGraph and Twitter Card tags for the image

 


Also see the article Flickr and Creative Commons.