Here's a tricky one: Divi's image sizes. In fact, it's not just Divi, all WordPress themes use specific image sizes and many users can get frustrated at one point or another.
When I give Divi training and WordPress, 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 be two solutions to remedy this:
- or you bend to your theme and use the right format so that your image is not cropped unintentionally.
- or you make some changes so that it is the theme that fits your requirements.
I bet you prefer the latter, don't you? In this article, we will discuss all these points. Here is the programme:
- 1. How does WordPress handle your images?
2. How does Divi handle your images?
- Image format n°1: et-pb-post-main-image
- Image format n°2: et-pb-post-main-image-fullwidth
- Image format 3: et-pb-portfolio-image
- Image format 4: et-pb-portfolio-module-image
- Image format 5: et-pb-portfolio-image-single
- Image format n°6: et-pb-gallery-module-image-portrait
- Image format n°7: et-pb-post-main-image-fullwidth-large
- 3. How can I get the right images while keeping the size of the images in Divi?
- 4. How do I change the size of my Divi images to customise my site?
- 5. Divi Image Size Summary Table
Announcement: this article contains affiliate links that you will easily recognise. The classic links are in purple and sponsored links are in pink.
1. How does WordPress handle your images?
First, we 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 => this is the original size of your image.
Now, if you look at the files on your site, via FTP (Filezilla), at www > wp-content > uploads > year folder > month folder, you will realise that WordPress has multiplied your image into 5, 6, 7 or 8 files or even more! This is called THUMBNAILS or VIGNETTES.
Not using Divi yet? Here are 10 reasons to choose this theme !
However, if you go into your WordPress administration, to the Settings > Media tab you will only see 3 thumbnail sizes: thumbnail size, medium size and large size.
These three formats are the standard formats that WordPress needs (for example, to display your media thumbnails in the library).
So where do the other thumbnails that have been generated come from? It'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.
Did you know? You can test Divi for free by visiting on this page and clicking on "TRY IT FOR FREE
2. How does Divi handle your images?
As we have just seen, WordPress needs 3 image formats, but the Divi themeIn addition to the above, 7 additional formats are needed, as follows:
Image format n°1: et-pb-post-main-image
This is the format used for the vignettes of the BLOG Module in both grid and slide versions. This format is set to 400px * 250px - a ratio of 16:10 (slightly different from 16:9).
You may also be interested in this: how to get square images for the Blog, Gallery and Portfolio modules.
Image format n°2: et-pb-post-main-image-fullwidth
This is the format used for the front page images that appear at the top of each of your articlesjust below the title. This format is set to 1080px * 675px - still a 16:10 ratio.
Image format 3: et-pb-portfolio-image
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 on the thumbnail page (with all the module entries). This format uses the dimensions 400px * 284px - a ratio (rather bastard, sorry about the word) of 100:71.
Image format 4: et-pb-portfolio-module-image
This format uses the dimensions 510px * 382px. Beyond that your images will be cropped.
Image format 5: et-pb-portfolio-image-single
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 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 retain their ratio whether in portrait or landscape. These are the only images in Divi that are not cropped.
Image format n°6: et-pb-gallery-module-image-portrait
This is the format used for the Gallery module set to "Portrait Mode. This format uses the dimensions 400px * 516px - a ratio of 100:129.
Image format n°7: et-pb-post-main-image-fullwidth-large
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 can I get the right images while keeping the size of the images in Divi?
Now that we've covered the different image sizes used by the Divi theme, this will help you understand which images to use if you want to keep the sizes offered by Divi...
3.1 Understanding the importance of the RATIO (or REPORT)
If you look at it carefully, the most important thing to get the right results for displaying your images in WordPress is to take into account the ratio. In fact, the dimensions are of little importance and often the most difficult 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/3 and the height is equivalent to 2/3. So a 900px wide image will have to be 600px high to keep a 3:2 ratio. The same goes for images of 1800px*1200px, they will always have a 3:2 ratio.
The 4:3 ratio
These images will have a width of 4 quarters for a height of 3 quarters. For example: 1000px*750px or 1600px*1200px etc...
The 16:9 ratio
This works like any other ratio, except that you will probably 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, in particular for the "front page images" of articles and thumbnails of the "blog module in grid mode".
The ratio is nothing more or less than mathematics and there is a site that will allow you to know the ratio of your images by simply filling in the width and height of it.
3.2 Resizing your images before uploading to WordPress
Well, I think this makes it clearer. We know that dimensions are only important because they affect the weight of the images, but the ratio is much more important. So if you want to keep the Divi image sizes, you'll need to crop your images to the correct ratio.
This article will surely help you: find out how to avoid cropped images in Divi.
Everything has been said above: if you want Divi to stop cropping images on the front page of your articles, don't use images with an inappropriate ratio, such as portrait images or panoramic images for example.
On this blog, for example, I have not changed the size of my front page images, I have simply adapted my visuals. To do this, I resize all my front page images to 1000*625px (ratio 16:10) but I could have used other dimensions while keeping the same ratio, for example: 800*500px or even 1200*750px.
Resizing your images before uploading them to WordPress is inevitable:
- if you want to obtain a suitable image weight for improve the performance of a site
- if you want to adapt the image format to the dimensions used by the theme
- if you don't 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 to optimising images for the web.
4. How do I change the size of my Divi images to customise my site?
Obviously, depending on your project, you may want to change the size of the images in Divi.
Would you like your front page images to be square to match your Instagram images or would you like them to be portrait to match Pinterest?
It's doable and easy! We are going to see a method that will not require any special coding. So even beginners can do it!
Tips: there is also an alternative for display images in Divi format.
4.1 - Install and activate the Simple Media Sizes extension
Simple Media Sizes is a free extension available from the official WordPress directory, i.e. directly from your administration in the Extensions > Add tab. Just install it 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 have to do is enter the new width or height of the thumbnail you want to change.
- if you want your front page images to be square: change the thumbnail et-pb-post-main-image as well as et-pb-post-main-image-fullwidth with dimensions like 400*400px and 1080*1080px (respectively).
- if you want your images on the front page to be in portrait format: do the same thing with a 3:4 ratio for example.
Finally, click on the blue "update" button.
4.3 - Regenerating thumbnails
You now have a new image format. It will be perfect for future images you upload to WordPress, but in the meantime, to get your old images (those already in the media library) to work, you need to regenerate the thumbnails.
It's very simple but it can be time consuming if your library is very busy. Don't forget to save your changes.
4.4 - Checking the result
Here is an example of the Blog Module where the thumbnails have been modified to display square images.
Don't delay! Discover the Divi theme here !
5. Divi Image Size Summary Table
I hope this article has helped you understand how images work in WordPress and how to size images in Divi.
If you want to start making 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 solve simply by leaving a comment on this article).
Perhaps this summary table will help you:
|Divi Image Class||Use of images||Ratio||Width||Height|
|et-pb-post-main-image||Thumbnails of the BLOG module in grid & slide version||16:10||400px||250px|
|et-pb-post-main-image-fullwidth||Featured image (at the top of the articles)||16:10||1080px||675px|
|et-pb-post-porfolio-image||Images of the Gallery module and the Portfolio module in grid version||100:71||400px||284px|
|et-pb-post-porfolio-image-single||Highlight image on PROJECTS & images of portfolio entries in full screen version||-||1080px||9999px|
|et-pb-gallery-module-image-portrait||Images of the Gallery module in Portrait version||100:129||400px||516px|
|et-pb-post-main-image-fullwidth-large||Full-width images from the image module||-||2880px||1800px|