There seems to be a lot of confusion regarding how WordPress handles images uploaded to the Media library. My goal in this post is to make things more clear and remove some of the confusion, particularly in regards to the Divi theme. But before we can understand images in Divi, we need to understand how WordPress handles images and creates thumbnails.

Cheat Sheet

If you’re uploading landscape images and simply want a recommended, minimum image size to use in Divi for blog posts and projects:

Divi Blog Post Featured Image Size – 1080 x 675

Divi Project Featured Image Size – 1080 x 810

 

If you post a lot to Facebook and want something that will work well for both Divi and Facebook:

Divi Blog Post Featured Image Size – 1200 x 750

Divi Project Featured Image Size – 1200 x 900

If you upload these sizes for each post type, you won’t be disappointed. If these sizes won’t work for you, continue reading to understand why we chose these sizes and what your options are for changing them.

 

WordPress Thumbnails

When you upload an image to WordPress, WordPress adds the image to your media library and attempts to automatically create three thumbnail sizes for the image – thumbnail, medium, large. The default dimensions in pixels are as follows:

• Thumbnail – 150 x 150
• Medium – 300 x 300
• Large – 1024 x 1024

These thumbnail images are intended to be used by plugins and themes to provide a smaller version of your image that can be loaded much faster by a browser than the original. Why load a large image that will be used to fill a small space? The Recent Posts Widget With Thumbnails plugin for example will use the thumbnail image (150 x 150) by default when displaying posts in the sidebar.

It’s important to understand that WordPress will not create a thumbnail if the original image is smaller than the thumbnail size.

For example, if you upload an image that is 100px x 100px, WordPress will not create a single thumbnail for that image because the image is smaller than all of the default thumbnail sizes listed above.

I have found that this is one of the most confusing concepts for WordPress users to understand. If you are using a plugin that relies on a thumbnail to exist and the layout created by the plugin has missing or inconsistent image sizes, it’s almost always because you uploaded an image that was too small and the thumbnail needed by the plugins was not created. More on that below.

 

Divi Thumbnails

In addition to the default thumbnail sizes added by WordPress, themes and plugins can also register thumbnail sizes they want WordPress to automatically create when you upload an image. The following are thumbnail sizes registered by Divi and the modules that use those thumbnails:

• et-pb-post-main-image – 400 x 250 (blog module – grid layout)
• et-pb-post-main-image-fullwidth – 1080 x 675 (blog module – fullwidth layout)
• et-pb-portfolio-image – 400 x 284 (portfolio module – grid layout)
• et-pb-portfolio-module-image – 510 x 382 (portfolio module – carousel & fullwidth grid layout)
• et-pb-portfolio-image-single – 1080 x 9999 (single portfolio post)
• et-pb-gallery-module-image-portrait – 400 x 516 (gallery module)
• et-pb-post-main-image-fullwidth-large – 2880 x 1800

When you upload a new image to WordPress and have the Divi theme installed, WordPress will attempt to automatically create the default thumbnail sizes discussed earlier AND the thumbnail sizes above. That’s why it can sometimes take several seconds to upload an image to the Media library. WordPress is creating all of these thumbnail images in the background.

The same rule applies to Divi’s registered thumbnail sizes. If the original image uploaded is smaller than one of the thumbnails above, WordPress will not create that thumbnail.

 

Divi Image Rule #1

Now that we understand how thumbnail images are created, we can better understand why we might have visual inconsistencies when those images are displayed in the Divi theme and we can create our first rule:

Images must be as large as thumbnail dimensions

We now know in order for a thumbnail to get created, the image must be larger than the thumbnail size.

Let’s take the Divi Blog module for example.

Divi’s Blog module, when displayed in a grid layout, loads the 400 x 250 thumbnail of the featured image from each post. That means in order for your blog images to remain consistent when displayed in the blog module, the featured image needs to be at least 400 x 250 for this thumbnail to get created and available in the module.

But what happens if you upload an image that is smaller than 400 x 250? This is where we get our first inconsistency. Instead of loading the 400 x 250 thumbnail, Divi will load the original image. In the example below, the first post has a featured image that is 400 x 200.

If you’re OK with a mason style layout and don’t care if your images are exactly the same size, this might not be a big deal. But for many WordPress users who like everything consistent, this screenshot is giving you anxiety.

 

Divi Image Rule #2

The next Divi rule pertains to aspect ratio. Just because we upload an image large enough to create a thumbnail doesn’t mean we’ll get our desired effect. The aspect ratio of the image is just as important as the minimum size.

Featured Images should have the same or very similar aspect ratio as module thumbnails

Emphasis on “featured” images. If you want all of your blog post images to have a consistent appearance throughout your site, your blog post featured images should have the same aspect ratio as the thumbnails used in the blog module. The same is true for projects and the project modules (although the ratios are different). Here’s why.

The Divi thumbnail images used in the modules are cropped versions of the original versions of the images you upload. WordPress crops the original image from the horizontal and vertical center position of the original image. If the original image has the same aspect ratio as the thumbnail, there won’t be any cropping. If the original image has a different aspect ratio as the thumbnail, parts of the image will be cropped. The greater the difference, the greater the crop.

Let’s start with blog posts again in our example.

If we divide the width by the height in the 400 x 250 thumbnail used in the Blog module, we get an aspect ratio value of 1.6. Now let’s do the same for the 1080 x 675 thumbnail size. This is the thumbnail that will get loaded on the single blog post page if you have the “Place thumbs on Posts” option turned on in Divi -> Theme Options -> Layout -> Single Post Layout. The aspect ratio value for this image is also 1.6.

This means if we upload 1080 x 675 featured images for all blog posts, the images will be consistent throughout the website. The thumbnails will not be cropped versions of the originals and will look exactly like the original images, but smaller.

What if the aspect ratio is different and the images are cropped? Let’s look at these two images:

 

The first image is a portrait image (taller than it is wide). The second image is a landscape image (wider than it is tall). Let’s see how these two images look in the Divi Blog module in a grid layout.

When WordPress created the 400 x 250 thumbnails for the images above, it cropped the original image from the left two images from the center of each image.

You can see in the Portrait image on the left we lost a lot of the image because the aspect ratio value of that image is .89 (1224 divided by 1368). That’s pretty far from our target aspect ratio value of 1.6 (400 divided by 250).

But in the Landscape image, the aspect ratio value is 1.84 (1552 divided by 842). That’s not too far from our target aspect ratio value, so the image was only slightly cropped on the left and right sides.

This illustrates that the closer you can get your featured images to the recommended aspect ratios at the top of this post, the better results you’ll have when using the Divi blog and portfolio modules.

 

Divi Image Rule #3

Not all websites can use landscape images or landscape images with a 1.6 aspect ratio value. Luckily Divi makes it easy to modify the thumbnail size loaded in the modules and brings us to the third rule.

You can use a filter to load images with different aspect ratios in Divi (including square or portrait images)

If the default landscape image sizes won’t work for your site, you’ll need to add a WordPress filter to Divi to load different thumbnail sizes in the modules. The good news is this is not difficult to do. You can follow this tutorial to change the size of the thumbnails loaded in Divi’s blog and portfolio module.

The tutorial above will show you how to easily add a new thumbnail size to Divi and recommends a plugin that will create those thumbnails for existing images on the site (remember WordPress creates thumbnails when you upload the image to the Media library).

But the same rule applies. If you follow the tutorial in the link above to change the thumbnail size loaded in the modules, your featured images should have the same aspect ratio value as the size you set in the filter.

For example, maybe you post a lot of images to Facebook and want your Divi blog images to align with Facebook’s recommended image size (1200 x 630). That gives us an aspect ratio value of 1.9. That’s not too far from the default 1.6 value so in many cases the default blog module 400 x 250 thumbnail size might be fine. But if you add text to your images, the text might get cut off when the image is cropped.

The solution would be to upload 1200 x 630 featured images and use the tutorial above to change your blog module to load 400 x 210 thumbnails. Both images will have a 1.9 aspect ratio value and the blog module thumbnails will not get cropped.

Divi Image Rule #4

It’s important to realize when we say “image size”, we are referring to the width and height values of the image – the dimensions. The actual file size of the image in bytes needs to be as small as possible so it can be loaded in a browser as fast as possible.

Featured images should not exceed 250 KB in size

This is a very subjective and fluid rule. As the internet and mobile networks get faster, this number will likely increase. But as of today, you should do your best to keep your featured image sizes below 250 KB.

• Google is giving faster websites a slight bump in rankings.
• There’s plenty of research that suggests users will abandon a webpage if it takes longer than 2-3 seconds to load.
• Smaller images will be easier on your web server.

While all of the above is very important, you’ll also need to balance them out with other factors on a per-image basis.

• Some images with a lot of detail are not going to look great at 250 KB. If you have to go over, try to stay as close to 250 as possible.
• If you’ve modified your blog template or using the Divi Page Builder to show featured images as background images, you might need to increase the size. Another trick is to pick images with less detail, a lot of the same color, and images with blurred backgrounds. All of these can greatly reduce the image size without sacrificing visual quality.
• For some websites, image quality might be much more important than page speed or making Google happy. A photographer for example would probably have good reason to break this rule.

You’ll also want to run your images through an optimizing/compression program. Adobe Photoshop allows you to export images for web and adjust the image quality, fine tuning it so the image is under a certain size. TinyPNG is also a great online tool.

If your client will be uploading the images, you obviously have less control over the size and optimization techniques of the images they’ll be uploading. You can use this free plugin to force limit the image size. And you can use the TinyPNG plugin (free but limited to about 100 images per month) to force optimize the images uploaded by clients.

Divi Image Rule #5

It’s important to remember that these rules are not hard rules and can be broken depending on the situation which brings us to the final rule of thumbnail images for Divi.

If you’re not using the Divi modules to display your posts or projects, you can ignore or adjust some of these rules

*You can’t ignore the first rule. That one is gospel.

The first four rules are meant as a recommended guide to follow so your images look consistent throughout your website, whether they are displayed in a Divi blog or portfolio module or displayed on the single post or project page. But if you don’t plan to use the built-in Divi modules, some of the rules won’t apply or may need to be adjusted.

There are plenty of plugins out there that will display your posts and projects in different ways, inserting images as background images or different thumbnail sizes. It’s impossible to make hard rules that apply in every situation, because every situation has the possibility of being completely unique. If the plugin you’re using to display your posts uses a different thumbnail size, you’ll need to adjust the rules above to work with that thumbnail size.

If you do plan on using the default Divi modules to display your posts or projects, the first three rules will serve you well. If you’re not, hopefully you’ve learned enough from this post to point you in the right direction on what size images you should upload to your Divi or any WordPress website.

 

Migrating From Another Theme to Divi

If your WordPress website originally had another theme installed and you have since installed Divi and want to use the blog or portfolio modules to display your posts or projects, you’ll likely need to install this plugin:

Regenerate Thumbnails

Why? If you read this post, you know thumbnails only get generated when the image is originally uploaded. If you had another theme installed when you uploaded some of your images, it’s unlikely that theme used the same thumbnail sizes as Divi. This means those images do not have thumbnails in the Divi sizes listed above.

To fix this, you’ll need to install the plugin above to regenerate your thumbnails. This plugin will go through all existing images on your site and generate any missing thumbnails that have been registered by you, a plugin, or a theme.