How to change the size of Divi's images?

This is a tricky subject: the size of Divi's images. In fact, it's not just Divi, all WordPress themes use specific image sizes and many users can feel frustrated at one time or another.

When I give WordPress and/or Divi training, there are many questions that come up every time:

• why is my image cropped - cut - cropped?
• why does my portrait image appear in landscape format?
• why is my image zoomed in?

I know it's quite annoying. There will then be two solutions to remedy this:

1. either you bend to your theme and use the appropriate format so that your image is not cropped unintentionally.
2. or you can make some modifications so that it is the theme that fits your requirements.

I bet you prefer the second solution, don't you? But in this article, we will discuss all these points. Here is the program:

• 1. How does WordPress manage your images?
• 2. How does Divi manage your images?
  • Image format n°1 : and-pb-post-main-image
  • Image format n°2: and-pb-post-main-image-fullwidth
  • Image format 3: and-pb-portfolio-image
  • Image format n°4 : and-pb-portfolio-module-image
  • Image format n°5: and-pb-portfolio-image-single
  • Image format n°6: and-pb-gallery-module-image-portrait
  • Image format #7: and-pb-post-main-image-fullwidth-large
• 3. How to obtain correct images while keeping the size of Divi's images?
  • 3.1 Understand the importance of RATIO (or REPORT)
    • The 1:1 ratio
    • The 3:2 ratio
    • The 4:3 ratio
    • The 16:9 ratio
    • The 16:10 ratio
  • 3.2 Resizing images before uploading to WordPress
• 4. How to change the size of Divi's images to customize its site?
  • 4.1 - Installing and activating the Simple Media Sizes extension
  • 4.2 - Changing the size of Divi images
  • 4.3 - Regenerating miniatures
  • 4.4 - Check the result
• 5. Conclusion

You don't use Divi yet? Here are 10 reasons to choose this theme !

Advertisement: This article contains affiliate links that you will easily recognize. Classic links are in purple and sponsored links are in pink.

1. How does WordPress manage your images?

First, you will need to understand what WordPress does when you upload an image to the media library.

For example, you upload an image with a size of 1280px * 720px to your library => it is the original format of your image.

Now, if you look at the files on your site, via FTP (Filezilla), in the www > wp-content > uploads > folder year > folder month, you will realize that WordPress has multiplied your image in 5, 6, 7 or 8 files or even more! This is called THUMBNAILS or VIGNETTES.

10 thumbnails were generated during the upload in addition to the original - in yellow: the original image - in blue: the images generated by WordPress - in pink: the images Divi needs

However, if you go to your WordPress administration, under Settings > Media tab you will only see 3 thumbnail formats: thumbnail size, medium size and large size. These three formats are the standard formats that WordPress needs (for example, to display thumbnails of your media in the library).

WordPress media size available in the Settings tab > Media

Where do the other thumbnails that have been generated come from? That's the theme of course! Your theme also needs thumbnails to work. Each theme has different visuals so each theme will need different image formats.

2. How does Divi manage your images?

As we have just seen, WordPress needs 3 image formats, but the Divi themerequires 7 additional formats, here they are:

Image format n°1 : and-pb-post-main-image

Divi Blog Module in "grid" mode

This is the format used for the BLOG Module thumbnails in both "grid" and "slide" versions. This format is set with dimensions of 400px * 250px - a ratio of 16:10 (slightly different from 16:9).

Image format n°2: and-pb-post-main-image-fullwidth

Front page image at the top of a Divi article

This is the format used for the headline images that appear at the top of each of your articles, just below the title. This format is set with dimensions of 1080px * 675px - always a 16:10 ratio.

Image format 3: and-pb-portfolio-image

Gallery module in "grid - landscape" mode

Portfolio" module (porfolio / project) in "grid" mode

This is the format used for the Gallery Module and the Portfolio Module in "Grid" mode (Portfolio which is related to the custom post type "Project") when you are on the thumbnail page (with all module entries). This format uses the dimensions of 400px * 284px - a ratio (quite bastard, sorry for the word) of 100:71.

Image format n°4 : and-pb-portfolio-module-image

This format uses the dimensions 510px * 382px. Beyond that your images will be trimmed.

Image format n°5: and-pb-portfolio-image-single

Image at one of the Divi Projects

This is the format used for the front page image that appears at the top of each of your projects (Portfolio) but also for the images on the Portfolio Module's project page in "Full Screen" mode. This format uses the dimensions of 1080px * 9999px. Generally, none of your images will have this size but this means that your image will only be cropped if it is higher than 9999px.

In other words, these images will be able to keep their ratio whether in portrait or landscape. These are the only Divi images that do not undergo cropping.

Image format n°6: and-pb-gallery-module-image-portrait

Gallery module in "grid - portrait" mode

This is the format used for the Gallery Module positioned in "Portrait Mode". This format uses the dimensions of 400px * 516px - a ratio of 100:129.

Image format #7: and-pb-post-main-image-fullwidth-large

Full width image module

This is the format used for the "Full width image" module. It uses the dimensions 2880px * 1800px. Beyond these dimensions, your image will be cropped.

3. How to obtain correct images while keeping the size of Divi's images?

Now that we have reviewed the different image sizes used by the Divi theme, it will help you to understand which images to use if you want to keep the sizes offered by Divi....

3.1 Understand the importance of RATIO (or REPORT)

If we look closely, the most important thing to get correct results for displaying your images in WordPress is to take into account the ratio. In fact, dimensions are of little importance and this is often the most difficult thing to understand. Here are some examples:

The 1:1 ratio

This 1:1 ratio means that the width is equivalent to the height. So a 1000*1000px image, a 750px*750px image or even a 500px*500px image will always have the same ratio.

The 3:2 ratio

This ratio means that the width is equivalent to 3 thirds and the height is equivalent to 2 thirds. So an image 900px wide will have to be 600px high to maintain a 3:2 ratio. Ditto for 1800px*1200px images, they will always have a 3:2 ratio.

The 4:3 ratio

These images will be 4 quarters wide and 3 quarters high. For example: 1000px*750px or 1600px*1200px etc...

The 16:9 ratio

It works well of course like the other reports, except that we will certainly need a calculator to do this calculation: [(width of an image)/16*9 = height]. This format is widely used in video: 1920px * 1080px.

The 16:10 ratio

This format is less known, it is close to 16:9 and it is the format used by Divi, especially for the "headline images" of the articles and thumbnails of the "blog module in grid mode".

The ratio or ratio is neither more nor less than mathematics and there is a site that will allow you to know the ratio of your images by simply entering the width and height of the latter.

3.2 Resize images before uploading to WordPress

Well, I think that now everything is becoming clearer. We know that dimensions are important only because they affect the weight of the images but that the ratio is much higher. So if you want to keep Divi's image sizes, you will have to crop your images according to the appropriate ratio.

Everything has been said above: if you want Divi to stop cropping images to one of your articles, do not use images with an inappropriate ratio, such as portrait images or panoramic images for example.

On this blog, for example, I didn't change the size of my images to the front page, I simply adapted my visuals. To do this, I resize all my images one by one to the size of 1000*625px (ratio 16:10) but I could very well have used other diemensions while keeping the same ratio, such as 800*500px or even 1200*750px.

Resizing your images before uploading them to WordPress is inevitable:

• if you want to obtain an image weight suitable for improve the performance of a site
• if you want to adapt the image format to the dimensions used by the theme
• if you do not want the displayed images to be cropped

To retouch your images, you can use software such as Photoshop, Affinity Photo, Affinity Designer, Gimp etc... and I advise you to read this guide dedicated to image optimization for the web.

4. How to change the size of Divi's images to customize its site?

Obviously, depending on your project, it is strongly possible that you may want to change the size of Divi's images.

You would like the images on one of your articles to be square to match your Instagram images or you would like them to be in portrait format to match Pinterest?

It's feasible and easy! We will see a method that will not require any special coding. As a result, even beginners will be able to do it!

4.1 - Installing and activating the Simple Media Sizes extension

Simple Media Sizes is a free extension available on the official WordPress directory, i. e. directly from your administration to the Extensions tab > Add or by download here. All you have to do is install and activate it.

4.2 - Changing the size of Divi images

Once the extension is activated, you just have to go to the Settings > Media tab to find a nice surprise: all the image sizes used by Divi have appeared.

All you will have to do is enter the new width or height of the thumbnail you want to change.

For example:

• if you want your images to be square: change the thumbnail and-pb-post-main-image as well as and-pb-post-main-image-fullwidth with dimensions such as 400*400px and 1080*1080px (respectively).
• if you want your images to be in portrait format: do the same thing with a 3:4 ratio for example.
• etc....

Finally, click on the blue "update" button.

4.3 - Regenerating miniatures

You now have a new image format. It will be perfect for future images you upload to WordPress, but in the meantime, for your old images (those already in the media library) to work, you must regenerate the thumbnails.

It's very simple but it can be long if your library is very busy. Don't forget to save your changes.

4.4 - Check the result

Here is an example of the Blog Module whose thumbnails have been modified to display images in square format.

Discover Divi now!

5. In conclusion....

I hope this article has helped you understand how images work in WordPress and the size of Divi images. If you want to make these kinds of changes, I strongly advise you to duplicate your site locally to do your experiments in order to avoid encountering problems (which I could not help you to solve simply by leaving a comment on this article).

Perhaps this summary table can help you: