8 Tips to Optimize Images for Better Search Engine Ranking

Posted on December 15, 2016 by in Tips & Tricks | 32 comments

8 Tips to Optimize Images for Better Search Engine Ranking

Whether it’s a photo, an infographic, or an illustration, adding images to your site is a powerful way to enhance the reader’s experience. Our brains process visuals way faster than they do text, which may explain why articles including images get 94% more views than those that don’t.

The use of appropriate graphics for your content can help entice readers, sell products, and much more. Most importantly, they can improve your visitors’s overall experience, which is absolutely key when it comes to Search Engine Optimization (SEO). With images being such important site elements, it’s imperative that you get them right.

In this piece, we’ll offer eight practical tips to help you optimize images for a better search engine ranking. Let’s get started!

1. Find and Use the Right Images

Simply put, it’s important that the images you use are relevant to the topic. Images not fitting within the context of the surrounding content could be perceived as sending a confused message. Conversely, images placed near relevant text should help your ranking. It might be tempting to add decorative images, but if they’re not relevant to the topic, they don’t offer the opportunity to add SEO value.

For example, the featured image used in this Jane Friedman blog post is nice to look at, but doesn’t directly relate to the post topic:

An example of an inappropriate featured image.

When it comes to finding the right image, you have lots of choice. Here are some popular options for sourcing images:

  • Original photos: You can use your camera or smartphone to snap a high-quality image. It’s free, and completely legal!
  • Stock images: Sites such as Pixabay or Unsplash offer free CC0-licensed images, or alternatively a premium site such as Shutterstock or iStock offers thousands of stock images to choose from.
  • GIFs: Graphics Interchange Format (GIF) images are often used for short animated clips, and can add interest to your content or depth to tutorials. GIPHY has a huge selection of existing GIFs that may fit your needs, and they also offer an app for creating your own. Alternatives are ScreenToGif and GIFMaker.
  • Design tools: Sites such as Canva, Stencil, and PicMonkey can be excellent alternatives if you want to create your own images. They offer many options to adapt images, create illustrations, play with text overlays, and more.

Ultimately, choosing the right images for your article will make the process of image optimization far easier. Let’s take a look at our next tip – that of using the right keywords.

2. Use Keywords in the Image Filename

Given that search engines can’t see images, they require descriptive text to ascertain what an image contains. Cameras, stock image websites, and other image sources often apply default generic filenames that don’t help search engines decipher the image. For this reason, it’s important to always rename each image that you want to include.

For example, a search engine will not be able to decipher this image of a lion unless it has a file name suggesting this is the case:

A lion lying down with his head up looking to his left

Image by Matt Porter Wildlife / shutterstock.com

Of course, DSC987 would be an inappropriate, whereas lion would work well, particularly if that was a keyword you were optimizing for.

The filename gives search engines an indication of what the image contains, and also offers the opportunity to use relevant keywords. If you’ve selected appropriate images for your topic, inserting keywords into their filenames should make sense. However, there are some things to take into account when selecting an appropriate filename – most importantly making it readable for both users and search engines.

Let’s move onto a related topic – ‘alt’ text.

3. Optimize Your Image’s ‘Alt’ text

Alternative text (or alt) text goes one step further than optimizing the filename, offering a description of the subject matter along with the image’s relevance to the page. It’s used by search engines to determine the content of the image file, and to decide which images are most suitable to present in response to a search query.

For example, take the following image. Appropriate alt text here could be “A gray cat sleeping on a blue couch”:

A cat sleeping on a blue couch.

Image by AC Manley / shutterstock.com

Alt text is also used where the image itself cannot be seen. This may apply to users of screen readers, or people who have low-bandwidth connections that can’t display certain images. If an image doesn’t appear, you might see something like this:

alt-text

As with filenames, if you have selected appropriate images, it should make sense to optimize your alt text too. However, it’s worth bearing in mind the dangers of keyword stuffing. Generally speaking, the same rules should apply to alt text as to the rest of your content – it should be grammatically correct and flow coherently, rather than sound forced or unnatural.

Adding alt text to WordPress is simple. Navigate to your Media Library, select your image, enter your description into the Alt Text section, then click Save:

Caption and Alt Text boxes.

However, if you’ve already added your image to a post, you can simply click the image, select the Edit pencil icon, and enter your description in the Alternative Text section:

The Image Details screen

In both of these screens you’ll notice you also have the option to add a caption – which we’ll be talking about next.

4. Use Captions Correctly

Captions help an image to add further context to its corresponding text, and are separate from the main body of text. Take the following image:

Palm tree silhouettes in front of a sunset

Here’s where your caption would normally go! (Image by grop / shutterstock.com)

People tend to read captions when scanning the page, and on average they’re read 300% more than the body copy itself. That being said, not every image needs a caption, especially if your surrounding text describes it accurately.

In addition, captions have a further SEO benefit – search engines favor images that have relevant content in close proximity. As with filenames and alt text, adding keywords to captions can help in this regard.

As with adding alt text, captions can be added either via the Media Library, or from the Edit pencil icon in your post or page.

5. Use the Right Image File Type

Different image file types are suitable for different uses. We’ve already mentioned GIFs, but there are two other popular formats:

  1. Joint Photographic Experts Group (JPEG).
  2. Portable Network Graphics (PNG).

One of the major differences between JPEGs, PNGs, and GIFs is their size and corresponding quality. This is important for SEO in terms of how file size affects page load times. Let’s take a deeper look at each in turn.

Firstly, JPEG files can be compressed without losing quality, so they are often used to store complex images and photographs in small file sizes. However, JPEG files do lose quality with multiple saves and edits.

An ocean and mountain scene with a blue sky and some white clouds

An example of a JPEG image (Image by xbrchx / shutterstock.com)

PNG files on the other hand don’t degrade in quality with multiple saves. You often come across extremely large PNG files, but they can be compressed very small. They’re suitable for decorative images and images including text such as logos:

A red sign reading "Come in, we're open"

Finally, GIFs have small file sizes, don’t degrade in quality, but also don’t support as many colors as PNGs or JPEGs. They could be used for icons, text, or line drawings, but they’re mostly known as a way to offer small-sized animations:

A GIF showing the ScreenToGif Download button being clicked

Sometimes, you may need to convert your image to a different format, depending on your needs. To this end, there are lots of tools available to help you such as Online Convert, Convert My Image, and CoolUtils.

6. Reduce the Image’s File Size

Image file sizes are often far larger than you need them to be, due to the amount of imformation stored within them. Reducing the file size will reduce your page load time, which (as we found out earlier) is good for SEO. It will also save you some bandwidth, along with taking up less storage space on your server. What’s more there’s often an unnoticable effect on image quality.

For example, the following image is 621k in size:

A puppy sleeping

Image by Milles Studio / shutterstock.com

However, by compressing the image using an online converter such as CompressJPEG, the file size drops to 73kB, with a negligible loss of quality:

A puppy sleeping

Image by Milles Studio / shutterstock.com

It looks pretty good considering the file size has been reduced by 88%!

There are many online tools available to help you reduce your image file size. Some popular ones are Image Optimizer, Microsoft Office, TinyPNG, and Reduce Images Online. However, WordPress has a number of plugin options available too.

As for the actual optimization process, rather than walk you though it, our comprehensive guide will tell you almost everything you need to know on the subject.

7. Resize Your Image

Aside from reducing your image file size via online tools or plugins, you can also shrink it by resizing your image. This reduces the width and height of your image, decreasing the file size, and again improving page load times. However, some file formats (such as PNG files) don’t respond well to resizing, so you may want to convert the image first before resizing.

When you have an image in the correct format, it can be resized before uploading to WordPress via tools such as Adobe Photoshop or Microsoft Paint, or you can do it within WordPress itself.

To resize it within WordPress, open the image in your Media Library, select the Edit Image button, and in the resulting screen adjust the image dimensions under the Scale Image section:

Part of the Edit Image screen with the New dimensions section highlighted

If your images have already been added to your post, you can also resize them by accessing them via the Edit pencil icon. However, bear in mind that this doesn’t reduce the file size – so offers none of the gains we’ve outlined.

8. Create Image Sitemaps

Sitemaps give search engines more information about your website’s structure. They typically include a list of your web pages, how they are organized, and the metadata associated with those pages. Google also offers the opportunity to add extensions to your sitemap, enabling you to add information about the videos, images, and news content on your site. An image sitemap extension might look like this:

Code snippet source: https://support.google.com/webmasters/answer/178636?hl=en&ref_topic=6080646

As far as SEO goes, image sitemaps can help you indicate to Google which images you want it to crawl and index. Sitemaps can also help search engines to discover images it might not have otherwise found – although by following our advice throughout this piece, you should have no problems to this end!

If you don’t yet have an image sitemap, Google provides instructions for creating your own, and we’ve also looked at the subject in the past.

Using Your Optimized Images in Divi

Once you’ve uploaded your optimized images to WordPress, they’re ready to use in any post or page. If you’re a Divi user, you can insert images using the Image module. When creating your page or post, select the Use The Divi Builder button. From here, select the Insert Column(s) button and choose your row layout:

The Divi Builder with the Insert Columns button highlighted

Next, select Insert Module, scroll down the module options, and choose Image:

The Insert Module screen with the Image Module highlighted

In the resulting screen, hit the Upload an Image button, and select your image from the media library:

The Image Module Settings screen with the Upload an Image button highlighted

From the General Settings Screen you can add new alt text if you wish, and you can also add a URL to the image, along with customizing its animation and position:

The General Settings screen

In the Advanced Design Settings tab, you can tailor the appearance of your image further with options including adding a border and setting a maximum width:

The Advanced Design Settings screen

In summary, Divi makes it easy to place your optimized images almost anywhere in your post or page, and can also help you optimize your image further if you missed out on the steps we’ve presented above.

Conclusion

Images have the potential to help or hinder your search engine ranking, but are often an afterthought when publishing content. Choosing the right images, optimizing their format, and adding accurate descriptions can all help to improve your user’s experience and boost your search engine ranking.

In this article, we’ve provided you with eight tips to help you optimize images effectively. Let’s recap them quickly:

  1. Find and use the right images.
  2. Use keywords in the image filename.
  3. Optimize your image’s alt text.
  4. Use captions correctly.
  5. Use the right image file type.
  6. Reduce your image’s file size.
  7. Resize your image.
  8. Create image sitemaps.

Do you have any tips for optimizing images? Let us know in the comments section below, and don’t forget to subscribe so you can follow the conversation!

Article thumbnail image by quka / shutterstock.com.

32 Comments

  1. image Optimization is very important part of SEO and thank you for share this important guidelines.

  2. A huge point here you’re missing between JPG and PNG is transparency. PNG’s allow transparency anywhere in the image, so you can create some really innovative layouts using them. As do GIF’s, but they’re not quite as versatile due to the lack of a real alpha channel.

    • John Hughes

      You’re absolutely right and I appreciate you pointing it out, but transparency isn’t really something that relates back to SEO, which is the focus of the piece 🙂

  3. Thanks for this very helpful article!

    • John Hughes

      You’re welcome Stoney!

  4. Nice article, you should mention copyright though. As in, if it’s not your photo, you MUST secure rights either by purchasing or respecting its CC license. There have been many cases of photographers and license holders pursuing website owners for back fees and penalties, even extortion.

    If it is your photo you ALSO need SIGNED releases from models, and if copyrighted logos or other items appear in your photos and it’s a commercial site, you also need releases. Any money you make while using unlicensed photos becomes a target for compensation. There is a blurred line between news/documentary license to photograph public places and things of public interest, but if its on private property that a photo is taken, there is no blurred line.

    • John Hughes

      Hi Trevor,

      We actually refer to Creative Commons licensing within the article, but you can never be too mindful of copyright issues; appreciate you bringing it up here in the comments!

      Cheers,

      John

  5. Thanks for such a detailed post. It has helped to put me on the right track for my new website and blog.

  6. I haven’t been using captions for the images on my blog, but after reading this article I wanted to start using them. So I added a caption to one of my images in the WP Media Library, but the caption doesn’t show in my blog post.

    • Did you remove the image from the post and reinsert it?

  7. Excellent post, John!

    Here’s a couple more things to note…

    — I use Imagify for image optimization. It’s the best I’ve found.

    — Although Divi’s Image Module seems like a robust design tool, I find it gives me less flexibility than using the plain old Text Module for image placement. True, one doesn’t get the fancy fade-ins, but one does get way more control of the image placement and text wrap.

    RMT

    • John Hughes

      Appreciate the feedback Randall!

  8. I will start from now on to pay more attention to the images uploaded on our site. Good post. Thanks

  9. Essential information for all website owners and developers.

  10. Hi, thank you for great article, as so many of your blogs!
    I most often use “All in One SEO” and use their sitemap. There is an option to add the images to the sitemap, but I have lately “unticked” that, as clients have written to me that they don’t like their images coming up in a Google search (not image search). Now I am thinking that maybe it is good to include them? Is there something I am doing wrong when the images comes up in a normal search? Thanks again!

    • John Hughes

      Well if your clients don’t like to see them, perhaps that would take precedence? I’d suggest that’s maybe the question to answer.

  11. I would like to add something. The keyword in title & H2 & alt must match (its ok if not, but great if it does). Also image source must be given so that SE does not consider it as a spam.
    Nice Article John.
    Regards,
    Shekhar

    • Hi Shekhar,
      Interesting, and when you say H2 should match, do you mean the H2 on that particular page must should match the image tags? Where is the H2? Thanks

      • Yup, the H2 of the same page where your image is present. It makes a synchronisation of information in accordance to the search query and the indexed page. As per as “where is H2” is concerned, I din’t get you. Kindly elaborate.
        (putting H2 is upto you, but there should be only 1 H2 only.)
        Regards,
        Shekhar

  12. Amazing post! Thank you!

  13. Thank you for this excellent post. Please keep them coming.

  14. Wow.

    Totally awesome post.

    Very comprehensive, lots of insight into how to use and create images properly, and so many helpful links to resources.

    Thanks a lot!

    🙂

    • John Hughes

      You’re welcome Jim!

  15. For reducing size I’d recommend jpg mini- or saving for the web.
    I’ve been told to add not only alt but also a seo title, focus keyword and meta description, is it useful? and how to add my brand without keyword stuffing? thanks

    • John Hughes

      The items you mention don’t relate to image optimization, but to SEO in general (and more specifically, the Yoast SEO plugin). And yes, they’re all a good idea 🙂

      Avoiding keyword stuffing is pretty simple – just read your content, and as long as your keyword doesn’t stick out like a sore thumb due to being awkwardly worked into sentences, you should be fine.

  16. This is great apart form the fact that Divi works on image proportions not sizes. We often have to add a large image to make sure Divi shows it how we want it to be seen.

    I and others have asked in the support forum what size a slider image should be for example, only to find that we can’t add a specific size, just an image that scales well in that position.

    It would be nice not to have to load 1280 wide images that only show at about 600 wide but Divi doesn’t work like that. Which means one can’t actually optimise all the images on a Divi site 🙁

  17. Although only some browsers (Chrome, Opera) support webp, it is also a type of image format help improve web load very much. Thanks for the useful article.

  18. You mentioned that some PNG images don’t respond well to resizing. I’ve never run into this issue. Can you elaborate on why a PNG would respond differently than any other raster file format?

    • John Hughes

      It’s typical with say a screenshot; you’ll experience a ‘blurring’ effect. It’s more relevant to PNGs than say JPGs, since they’re compressed anyway.

    • Resizing itself not advisable.
      It will increase the loading time and shows error like scaled images issues.

  19. What about image optimization plugins? They can optimize your images automatically and save your precious time…

  20. Usually when optimizing an image we want the dimensions to be as big as possible, yet the storage space to be as small as possible

437,821 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web

We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!

Sign Up Today

Pin It on Pinterest