There is no super big deal when adding images to your website with a cool theme and page builder like Divi. It is as easy as uploading images to your social media site.
But, how can you make sure the Divi image size?
And once it does, how can you make sure that image is optimized for your website?
YES! We all know, there isn’t any straightforward answer to the Divi image dimension.
The thing is, you can’t fix a specific image size for the Divi website. Different using perspectives have their own needs, showcases, and intents to determine the actual size.
For example, there is a size difference between the Blog module featured image and the Gallery module image. Plus, size also varies on choosing different layouts like grid and masonry.
Further, image size and file type impact your website loading time. And, you know the importance of page speed.
With all this in mind, here’s a complete Divi image size guide. Like, our ultimate Divi logo guide,
So if you’re looking for:
- How to choose the best image size for Divi?
- What is the Divi aspect ratio?
- How to Set Image Dimensions With Divi’s Column Layouts?
- How to Choose the Image Dimensions For Divi Modules?
- Best tips for optimizing images for Divi?
- How to choose the right file type for Divi images?
You’ll love this complete Divi image guide. Let’s start:
How to Choose The Best Image Size For Divi?
By default, the Divi column set up has a max width of 1080 pixels and a gutter width of 3.
The dimensions of your image in Divi depend on the number of columns layout being used. Actually, the width of your image should be equal to the column width.
Basically, this measurement is also known as Aspect Ratio.
Now before going into more details on Divi image usage, we will go through a checklist with little explanation to make you understand the coming scenarios of this guide.
Divi Image Using Guide Checklist
| Divi Aspect Ratio | The proportional relationship between the width and height of an image or screen.16:9, 4:3, and 3:4 are Divi’s most common and recommended aspect ratios. |
| Divi Column Layout | Divi Columns are the structural element within rows. You can add text and images content through modules inside columns. |
| File Size | Keep an ideal size between 60 and 200kb for the best performance. |
| File Formats | JPEG and PNG are the best-recommended web formats. Choose JPEG for featured and background image types. For smaller size images, PNG suits best. |
| Optimization | Image optimization includes resizing, compressing, etc. The goal of this practice focuses on decreasing the website page loading time. |
| Image SEO | Search engines depend on the image file name to understand your image. So, make sure that your image has accurate alt text. |
What is Aspect Ratio?
Aspect ratio refers to a written formula of the width and height relationship. It describes two numbers separated by a colon. For example 16:9 or 3:9.
It also symbolizes as (X:Y). The x (right side of the colon) defines the unit of your image width. And, the y (left side of the colon) describes the height of that image.
There are different aspect ratios for different types of uses. We’ll be focusing on two common aspect ratios, 4:3 and 16:9.
4:3: The 4:3 aspect ratio used to be the standard format for fullscreen TV and Monitor screen size before the age of high definition. This aspect ratio is also optimum for mobile and tablet screens.
16:9: Nowadays, 16:9 is the new higher standard aspect ratio for mainstream (widescreen and HDTV) monitors.
Aspect Ratios And Divi
When it comes to the Divi aspect ratio, you need to deal with 16:9, 4:3, and 3:4. As you already know about the 4:3 and 16:9 aspect ratios, the other one (3:4) is useful for showing portrait format in Divi.
Knowledge of aspect ratios is important for using images for various Divi column layouts requiring different image dimensions.
Let’s see how to initiate these ratios with column layout design.
How to Set Image Dimensions With Divi’s Column Layouts?
As we already have described, the width of your image should be determined according to your selected Divi column width.
Here is a cheat sheet of image dimensions for Divi’s default layout settings (a max width of 1080 pixels and a gutter width of 3).
- 1 Column = 1080px
- 3/4 Column = 795px
- 2/3 Column = 700px
- 1/2 Column = 510px
- 1/3 Column = 320px
- 1/4 Column = 225px
The above cheat sheet is only about the width of the image. But, you also need to know about the height of images. For this reason, we have come out with the required dimensions according to the built-in aspect ratios.
| 16:9 | 4:3 | 3:4 |
| 1 Column = 1080 x 608px3/4 Column = 795 x 447px2/3 Column = 700 x 394px1/2 Column = 510 x 287px1/3 Column = 320 x 181px1/4 Column = 225 x 128px | 1 Column = 1080 x 810px3/4 Column = 795 x 597px2/3 Column = 526 x 394px1/2 Column = 510 x 384px1/3 Column = 320 x 241px1/4 Column = 225 x 170px | 1 Column = 810 x 1080px3/4 Column = 597 x 795px2/3 Column = 526 x 700px1/2 Column = 384 x 510px1/3 Column = 241 x 320px1/4 Column = 170 x 225px |
Also, you can take the help of an aspect ratio calculator.
How to Choose The Image Dimensions For Divi Modules?
There is no specific image dimension for all Divi modules. Further, image size also differentiates on the website area you are using. Plus, gutter width, padding, and other different parameters come into consideration while determining the image size for modules.
So, there are no strict rules. But, we have come up with a useful table. It will show you how you will figure out image sizes for different modules.
What Image Size to Use For Divi Regular Modules?
| Modules | How It Works | Image Dimensions |
| Image Module | For this module, you can consider the 16:9 and 4:3 layouts to figure out your image dimension. NB: Screen sizes below 1080px break the 4-column layout into a 2-column layout. At this point, the tablet display leaves a column layout that needs a 370 px wide image. So, instead of 225 x 170 px, use 370 x 278 px. | For 4:3:1 column: 1080 x 810 px⅔ column: 770 x 578px¾ column: 770 x 578px½ column: 770 x 578px⅓ column: 770 x 578px¼ column: 370 x 278px For 16:9:1 column: 1080 x 608px⅔ column: 770 x 433px¾ column: 770 x 433px½ column: 770 x 433px⅓ column: 770 x 433px¼ column: 370 x 208px |
| Slider and Post Slider Module Using Scenario: Background Images | Simply match the image width with the width of the selected column for your slider and post slider background images. And, for setting the height, consider the content of your slider as an excellent adjustment. | For 4:3:1 column: 1080 x 810px & Mobile: 1080 x 810 px ¾ column: 795 x 597px & Mobile: 770 x 578 px ⅔ column: 700 x 526px & Mobile: 770 x 578 px½ column: 510 x 384px & Mobile: 770 x 578 px⅓ column: 320 x 241px & Mobile: 770 x 578 px¼ column: 225 x 170px & Mobile: 370 x 208 px For 16:9:1 column: 1080 x 608px & Mobile: 1080 x 810px¾ column: 795 x 447px & Mobile: 770 x 433 px⅔ column: 700 x 394px & Mobile: 770 x 433 px½ column: 510 x 287px & Mobile: 770 x 433 px⅓ column: 320 x 181px & Mobile: 770 x 433 px¼ column: 225 x 128px & Mobile: 370 x 208 px |
| Slider and Post Slider Using Scenario: Featured Image | Only shows the featured images in sliders designed with ⅔, ¾, and 1 column. Note that your featured image will not display in the slider in browser views smaller than 768px width.. | 1 column: 450px¾ column: 330px⅔ column: 320px |
| Audio Module Using Scenario: Cover Art Image | From a small shape, cover art images stretch across the full width of the content section on screen sizes lower than 780px. | Minimum Width: 780px |
| Blog Module Using Scenario: Featured Images with Grid Layout | The image size should be equal to the size of the single post column width in your Grid layout. Here the upside is, the featured image automatically becomes smaller in size for the grid column which benefits the page loading speed. | Default: 795px |
| Blurb Module | The max width of the single column layout in the Blurb module is 550px. So, apart from the single-column layout, take images as wide as the column for this module. The best advice is, don’t cross the 550px width. | 1 column: 550px½ column: 510px⅓ column: 320px¼ column: 225px |
| Gallery Module Images Using Scenario: Slider and Grid Layout | Upon clicking in the lightboxes, the image winds up to the full screen. By default, Divi creates a smaller version of the gallery for the grid layout. On the other hand, keep an equal height and width of the image for the slider layout. | Recommended Dimensions: 1500 x 844px |
| Person Module | Portrait format is the recommended format for the personal module. Here, the 3:4 aspect ratio is useful. | 3:4 – 600 x 800 16:9 – 600 x 3384:3 – 600 x 400 |
| Post Title Module Using Scenario: Featured Image) | Follow the same equal to the column width rule. And, your featured image should fit the width of the content section. | For 1 Column= 1080px |
| Shop Module Using Scenario: Product Images | In this module, it is possible to show products with up to a six-column layout. Avoid two-column & one-column layouts to get rid of blurry product images. It is recommended to use at least 3 columns and image size of 330px width. | 6 columns: 150px5 columns: 183px4 columns: 240px3 columns: 332px2 columns: 520px1 column: 1080px |
| Testimonial Module Using Scenario: Portrait Images | Portrait image gets automatically converted to 90X90 size. You have to rely on the module setting for accurate image size. | For the default module setting, choose 90X90 dimension. |
What Image Size to Use For Divi Fullwidth Modules?
| Fullwidth Slider Using Scenario: Background Images | In this module, background images scale up & down to fit different browser widths. According to standard screen sizes, an image with 1280px width would be a good fit. But, considering the large monitors, the best option is 1920px. | Minimum Width: 1920px |
| Blog Module Using Scenario: Featured Images with Fullwidth Layout) | In a fullwidth layout, the featured image of your blog module needs to be the same as the used column width. NB: Here, you should use the same column layout for the featured image as you will use on the single post template. | 1 column: 1080px¾ column: 795px⅔ column: 700px½ column: 510px⅓ column: 320px¼ column: 225px |
| Portfolio Module Using Scenario: Featured Images in Fullwidth and Grid Layout; Standard and Filterable) | While taking a fullwidth and grid layout, the featured image should match the same width as the single post column. Also, need to be as wide as the column of your single portfolio post template. | Default: 795px |
| Fullwidth Header Module Using Scenario: Fullscreen Background Images | Through the module setting, (Enable “Make Fullscreen” from the layout option under the design tab) you can make the image wind up the width and height of your browser window. | 4:3 (recommended for portraits) 1280 x 960px 16:9 1920 x 1080px |
| Fullwidth Header Module Using Scenario: Logo Image | For your logo image, there isn’t any right & wrong dimension. You just need to ensure the responsiveness of the logo image. Follow the default Divi logo size. | Default Divi Logo Size: 93 x 43 px |
| Fullwidth Header ModuleUsing Scenario: Fullwidth Header Image | Your header image takes place in the right column of a ½ column layout in a fullwidth layout. | Recommended dimensions: 510 x 288px |
How to Use Background Images in a Divi Module?
Some Divi modules like Slider Module, Text Module, Filterable Portfolio Module, Call to Action Module, and so on require background images to use. The basic guideline is matching the same width between the image and column.
1 column: 1080px
¾ column: 795px
⅔ column: 700px
½ column: 510px
⅓ column: 320px
¼ column: 225px
How to Use Fullwidth Background Images in a Divi Module?
Divi has some fullwidth modules like Fullwidth Header, Fullwidth Portfolio, Fullwidth Post Slider, Fullwidth Image, etc. In these modules, images scale up to the full screen of the browser. So, you should consider the largest monitor size while choosing the width of your image.
Usually, 1920px is suitable for full-width module background images. Further, the height measurement of your images depends on the amount of content. You need to adjust them as needed.
By now, you have a basic understanding of using images in the Divi modules. But, we will not end this Divi image size guide here. We are covering some useful tips for optimizing your images for the best use on your website.
What Are The Best Image Dimensions For Displaying in Divi Lightbox?
Lightbox images tend to be larger in size for a fine full-screen display. 1500 x 844px is the recommended dimension for suitable displaying in larger monitors. You can also learn more about opening an image in the Divi lightbox.
Best Tips For Optimizing Images For Divi Images
Let’s discuss some standard guidelines for image optimization factors of Divi websites.
File Size Optimization
Does optimizing image size matter? The answer is yes, it certainly increases your loading time. Try to keep an ideal size between 60 and 200 kb for the best performance.
Resizing Images
Don’t just upload your images from your media library! If you are using an image multiple times, there may be an opportunity of reducing image size for the second time. So, you shouldn’t use a 1080px image when it can be possible with a 330px image size. You must resize it.
Image compression
Image compression is another way to minimize the image file size. It works by removing unnecessary graphical elements like color and metadata. However, it doesn’t make any noticeable changes to your image quality.
Image Optimization Tools
We will look at two kinds of optimization tools. The first type is related to the WordPress pre-uploading process. The second
type relates to a plugin which helps to compress images after you upload it to the WordPress sites.
First Type: There are some image compression tools. Such as
Second Type: The following plugins can keep your image quality intact even after the compression.
Choosing the Right File Types For Divi Images
Now we will decide on the right image file types. You can use any web-friendly image format like JPEG, PNG, or GIF. Let’s have some little ideas on these formats.
JPEG: Best file type for colorful images. So, you must consider this file type for featured and background images. Further, if you think about image compression and file size, it’s a very flexible option.
PNG: For smaller size images, PNG suits best. It is a standard option for logos and other graphical elements like text, drawings, etc.
GIF: This file type is recommended for short animations. For example, it can show a short action with a few animated frames. Usually, this file type contains few colors and low resolutions.
WebP: WebP is a popular and compact image format that maintains rich quality and helps speed up websites.
Divi Image SEO
Don’t ignore this part! Image alt text or attributes help search engines understand your images. You should use the focus keyword on the image file name. When uploading an image to your media library, include it with all the related info like file name, alt text, description, etc.
Also note that, some of the Divi modules are available with options to add alt text and title text right from the builder area. You can also learn how to add caption & description to Divi gallery images.
Conclusion
So, that’s it for our Divi image size guide. By now, we hope there isn’t any headache on your mind on this topic. Now, you can figure out image dimensions through measuring the Divi aspect ratios and column width.
Plus, knowing the image dimension for different modules is helpful to anyone using Divi builder. Remember to optimize and check the file type of your images before uploading to your Divi website.
Is there anything we have missed from the Divi image guidelines? Must share with us in the comment box below.
0 Comments