Image SEO Yoast

Image SEO
Optimizing images for search engines

Image SEO: Optimizing images for search engines

April 26th, 2017 – 43 Comments

If you are, for instance, a blogger or you write articles for an online magazine or newspaper, you might encounter this question on a daily basis: should I add an image to my article? The answer is “Yes”. Images make an article more vivid and can contribute to the SEO of your article. In this post, I’d like to explain the steps that you should take to fully optimize an image for SEO.

When you optimize an image, make it as small as possible – in terms of download size – by using the right image compression. A well-optimized image also has the right name and alt text, so it’s optimized for search engines too.

Use images

Images, when added with a certain consideration, will help readers understand your article better. “A picture is worth a thousand words”. Yeah, well, probably not for Google, but it can spice up a 1,000 dull words, illustrate what you mean in a chart or data flow diagram, or simply make your social media posts more enticing for sure.

It’s a simple recommendation: add images to every article you write online. They’ll make it more appealing.

Finding the right image

Image SEO: This image isn't saying 'welcome to our company', it's saying 'welcome to a company'.If you have the opportunity to add your own image, please do so. Your team page needs pictures of your team, not this dude on the right or one of his stock photo friends. Off topic: let alone that the dude needs a haircut.

Your article needs an image that has the same subject as your article. If you would use an image just to use an image and get a green bullet in our SEO plugin, you are doing it wrong. The image should reflect the topic of the post, or have illustrative purposes within the article, of course.

There is a simple image SEO reason for that: an image that is surrounded by related text, ranks better for the keyword it is optimized for. More details on image SEO later.

New to SEO? Learn the Basics of SEO in our Basic SEO course »

Basic SEO training$ 199 - Buy now » Info

Alternatives

If there is no way to use images of your own, there are other ways to find unique images and refrain from using stock photos. Flickr.com is a nice image source for instance, as explained in this article: How to Use Creative Commons Images from Flickr. I also like the images provided by sites like freeimages.com (formerly known as sxc.hu). Check here for more image resources. You should stay away from the obvious stock photos, and rather pick the ones that look (ok, just a bit) more genuine. It almost seems like images with people always look like stock photos, unless taken by yourself. In the end, that is still the best idea.

Obvious alternatives for photos could be illustrations, like we use, or graphs, of course. An honorable mention should go to animated GIFs, as these seem to become more and more popular these days.

Image SEO: Animated GIFs are popular these days

Even with Animated GIFs being very popular these days, don’t go overboard. It’ll make your post less attractive to read, as your reading will be interrupted by the movement of the image, of course. Like in the post where I found the image above.

Preparing images for use in your article

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 that you should think about:

Choose the right file name

Image SEO starts with the right file name. Of course, this is the first location to use that keyword. Without even looking at the actual image, you want Google to know what the image is about. It’s simple: if your image is a sunrise in Paris showing the Notre Dame, the file name shouldn’t be DSC4536.jpg, but notre-dame-paris-sunrise.jpg. The main keyword would be Notre Dame, as that is the main subject of the photo, that is why I added that at the beginning of the file name.

Scale for image SEO

Loading times are important for UX and SEO. 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 huge image and show it really small, like using a 2500×1500 pixels image and showing it at 250×150 pixels size. The entire image still has to be loaded. Scale the image to the size you want to show it. WordPress helps by providing the image in multiple sizes after upload already. Unfortunately, that doesn’t mean the file size is optimized as well, that’s just the image size.

Use responsive images

This one is essential for SEO as well. Images might ruin the mobile experience and could increase bounce rate. Go check Bruce Lawson‘s talk at WordCamp London (2015) about responsive images and the use of the picture attribute. He also brought this plugin to my attention as an alternative: RICG Responsive Images For WordPress. The plugin adds the srcset attribute to your images, making it possible to serve a different image per screen width. Note that WordPress adds this behavior by default from version 4.4 and they urge you to update the RICG plugin to the latest version in that same article. If we can automate this process like that, it might be the future of web images, IMHO. I like it.

Reduce file size

The next step in image SEO should be to make sure that scaled image is served in the smallest file size possible. There are tools for that. Of course, you could just export the image and test what percentage of quality is acceptable, but I prefer (especially with retina and similar screens) to use 100% quality images.

Image SEO: Optimize image file size using JPEGMini

Optimize image file size, for instance using JPEGMini

You can still reduce the file size of these images by, for instance, removing the EXIF data. We recommend using tools like ImageOptim or websites like JPEGMiniPunyPNG or Kraken.io.

Next to using tools like the ones mentioned above, please use tools like YSlow to check if your image optimization succeeded.

Adding the image to your article

Don’t just stuff it in somewhere. I already mentioned adding it close to related textual content. That simply helps a lot. It makes sure the content is relevant for the image as well, as it is the other way around. 

Our SEO for WordPress eBook guides you through every aspect of Search Engine Optimization »

SEO for WordPress$ 25 - Buy now » Info

Captions

The caption of the image is the text that accompanies the image. If you look at the images in this article, it’s the text in the gray box below it. Why is that text important for image SEO as well? People use that text in scanning an article. Next to headings, people tend to scan the image and include the caption as well in that scan. Nielsen actually wrote back in 1997: “Elements that enhance scanning include headings, large type, bold text, highlighted text, bulleted lists, graphics, captions, topic sentences, and tables of contents.” In 2012, KissMetric even 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.”

Do we add captions to all images? No. As mentioned, sometimes images just serve another purpose. Decide whether the image at hand is an image you want to use for SEO as well or not. Keeping over-optimization in mind, I’d say you should add a caption 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

The alt text (or alt tags) is added to an image so there will be a descriptive text when the image for whatever reason can’t be displayed to the visitor. I can’t put it any better than 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. Make sure the alt text includes the SEO keyword for that page and relates to / describes the image.

When hovering an image, IE shows the alt text as a ‘tooltip’. Chrome shows the title text like it was intended. Title text for images is similar and a lot of people that use these simply copy the alt text. More and more people simply leave these out. What is it for? “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.” it’s nice to have information indeed, and isn’t taken into account for image SEO.

Read more: ‘Read more about alt tag and title tag optimization’ »

OpenGraph and Twitter Cards

I mentioned using the image for social sharing. If you 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).

Social preview for Facebook sharing

Our WordPress SEO plugin has a Social section where you can set and even preview your Facebook post when you use Premium. 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 our plugin.

Alignment

Let me be honest, this is a pet peeve of mine. Images shouldn’t break the left reading line. I’m sure there are studies about this but I’m taking full responsibility for this myself: I just really don’t like it when text starts on the right of an image, only to jump below the image later:

Maintain the left reading line; don't align images to the left

Maintain the left reading line; don’t align images to the left

If an image is used that is the same width as your textual column, that would be no problem. It will even help emphasizing the image more.

Note that this has absolutely nothing to do with image SEO, but I saw an opportunity to express my opinion and used it :) I think it’s bad for user experience. Just to please me: don’t. Thanks a lot for that.

XML image sitemaps

If you are a web developer, you might wonder about XML image sitemaps. I’d rather say images in XML sitemaps. Google is pretty clear about this:

To give Google information about images on your site, you’ll need to add image-specific tags to a sitemap. You can use a separate sitemap to list images, or you can add image information to an existing sitemap. Use the method that works for you!

Every now and then, people ask us about XML image sitemaps. We don’t generate these in our plugin, but as Google states, instead, these images are included in the page or post sitemaps. Just scroll down in our post sitemap and find that we have added images to all our latest posts (there is a column telling you that). Adding images to your XML sitemaps help Google index your images, so be sure to do so for better image SEO.

TL;DR

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. It would be foolish to try to fool Google.

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
  • Use srcset if possible
  • Reduce file size for faster loading
  • Add a caption for easier scanning of the page
  • Use an image alt text, title text is optional
  • Add OpenGraph and Twitter Card tags for the image
  • Don’t break the left reading line using an image
  • Use images in your XML sitemaps

Besides contributing to SEO and user experience, images can also play an important role in conversion!

Keep reading: ‘Visually direct and captivate your visitors’ »


43 Responses to Image SEO: Optimizing images for search engines

  1. seo company
    By seo company on 8 May, 2017

    Very nice article, everything is well explained.

    Image optimization plays a vital role in On-page optimization of a webpage. Starting from image file name to alt text and scaling the image everything counts here.

    Thanks for this great article Michiel.

  2. Manoj
    By Manoj on 3 May, 2017

    Hi Michiel,

    Excellent tips. This detailed post is very helpful for us to optimize images in websites and blogs. Thank you.

    Meanwhile, do you have any suggestions regarding image type? JPEG or PNG, what type of file we should use?

    • Willemien Hallebeek
      By Willemien Hallebeek on 4 May, 2017

      Hi Manoj,
      Thanks! Regarding image type, it depends a bit on what’s most important to you. Google generally advises to use PNG if you want to preserve the most detail with the highest resolution. If your users have limited bandwidth though, JPEG would be preferable, as the file size is smaller.

  3. online project
    By online project on 3 May, 2017

    Great Article!
    I appreciate for sharing these valuable information

  4. Chris Jericho
    By Chris Jericho on 3 May, 2017

    Michiel,thank you for existing to help us with your optimization tips! Very good.

  5. Gary Braniff
    By Gary Braniff on 3 May, 2017

    Hi Michiel
    This was a very informative post and I enjoyed reading it.

    One thing I am struggling with is deciding how many images to insert per number of words. I have not found a whole lot on this.

    • Willemien Hallebeek
      By Willemien Hallebeek on 3 May, 2017

      Hi Gary, we actually don’t use a ratio for this. Our articles show at least one image, and if it makes sense we add other images in the text to illustrate what’s written, so the reader will understand a text better.

  6. Nathan K Smith
    By Nathan K Smith on 3 May, 2017

    I just submitted a trouble ticket in the yoast seo premium. For some reason according to my google console my images are not being indexed. Do I have the wrong setting on the Yoast plugin?

    • Ben Vaassen
      By Ben Vaassen on 3 May, 2017

      Our support team has answered your email, if you still have further questions, you can reply to them! :-)

  7. Richard
    By Richard on 2 May, 2017

    When naming images, does it matter if you capitalize words?

    • Willemien Hallebeek
      By Willemien Hallebeek on 3 May, 2017

      Hi Richard, I don’t think Google treats capitalized words any different. If you think capitalizing first letters of words will draw more attention you can use it. It really depends on your own taste and that of your users though. We usually avoid using too many capitals, especially all caps, because it might look like your screaming.

  8. Kent Svenstrup
    By Kent Svenstrup on 30 April, 2017

    Good read. I have been thinking about optimizing the images on my site for a while now, and this really motivated me to priotize that task

    • Michiel
      By Michiel on 1 May, 2017

      Thanks! And good luck :-)

  9. Pavitra
    By Pavitra on 30 April, 2017

    I recently started working on my car blog and some recommended me to learn SEO. While searching for image SEO, I found this website. As I coded the whole script manually, any plugin was not something I can use to get my work done. So learning it from basics was important. This was very informative post for me.

    I was using random names for images and image size was the second issue I had. I hope to get more informative content to improve my blog’s visibility.

    :)

  10. Singh
    By Singh on 30 April, 2017

    Excellent tutorial, I am using the image seo plugin for my site that is doing its work like a charm and when you check the source of a wordpress post using that plugin you can check that proper image titles are inserted automatically to the images in every post. Simply outstanding.

  11. samba siva
    By samba siva on 30 April, 2017

    Michiel,

    I am very new to Seo. Just learning more about on page Seo. Sir, Even though, I optimize images in my blog, It loads very slowly. Could you please tell me, How to decrease my blog load time ?

    • Michiel
      By Michiel on 1 May, 2017

      Hi Samba, perhaps this article will help you out: https://yoast.com/site-speed-tools-suggestions/. It shows you some site speed checking tools, that could help you identify the problem with the loading time of your blog. Those tools will also tell you how to solve possible issues.

  12. J. Husin
    By J. Husin on 30 April, 2017

    Now I know! Thank you for this very informative post. Now back to work on editing the pics on my website.

  13. akshay
    By akshay on 29 April, 2017

    I need to know about image optimization in details for my own blog images. Thanks to this awesome guidance which is helpful for me to follow up.
    Thank you

  14. Grosir jilbab murah
    By Grosir jilbab murah on 29 April, 2017

    Thank you for sharing this article. It is most helpful.
    I love using the Yoast SEO plugin

  15. Szörftábor
    By Szörftábor on 29 April, 2017

    I used in the image title and alt tags the same words and my image is in number 1 position…?

  16. Eduardo
    By Eduardo on 29 April, 2017

    Excelente!! enseñansa he aprendido mucho para aplicarlo a mi blog, saludos y bendiciones Michiel!!

  17. zee digitizing
    By zee digitizing on 28 April, 2017

    A comprehensive guide of image optimization for seo as well as visitors.

  18. Marcelle
    By Marcelle on 28 April, 2017

    Awesome information. I will stop being in such a rush with just placing images in and always getting to the seo of the image later. So guilty of that.

    • Michiel
      By Michiel on 28 April, 2017

      Hi Marcelle, I guess we all know that feeling… great idea. Good luck!

  19. Matteo Duò
    By Matteo Duò on 27 April, 2017

    Solid tips Michiel, you’ve got them all and, of course, great work!

    BTW, finding the right images to use takes a lot of time and the more we write, the more we need them, right? That’s why I put together a list featuring lots of resources where you can find photos and images for either personal or commercial use.

    Here’s the link to it: https://www.matteoduo.com/free-photo-websites-commercial-use/

    Hope someone finds it useful!

  20. Brad Marcus
    By Brad Marcus on 27 April, 2017

    Excellent article. I’ve been preaching this for years and the results are remarkable. One client saw their website traffic explode by 50% after optimizing image names and tags and their income went up by even more.

    • Michiel
      By Michiel on 28 April, 2017

      Hi Brad, awesome! Those are some nice results!

  21. John Johnson
    By John Johnson on 27 April, 2017

    Thank you for this article. It is most helpful. Would like some further info on images for ecommerce. For example I have one page with over 170 jpg images that are approx. 600×600 px. I use photoshop elements to work on my images. Obviously the load time exceeds 2 seconds. How do I deal with this i.e. set up multiple pages or what other suggestions would you have?

    • Michiel Heijmans
      By Michiel Heijmans on 9 May, 2017

      have you tried lazy loading for these pages? That way images will only be loaded on scroll, so it just loads the images that are visible to a user.

  22. Gloria
    By Gloria on 27 April, 2017

    Lots of work since I am wedding photographer. Wish to add a tool that will automatically add all of this details for me

    I truly enjoy it the information.

  23. Daniel @ TME
    By Daniel @ TME on 27 April, 2017

    Sometimes it is important to go back to the basics and look at why we do certain things. I definitely don’t use captions enough, so will look at where I can start using them more in my content. 300% more engagement is nothing to your nose up at!

  24. Travis Neighbor Ward
    By Travis Neighbor Ward on 27 April, 2017

    Great article! I love using the Yoast SEO plugin. And I don’t hit publish until it gives me green lights. Thank you for a fantastic tool.

  25. Tabung pemadam api
    By Tabung pemadam api on 27 April, 2017

    hey Michiel’
    Creatively build me up

  26. Lrers
    By Lrers on 27 April, 2017

    Wow It is a fantastic idea to improve my images quality.

  27. Phoenix Pop Productions
    By Phoenix Pop Productions on 27 April, 2017

    Great article. Kraken is my preference for compression, although some detailed images are hard to get down in size. Speed is key, so what do you recommend for image file sizes; the max size for each image and all images as a whole on a web page?

    • Michiel Heijmans
      By Michiel Heijmans on 9 May, 2017

      Depends on the purpose of your site and target audience as well. Here in the Netherlands, internet connections are really fast most of the time. I’m doing at least a 40Mbps download over 4G, WIFI, even at home, is up to 400/500Mbps up and down. So I really don’t care how large those images are :)

      On average, internet connections are a lot lower, of course. The main thing I can recommend without giving max sizes is that you put your best effort in this. If your website needs really sharp images for whatever reason, please serve these to your visitors. On for instance a real estate site, I want a good look at that image, and I am willing to wait another second. So again, it depends. Sorry I can’t give you any numbers here :(

  28. Matt LaClear
    By Matt LaClear on 27 April, 2017

    Hi, Michiel, I appreciate the effort you put into this post. I just skyped it to my graphics team to start implementing. Should we do our best to make the images appear original to Google? Or is that a waste of our time? Thanks!

    • Michiel Heijmans
      By Michiel Heijmans on 9 May, 2017

      I’ say use an original image, don’t try to appear original.

      Don’t use the same (stock) photo for every website. Don’t use the photo everybody else is using. You’ll get lost in the similar section in Google Images.. Check this. Whoa. That’s 20M websites using an image that is or resembles that one image. Don’t be one of those 20 million :)

  29. Deepanker Verma
    By Deepanker Verma on 26 April, 2017

    I guess I follow most of these tips. I generally use Canva to create images for blog post and download images from Pixabay if needed any stock image to edit.
    Reducing file size is the important thing but I sometimes find it lazy to optimize images. But mostly I use ImageOptim.
    The only thing I have not yet done is the Image sitemap. I will do it today without wasting time. I can see traffic from Google images and I do not want to lose it.
    As always, a nice piece of article. :)

    • Michiel Heijmans
      By Michiel Heijmans on 9 May, 2017

      Thanks, Deepanker.

    • Andrew Fletcher
      By Andrew Fletcher on 30 April, 2017

      very timely article, as I need to reduce the size of my site to speed load time and I think the number of large images is one issue…!
      thanks


Check out our must read articles about Content SEO