How to optimize Divi image sizes to increase your site SEO

In this article, you will get complete information about how to get SEO optimized, perfect size of Divi images for your WordPress website, blog, FrontPage or images gallery.

Are you struggling with adding images to your website with a “Perfect image size”? But don’t know how to get it?

Do your images get cropped or zoomed in whenever you upload on your site?

Or

Ever noticed, how your portrait image format changes into landscape format each time you try to upload your image?

If you are tired of all these frustrating situations, then I am glad to inform you that here is a quick solution to your problems.

In this article, I’ll walk you through the whole process to get the best image size for your website with appropriate image format and SEO optimized solutions.

Here is a brief layout of all the points that we are going to discuss in details.

In the first section, we’ll discuss how you can get the best image size for your Divi site, and in the next section, we’ll discuss how you can optimize your images before uploading to your site, to load your site faster ultimately.

Here is the roadmap, or you can jump to your desired section directly.

Images are the smart solutions to express your website message, with the right set of images you can target your audience easily because studies show that our brain remembers 80% of what we see than 20% what we read.

Images are being widely used as an attention-grabbing tool, and no website is complete without using images. Divi theme is ideal to add images easily to your website by using Divi modules.

However, many novice users may find it challenging to know the correct size of the images and how to adjust them rightly without looking out of place. Moreover, Google also ranks those websites quickly that do well about user experience. Therefore, SEO is another great reason for using perfect size Divi images.

Before discussing the Divi image size, you should know how WordPress uploads your images to the media library of your site.

So, let’s get started.

Which image formats are supported by Default WordPress?

Once you upload your image on your WordPress site, then WordPress will automatically generate 7 to 8 thumbnail files with different image sizes.

Suppose you have uploaded an image file of size 1280×720 px, the default WordPress will automatically create three thumbnail sizes and adds the sizes to the media library. These smaller versions of your images are going to be used when displaying your posts in the sidebar because the thumbnail can load faster than the original large-sized image. The three default sizes of images thumbnails are as follows;

 

• Small thumbnail: 150×150
• Medium thumbnail: 300×300
• Large thumbnail: 1024×1024

Also, remember that, WordPress will not generate any thumbnail if the original image size is smaller than the default thumbnail size.

Which image format is supported by Divi Theme?

The default WordPress supports three image formats while if you are using Divi theme, it can support up to seven image formats, including the three image formats supported by the Default WordPress.

Image Format 1: pb-post-main-image

This image format is mainly used for Blog module thumbnails and works equally fine both in grid and slide versions.

Ideal dimensions required for this image format are 400x 250 px and a ratio of 16:9.

Image Format 2: pb-post-main-image-fullwidth

This image format is ideal for headline images that come under the top of your blog articles.

Ideal dimensions required for this image format are 1080 x 675 with 16:10 ratio.

Image Format 3: pb-portfolio-image

This image format is useful for the Gallery module and Portfolio Module in Grid mode

Ideal dimensions required for this image format are 400 x 284 and ratio of 100:71.

Image Format 4: pb-portfolio-module-image

This image format is perfect with 510 x 382 dimensions

Image Format 5: pb-portfolio-image-single

This image format is used for the front page images with Fullscreen mode. It’s ideal for Portfolio images and the only image format that will never undergo cropping.

– Ideal dimensions required for this image format are: 1080 x 9999 Full screens

Image Format 6: PB-gallery-module-image-portrait

This image format is used for the Gallery module and ideal for Portrait Mode.

– Ideal dimensions required for this image format are: 400 x 516 with a ratio 100:129

Image Format 7: pb-post-main-image-fullwidth-large

This Image format is mainly used for the “Full-width image” module

– Ideal dimensions required for this image format are:  2880 x 1800

What factors should be considered to get an ideal image size

If you are looking to get a consistent appearance of all of your images throughout the website, you should consider three factors that should are essential to get an ideal look of your images.

These iconic factors are

1. Aspect ratio (dimensions of the image: width x height)
2. Column ratio (Maximum width of the image)
3. Responsiveness(how well optimized are your images)

1. Aspect Ratio

Most importantly, the aspect ratio plays a pivotal role in keeping a consistent appearance throughout your website. Most of the time, when we upload an image, we get the cropped version of the original images to get the perfect thumbnail of the image.

However, if the original image and the thumbnail image have almost the same aspect ratio, there won’t be any cropping. Most likely, if the original image has a different aspect ratio than the thumbnail image ratio, then most of the parts of the original image would be cropped.

Have a look at these two images which we have selected. One is a portrait and the other is a landscape image.

Portrait image for WordPress image size

Landscape image

To get the accurate aspect ratio, we’ll divide the width by height, and the aspect ratio will be 1.6. And if we keep 1080 x 675 which is default Divi setting for images with same 1.6 ratios, the images won’t get cropped. So it’s ideal for keeping in view the image aspect ratio to get the best-fit image size.

Now, when Divi generated the thumbnail(400x 250) of the original images, the portrait image (1250x1300px) lost a lot of image area because of the greater difference in aspect ratio.

In contrast, the landscape image is slightly cropped because there is no such huge difference between the aspect ratio of landscape image (1552/ 842) = 1.84 and it is nearby 1.6 ratio.

 

Divi supports three aspects ratios on its site, and it’s because these are the most popular aspect ratios in use these days. These are the dimensions of width x height of an image. Such as

• 16:9 aspect ratio with wider display images
• 4:3 box-like images
• 3:4 ideal for portraits

We’ll show you, what is the ideal aspect ratio along with each column size in the next section.

2. Column Ratio

Divi is packed with different column layouts that can support a multitude of different sizes of images. Once you decide the column ratio, then you can quickly scale up the images to fit into these screen sizes.

Make sure; you select an image that is wide enough to fit into the column you decided for your image.

Here are a few recommendations of each image size for the column size you decided on.

1. If you decide to use an aspect ratio of 16:9, then the recommended images dimensions are as follows

1 column: 3/4 column 2/3 column: 1/2 column: 1/3 column: 1/4 Column

1080px by 608px 795px by 447px 700px by 394px 510px by 287px 320px by 181px 225px by 128px

2. If you prefer aspect ratio of 4 x 3 then ideal images dimensions would be as follows

1 column: 3/4 column: 2/3 column: 1/2 column: 1/3 column: 1/4  column:

1080px by 810px 795px by 597px 700px by 526px 510px by 384px 320px by 241px 225px by 170px

Ideal Image dimensions when using Divi Image Modules

If you are using the image module to add your images in Divi, you can simply choose the aspect ratio of 16:9 or 4:3.

If you like to go with 4:3 aspect ratios with 4 column layouts, the ideal dimensions of images should be 225Px x 170Px.

Likewise, if you choose two columns with an aspect ratio of 4×3, the ideal image dimensions should be 510Px x 384 Px.

 

 

3. Responsiveness of images

The third most important factor that you should keep in view is how well your image will look on mobile and tab screens. You need to check out how your chosen column layouts turn on mobile screens and if your images look bigger or smaller than that on the Desktop site.

To check the mobile responsiveness, you can use Divi’ Mobile/ tab view at the end of the setting section.

 

You can visualize three screen modes; desktop, tab and Mobile. Switch these tabs to see how your image will look on different screen sizes.

 

Now let’s summarize the key factors to get a perfect Divi image size.

Rule of Thumb to get Perfect Divi image size

• Keep same aspect ratios of all of your “featured images” on your blog to get a consistent aspect ratio throughout your site. By aspect ratio, we mean image dimension; width x height, for example, if you are using one column width, then 1080 x 680 Px would be best with an aspect ratio of 16:9.
• If you keep all of your image sizes aspect ratios as same as the thumbnail’s, your images won’t undergo cropping.
• Other than keeping in view the image aspect ratio, keep the image size maximum to 250 KB.
• To keep your background image sizes short, use a blurred background that’ll reduce the image size substantially.

 

 

Let’s Move on to next section, about how to you can optimize your divi image size for better Site SEO.

 

How to optimize your images before uploading on your site

Now, you’ll have a better picture of how to get the right size of your Divi images. Next, we’ll talk about another important factor the “Image optimization.”

Once you have selected the right set of image dimension and sizes, your next task is to optimize your images and keep their image size shorter.

The reason behind keeping smaller image file size is that they take less space on your site and your site could load at a faster pace.

Larger files take longer to load on the page. Hence, you’ll experience more bounce rate, and it will ultimately affect your site’s SEO.

1. Resize the images before uploading

An ideal image file size is between 60Kb to 250Kb to get the best performance. Therefore, it’s highly recommended to resize the image before uploading on your site. And if you want to use an image on multiple pages with different dimensions than its better to get the specific size before uploading on your page. You can easily resize your images using a free WordPress extension “Simple image sizes” that will help you in creating custom image sizes.

2. Compress images

If you have a larger image file size, you can easily compress the image size without compromising on the quality of the image. With the help of quality compression tools, you can reduce the image size up to 70% without losing the quality.  Some of the tried and tested Compress tools are;

1.Imgify WordPress plugin: automatically optimizes all of your site images to get lighter images.

2. Compress PNG/ JPEG: compresses all PNG/ JPEG images using lossless compression
3. Smush: it automatically resizes and compresses images using lossless compression technique.

3. Image SEO

Google will rank your images using the Alt text information. Therefore, when you upload the images, you can add Alt text, caption and a brief description of your images.

4. Choose the right image format

The most common file formats used for images are PNG/ jpeg. Choose the right file format for your images. JPEG is best for Photos and ideal for background and featured images. While PNG is suitable for smaller images that require more details like icons, logos and buttons. Also, the GIF format is another excellent choice for a short animation.

5. Use limited images only

Overloading your site with plenty of images is not recommended because it will affect your page loading speed. You should upload limited images only, and it’s better to use content plus images combination to present an excellent balanced content for your visitors.

Final Thoughts

I hope my article would be helpful to you, to understand how Images plays a vital role in promoting users engagement on your site and how you can select the perfect Divi image sizes for your website. But before making any changes to your image sizes, keep a backup of your site or do these changes locally to avoid any type of inconvenience.

You can easily select the perfect Divi image size by choosing the right aspect ratio in combination with Divi column layout. Also, don’t forget the SEO optimization factor of your images because it is equally important as that of image size.

 

Divi Image Hover Plugin

250+ Hover Effects and much more functionality to create your images more interactive