This is a thorny subject: the size of Divi's images. In fact, it's not just Divi, all WordPress themes use specific image sizes and many users may feel frustrated at one time or another.
When I give WordPress and/or Divi trainings, 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?
I know it's pretty abiodun. There will then be two solutions to remedy this:
- Either you fold to your theme and you use the proper format so that your image is not cropped inopportunely.
- Either you make some changes so that this is the theme that bends to your requirements.
I bet you prefer the second solution, don't you? But in this article, we will address all these points. Here's the program:
- 1. How does WordPress manage your images?
- 2. How does Divi manage your images?
- Image Format N ° 1: Et-PB-post-Main-image
- Image Format N ° 2: Et-PB-post-Main-image-Fullwidth
- Image Format N ° 3: Et-PB-Portfolio-image
- Image Format N ° 4: Et-PB-Portfolio-module-image
- Image Format N ° 5: Et-PB-Portfolio-image-Single
- Image Format N ° 6: Et-PB-Gallery-module-image-Portrait
- Image Format No. 7: Et-PB-post-Main-image-Fullwidth-Large
- 3. How do I get correct images while retaining the size of the Divi images?
- 3.1 Understanding the importance of the 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 Resize its images before downloading in WordPress
- 3.1 Understanding the importance of the ratio (or report)
- 4. How do I change the size of the Divi images to customize their site?
- 4.1 – Install and enable Media sizes Simple extension
- 4.2 – Change the size of Divi images
- 4.3 – Regenerate the miniatures
- 4.4 – Check the result
- 5. Conclusion
Not using Divi yet? Here are 10 reasons to opt for this theme !
Announcement: This article contains affiliate links that you can easily recognize. The classic links are in purple and the sponsored links are in pink.
1. How does WordPress manage your images?
At first, you'll have to understand what WordPress does when you upload an image to the Media library.
For example, you download an image of a dimension of 1280px * 720p in your library = > This is the original format of your image.
Now, if you look at the files of your site, via FTP (Filezilla), to the tree 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 thumbnails.
However, if you go to your WordPress administration, on the tab Settings > Media you will see only 3 thumbnail sizes : thumbnail size, medium size and largesize. These three formats are the standard formats that WordPress needs (for example, to display the thumbnails of your media in the library).
Where did the other thumbnails that were generated come from? that's the theme of course! Your theme also needs thumbnails to work. Each theme offers 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 Theme Divi, as for him, needs 7 additional formats, here they are:
Image Format N ° 1: Et-PB-post-Main-image
This is the format used for the thumbnails of the BLOG Module in the "grid" version as a "slide" version. This format is set with the dimensions of 400px * 250px – a ratio of 16:10 (slightly different from 16:9).
Image Format N ° 2: Et-PB-post-Main-image-Fullwidth
This is the format used for the images that appear at the top of each of your articles, just below the title. This format is set with the dimensions of 1080p * 675px – Always a ratio of 16:10.
Image Format N ° 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 Thumbnails page (with all modules entries). This format uses the dimensions of 400px * 284px – a ratio (pretty bastard, sorry of the word) of 100:71.
Image Format N ° 4: Et-PB-Portfolio-module-image
This format uses the 510px * 382px dimensions. Beyond your images will be cropped.
Image Format N ° 5: Et-PB-Portfolio-image-Single
This is the format used for the one image that appears at the top of each of your projects (portfolio) but also for the images on the project page of the Portfolio Module in "full screen" mode. This format uses the dimensions of 1080p * 9999px. Generally, none of your images will have this dimension but it means that your image will only be cropped if it has a height greater than 9999px.
In other words, these images will be able to maintain their ratio whether in portrait or landscape. These are the only images of Divi that do not undergo cropping.
Image Format N ° 6: Et-PB-Gallery-module-image-Portrait
This is the format used for the Gallery Module positioned on the "Portrait Mode". This format uses the dimensions of 400px * 516px – a ratio of 100:129.
Image Format No. 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 do I get correct images while retaining the size of the Divi images?
Now that we've been around the different sizes of images used by the divi theme, this will help you figure out which images to use if you want to keep the sizes proposed by Divi...
3.1 Understanding the importance of the ratio (or report)
If you look well, the most important thing to get the correct results for displaying your images in WordPress is to take into account the ratio. In fact, dimensions have little importance and that is often the hardest 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 an image 1000 * 1000px, an image 750px * 750px or even a picture 500px * 500px 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 of 900px width must have a height of 600px to maintain a ration of 3:2. Ditto for the images of 1800px * 1200px, they will always have a ratio of 3:2.
The 4:3 ratio
These images will have a width of 4 quarters for a height of 3 quarts. For example: 1000px * 750px or 1600px * 1200px etc...
The 16:9 ratio
This works well obviously like the other reports, except that one will certainly need a calculator to do this calculation: [(width of an image)/16 * 9 = height]. This format is widely used in video: 1920px * 1080p.
The 16:10 ratio
This format is less well known, it is close to the 16:9 and it is the format used by Divi, especially for "images on the one" of articles and thumbnails of the "blog module in grid mode".
The ratio or reportis no more 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 Resize its images before downloading in WordPress
Well, I think everything's getting clearer. We know that dimensions are important only because they act on the weight of images but the ratio is much more important. So if you want to keep the sizes of the Divi images, you will need to crop your images according to the appropriate ratio.
Everything was said above: if you want Divi to not reframe the images to one of your articles, do not use images with an inappropriate ratio, such as pictures in portrait mode or panoramic images for example.
On this blog, for example, I did not change the size of my images to the one, I simply adapted my visuals. To do this, I resize all my images to the size of 1000 * 625px (ratio 16:10) but I could very well have used other diemensions while maintaining the same ratio, as for example: 800 * 500px or even 1200 * 750px.
Performing a resizing of its images before downloading in 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 format of the image 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 like Photoshop, affinity Photo, affinity Designer, Gimp etc... and I advise you to read This guide dedicated to the optimization of images for the web.
4. How do I change the size of the Divi images to customize their site?
Obviously, depending on your project, it is very possible that you want to change the size of the Divi images.
You would like the images to be one of your articles to be square to match your Instagram images or you want them to be in portrait format to fit with Pinterest???
It's doable and easy! We will see a method that will not require any particular coding. As a result, even beginners will be able to achieve it!
4.1 – Install and enable Media sizes Simple extension
Simple Media Sizes is a free extension available on the official directory of WordPress, ie, directly from your administration to the tab Extensions > add or in Download here. You just have to install it and activate it.
4.2 – Change the size of Divi images
Once the extension is enabled, 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 the new height of the thumbnail you want to change.
- If you want your images to be squared: edit the thumbnail and-PB-post-Main-image as well as and-PB-post-Main-image-Fullwidth with dimensions like 400 * 400px and 1080 * 1080p (respectively).
- If you want your images to be in portrait format : Do the same with a ratio of 3:4 for example.
Finally, click the Blue "Update"button.
4.3 – Regenerate thumbnails
You are now in possession of a new image format. It will be perfect for future images you download in WordPress, but in the meantime, for your old images (those already in the Media Library) to work, you need to regenerate the thumbnails.
It's very simple but it can take a long time if your library is very busy. Don't forget to save your changes.
4.4 – Check the result
5. In conclusion...
I hope this article will have helped you understand how images work in WordPress as well as the size of Divi images. If you want to get into these kinds of changes, I strongly suggest you duplicate your site locally to do your experiments to avoid experiencing problems (which I could not help you solve simply by leaving a Comment on this article).
Maybe this summary table can help you:
|Class of Divi Images||Using images||Ratio||Width||Height|
|ET-PB-post-Main-image||Thumbnails of the BLOG module in the grid & slide version||16:10||400px||250px|
|ET-PB-post-Main-image-Fullwidth||Forward Image (top of articles)||16:10||1080p||675px|
|ET-PB-post-portfolio-image||Images of the Gallery module and the Portfolio module in grid version||100:71||400px||284px|
|ET-PB-post-portfolio-image-Single||Image forwarding on projects & images of Portfolio module entries in full screen version||–||1080p||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||Images of the image module in full width||–||2880px||1800px|