Code by Day | Explore By Weekend
How To Optimize Images For SEO In Divi Full Step By Step Guide Tutorial by Pee Aye Creative

How To Optimize Images For SEO In Divi – Full Step By Step Guide

Learn how to optimize your Divi images for SEO in this full step-by-step guide! Learn about image compression, filenames, file types, alt tags, and more!

1. Use Relevant And Purposeful Images On Your Divi Website

First of all, the images in your Divi site must be relevant to the context of the article. If you keep using irrelevant images, Google is going to find out, and you may end up losing readers and the ranking. The images on your site must be eye-catching and attractive too.

example of poor image choice for Divi image SEO

The image above is really amazing, but it should not be used with the topic “how to master the art of programming.”

So, the key is to use good quality and relevant images. The images should have a purpose, either decorative or functional.

Some background images are just decorative, and those are not valuable for SEO nor are they recognized by search engines. Other images like the featured images and images showing your products, services, etc are very useful and relevant to search engines.

2. Choose An Appropriate Divi Image Size

Image size is an important factor to consider for better SEO ranking. But what size should you use?

Unfortunately, there is no right or wrong answer and it literally always depends. Elegant Themes does have a guide on this, but I’m not super impressed by it. Sure, I understand that these are the dimensions when you add images by default, but there are so many other variables. If your row width or max width is set different, or the gutter is different, or your module widths are different, these will all be wrong. I’ll try to make a post going over this in more detail in the future! For now, try to choose an image size that comes close and is not obviously sized wrong.

Reduce Image Size

I’m going to show you some examples of how to properly size and optimize images before you upload them to your website. To resize images, use any photo editing program you have handy. If you do not own tools like Photoshop or Affinity Photo, then don’t worry, there are other options! I would recommend checking out a free online tool that will do this perfectly. The online image editing tool is called Pixlr X, and this will work great for you to resize your images and it even has an export option for WEBP, which we talk about later in this post.

Planning For Scale

This is important!

Let’s say you do everything else correctly as described in this post. You optimize your images and upload them. But then you add that 1080px wide image in a small column and it ends up displaying at 225px wide. That’s not ideal.

WordPress actually creates lots of image sizes when you upload an image. This isn’t always obvious, but you may recall seeing the option to choose them.

choosing a WordPress image size

It can be helpful to choose a different size depending on how large or small the image is actually displayed.

3. Choose The Best Image File Type For Divi

The next thing to consider is file type. There is no right or wrong here, and it really depends how you are using the image. Let’s have a look at some considerations to help us decide which is best for image SEO in Divi.

PNG and JPEG

Two of the most commonly used image file types are JPEG and PNG. If you want to get the best clarity and colors from your image, use JPEG. If you need a transparent background around your image, then you will need to use PNG. 

WEBP

Another file type that is fairly new is called WEBP. This new format is slowly becoming the standard for web design, and has some advantages over JPEG and PNG. Using WEBP images allows you to have high-quality images with small file sizes. Some Content Delivery Networks (CDNs) and some optimization plugins such as SG Optimizer by Siteground will even convert your existing images into WEBP, which is super convenient. There are also many online tools to do this if your image editing program does not support exporting images in this format.

SVG

Another option for image file type in Divi is SVG. You can use these for things like logos and icons. These are great because you can resize them and manipulate them with code and never lose image quality.

4. Use A Relevant Image Filename

A very important factor that often gets overlooked is the image filename itself. You can help search engines by using a filename that tells them what the image is about without even looking at the the image. Everything about SEO is related. So images need to match the content of the page, and that means the file names should match as well. 

The best practice is to use the same image filename that you will use as your focus keyword in your SEO plugin for that page.

Often if you download an image or import it from your phone or camera, it will have a default file name such as DSC03274.jpg. This does nothing for you because search engines have no idea what that means! Instead, describe the image in the first part of the filename like “blue sky with clouds,” while also keeping your page focus keyword in mind. Your image would then have a filename of blue-sky-with-clouds.jpg and now the search engines will immediately recognize it.

5. Compress The Images Before Uploading Them To Your Divi Website

What Is Image Optimization

The next step in Divi image SEO is to make sure your images are not only sized correctly but also compressed. The goal of this step is to keep the image quality, but make the file size as small as possible.

Compressing an image involves reducing its file size so it takes up less space on your page and less data for your hosting server to load. This will help your pages load faster, give the user a much better experience, and make the search engines happy. A fast loading page is very important for SEO, and correctly optimized images are a big part of making your Divi website load faster.

Image Optimization Tools

Before I upload any images, I always run it through a free online tool called TinyPNG. This tool does an excellent job at compressing JPEG and PNG images. The average file size savings for me is about 70%, which is significant. All you have to do is upload your images (up to 20 at a time), and then download them again (just save over top of the original file). This only takes a few seconds to complete, and is a worthwhile step in Divi image SEO optimization.

There are many, many tools that do this, so take your pick! There are even some that run on your computer. The important thing is to just choose one that works well and use it for every single image that you upload to your Divi website.

Optimize After Uploading

You can also optimize your images after they are uploaded. There are many plugins that do this for you, so just search for one that meets your needs. If you are using a recommended Divi hosting provider like Siteground, you can use their excellent SG Optimizer plugin for this.

6. Add Alt Tags To All Your Divi Images

What Is Alt Text

When you upload an image to the media library, you will notice an input field that says “Alternative Text.” WordPress has added a helpful link here that says “Describe the purpose of your image. Leave empty if it is purely decorative.”

I recommend clicking this link and reading over some of this criteria that helps you decide whether or not to include alt text here and what to say. This can be very technical, but don’t feel like it’s a test of right or wrong.

In general, try to determine if the image is decorative or functional. If the image serves a function, then add some alt text. Don’t bother if it is only decorative.

If for some reason the image does not load properly on your website, the ALT text will be displayed (it’s called alternative text for a reason). If this was the case, ask yourself if the alt text would deliver a clear idea about the image. If you had a decorative image that didn’t load, you would not want the user to be confused by the random alt text that is irrelevant to the page content.

Alt Text In Divi

Note that in Divi the alt text is automatically added in the modules under the Advanced tab in the Attributes toggle of all the modules that have images. You can override this if you want, which is nice if you are using the same image on different pages and want to use a different alt text relevant to that page.

Divi Image Module Alt Text

In the past, Divi did not automatically pull in the alt text, and this caused a lot of frustration to some users. This was changed in version 4.4.4 on April 23, 2020 in both the Image module and Fullwidth Image module. If you want to use the same image on different pages of the site in a different context, it may be best to manually add the alt texts in the Divi module for each image.

Below you can see that the image title and alt text are both being automatically added to the Divi Image module.

WordPress image SEO alt tags and titles
Divi image module automatically showing the SEO alt and title attributes

Divi Gallery Module Alt Text

For a while, Divi did not automatically add the image alt text to images in the Divi Gallery module, but this was updated in version 4.4 on March 5th, 2020. They modified the Gallery module to include each image’s Alt Text when defined in the WP Media Library.

Post Title Module Alt Text

The Divi Post Title modules also received this update to automatically add the featured image alt text in version 4.5.8 on August 24th, 2020.

7. Add Image Captions As Needed

Another field you will notice in the WordPress media library is called “Caption.” It is good to understand that you do not need to add a caption to every image that you add to Divi. Instead, you should stop and consider how the image will be used.

The key to remember is to not use an image caption for the sole purpose of SEO. It should also have a secondary purpose.

It is a bit of a technical one, but try to think if the image is used for “scanning” purposes. If your image caption shows up noticeably when users scan the page, then use a caption. If not, it may be over-optimizing to use this on every image. Only use a caption if it makes sense to the website visitors for one to be there.

For example, the Divi Gallery module is the perfect place to show image captions. Be sure to add captions to the images that you are using in galleries. Below is an example of this in our Divi Mowing child theme’s gallery.

example of the Divi gallery module image title and caption

8. Use Responsive Images Setting In Divi

Divi comes with native srcset support for responsive images. This means Divi will automatically make your images responsive and serve the perfectly sized image to each device.

In the Divi Theme Options, there is a setting called “Enable Responsive Images.” This setting is on by default, so you won’t have to do anything except make sure it is turned on. Here’s what the setting information says:

Enable this option to get responsive images size generated when uploading images and adding srcset attribute for images element.

Divi automatically serves smaller images on smaller devices, which can greatly improve loading speeds and thus will improve SEO. The best part is it doesn’t require any extra work from you.

Conclusion

Divi is an awesome theme, and SEO is important for all of us. Remember, SEO is not a magic trick, but rather a complex web of hundreds of interwoven factors. Using this post as a guide will help you optimize your Divi images for SEO and for general user experience as well. If I have missed any steps let me know and I will update this post. 

20

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.

Join Our NEW Divi Facebook Group!

The Divi Teacher Logo

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
5 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Alex
1 month ago

Hi Nelson, great summary of the image optimisation for SEO purposes. However, I would add a paragraph about EXIF data. Longitude, altitude, geolocation in general and image tags/keywords added within the EXIF data (after image conversion) are another little handy trick, that can improve your on page SEO when done properly. Other than that, your article is spot on! Thanks for sharing!

Mark McGowan
1 month ago

Another extremely helpful tutorial, thanks! Keep up the good work!

Mark

Sue Tomkin
Sue Tomkin
1 month ago

1) What settings to you use in the WP Media Setting/Image Size: Thumbnail; Medium; Large?
2) So you use photoshop as well as tinypng?
3) Do I assume the enable responsive images settings apply to newly uploaded images and not images already in the media library???

Shop Our Divi Products!

Child Themes • Plugins • Layouts

Visit The Shop

become partners with Pee Aye Creative

Partner With Us

We are looking for you!

Learn More

Divi Tutorials On YouTube

Join over 3,700 others and subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest

0

Your Cart