#
Back to blog page

Divi Image Sizes & Optimization Guide

by | May 6, 2024 | Divi

Divi Image Size Guide
Table of Contents

Imagine you’re making a Divi website and you’re not sure about the best size for the images you want to use.

Picking the right size for your images is important because these images help you to make your site load faster, and ensure they work well on every different device.

So, how do you figure out the right image sizes in Divi?

In this article, we will share a perfect Divi image guide and let you know how to optimize the use of images in Divi.

Let’s get started.

Divi Image Guide Checklist

This Divi image guide compiles some generic terms that a user should know when they are working on an image.

Let’s go through a checklist to gain a more complete understanding of these things.

Divi Aspect RatioThis section describes the height and width of your image. There are three aspect ratios that Divi supports – 16:9, 4:3, and 3:4. Among them, 16:9 and 4:3 are the most popular in use.
Divi Column LayoutDivi Columns are the structural element within rows. These columns can be filled with both text and image content.
Image ResponsivenessImages that are compatible and well-working on any screen size device. For example: mobile, computer, tablet screen, etc.
File SizeThe size of the images you are going to use. It’s best to keep the image size between 60kb and 200kb for the best performance.
File FormatsMost web images are in JPEG, PNG, or GIF format. Among them, JPEGs are suitable for most situations because of their compatibility, use of color, and small file size.
Image Optimization The goal of image optimization is to provide high-quality images at the smallest possible size while maintaining the correct format and dimensions. It focuses on loading your image as fast as possible.

Divi Image Size Guide Based on Column Layouts 

Divi is built with the row-column structure. The column setups have a default maximum width of 1080px with gutter widths of 3. 

Changing these settings may require you to adjust your image’s dimensions slightly. But the rule is that your images should be at least as wide as the column in which they are placed.

Here are the default dimension list that you need for your image according to each column layout.

The above image is only about the width of the Divi image by default. But you also need to know the height of the images. For this reason, we have come up with the required dimensions (both height and width) according to the built-in aspect ratios. 

16:94:3
1 column: 1080 x 608¾ column: 795 x 447⅔ column: 700 x 394½ column: 510 x 287⅓ column: 320 x 181¼ column: 225 x 1281 column: 1080 x 810¾ column: 795 x 597⅔ column: 700 x 526½ column: 510 x 384⅓ column: 320 x 241¼ column: 225 x 170

Image Dimensions for Different Divi Modules

Each Divi module supports its own specific image size. If you want to get a well optimized site, you need to know the size all.

Here, we will let you know the sizes of Divi images for all Divi modules; along with the full width modules too. 

Image Sizes for Image Module

Recommended width: equal to the size of the column width (best 1080px)

The very first Divi module for image is the Divi Image module. For each column layout, you can choose whether to display the image in 16:9 or 4:3 ratio.

Whatever the ratio is, the image will display as the same width of the column that it sits in.

Here’s the details –

For 16:9 aspect ratioFor 4:3 aspect ratio
1 column: 1080 x 608px⅔ column: 770 x 433px¾ column: 770 x 433px½ column: 770 x 433px⅓ column: 770 x 433px¼ column: 370 x 208px1 column: 1080 x 810px⅔ column: 770 x 578px¾ column: 770 x 578px½ column: 770 x 578px⅓ column: 770 x 578px¼ column: 370 x 278px

Additionally, Divi has lightbox image settings in this image module. You can find that on its Content > Link settings.

A lightbox is a design effect that opens an image in a centred overlay and dims the rest of the page when an image is clicked.

So, when you use an lightbox image through this module according to the above-mentioned size, the image will display full-screen at 766x824px (as a lightbox).

Background Image Sizes for Slider and Post Slider Module

Recommended Width: equal to the column width

Slider or Post Slider module background images should be at least the width of the column that it sits in. However, the height of your slider background image will be determined by the content (depends on title, description, button etc) of the slider.

So, you may need to adjust the height of your background image or use the following image dimensions for each column’s height and width.

For 16:9 aspect ratioFor 4:3 aspect ratio
1 column: 1080 x 608¾ column: 795 x 447⅔ column: 700 x 394½ column: 510 x 287⅓ column: 320 x 181¼ column: 225 x 1281 column: 1080 x 810¾ column: 795 x 597⅔ column: 700 x 526½ column: 510 x 384⅓ column: 320 x 241¼ column: 225 x 170

And if you want the slider to span the width of columns on mobile devices (to make it responsive), use these guidelines:

For 16:9 aspect ratioFor 4:3 aspect ratio
1 column: 1080 x 608⅔ column: 770 x 433¾ column: 770 x 433½ column: 770 x 433⅓ column: 770 x 433¼ column: 370 x 2081 column: 1080 x 810⅔ column: 770 x 578¾ column: 770 x 578½ column: 770 x 578⅓ column: 770 x 578¼ column: 370 x 278

Featured Image Sizes for Slider and Post Slider Module 

Slider feature images will only appear in sliders if you make the width of â…” columns, ¾ columns, or 1 column. 

We recommend that your slide images should be at least below mentioned wide to adjust for all devices. But in desktop, the module will display the featured image as 1080px wide. 

For the –

  • 1 column: 450px
  • ¾ column: 330px
  • â…” column: 320px

The Slider module featured image is visible on its child item > Image & Video > Image settings

Note: A browser width less than 768px (mobile version) will hide the feature image and show the post excerpt.

Image Sizes for Audio Module (Cover Art Image)

Recommended Width: at least 780px

Regardless of what image you upload in this module, the cover image will display 230x130px by default.

Here how it works 

  • If the screen size is lower than 780px, it stretch across the full width of the content section on screen
  • If it crosses the 780px; the image will move down to a small (230 x 130) shape.

Featured Image Sizes for Blog Module (Fullwidth & Grid Layout)

Recommended Image width for fullwidth layout: equal to the size of its column width

Recommended Image width for grid layout: equal to the size of the single post column width (default 795px)

The basic blog size guide for feature images is as wide as the column’s width.

For example, if you use a blog module in a one-third’s column with a right sidebar, you would need to use a featured image at least 320px width since its the standard width of one-thirds column in Divi.

Here are the ratios of full width –

  • 1 column: 1080px
  • ¾ column: 795px
  • â…” column: 700px
  • ½ column: 510px
  • â…“ column: 320px
  • ¼ column: 225px

On the other hand, the Blog Grid layout allows for using the smaller version(400px width) of the feature image. 

Since this smaller image is created and displayed automatically, you need not worry about your page loading an image file that is too big for the grid column. You can make the default Blog Grid layout image width for a single post 795px.

Note: The ‘Portfolio Module’ feature image dimensions are the same as the Blog module

Image Sizes for Blurb Module

Recommended width: 550px (Maximum)

The Blurb module image follows the same rule (as mentioned in Blog Module) of matching image width with column width. 

However, there is an exception with one column. The blurb module’s content width (content + image) will display 550px by default, whatever your image size. If you extend, the content and image size will change.

Here are the image widths for the Blurb Module in each column layout –

  • 1 column: 550px (by default)
  • ½ column: 510px
  • â…“ column: 320px
  • ¼ column: 225px

Image Sizes for Gallery Module (Slider and Grid Layout)

Recommended image size: 1500x844px

The gallery module images open in a lightbox display. It’s by default, and you can’t change this setting. So, it’s better to use a bigger image (1500px, as mentioned) that can fill the browser window when viewing the image. As a result, the lightbox will display your full-screen lightbox image at 766x824px. (Same as the Image module)

When it comes to the slider gallery display, it’s crucial to maintain uniformity in the width and height of all your images.

On the other hand, the grid layout allows for the use of the smaller version of the image (400px width). So, the large image file size reserved for lightbox won’t be displayed on the gallery grid. This helps reduce file size and keep your page load time low.

Image Sizes for Person Module

Recommended Width: 600px

For the person module, it’s wise to use the aspect ratio 3:4, a great size for portraits. 

However, you can choose others too. Here are the recommended person module image sizes for each aspect ratio:

  • 3:4 – 600 x 800 (recommended for portraits)
  • 16:9 – 600 x 338
  • 4:3 – 600 x 400

Featured Image Sizes for Post Title Module

Recommended Width: equal to the column width

The Post Title Module shows the title of your post, and if you want, you can post featured images, too. 

You can choose the placement of your featured image like above the title, below the title, or as the background of the title. No matter where you put it, the image will fill the content area’s width.

But, if you use a one-column layout for your Post Title Module, 1080px width is ideal for your featured image.

Product Image Sizes for Shop Module (Woo/eCommerce)

Recommended width: 332px (minimum)

Recommended number of columns: 3 or more

The shop module allows you to display your products in a one-column layout up to a six-column layout. 

Here are the widths of the product images when displayed on each column layout:

  • 6 column: 150px
  • 5 column: 183px
  • 4 column: 240px
  • 3 column: 332px
  • 2 column: 520px
  • 1 column: 1080px

Since the Shop Module was designed to display products on â…“  columns or smaller, that’s why Divi generates a smaller version of the product image (with a maximum width of 400px). This means that your two-column and one-column layout may show a blurry version of your product image.

Image Sizes for Testimonial Module

Recommended image size: 90x90px

By default, Divi makes your testimonial image at 90x90px size, and radius border-width to 90px that helps to display it as a circle.

However, you can customize the dimensions and border radius of the testimonial image from within the Advanced setting of the Testimonial Module. 

Although you can have large images without a 1:1 aspect ratio, this will result in a lot of wasted file size that will slow down the loading of your page.

Note: If you want to display your testimonial image as 100% rounded, make sure your image height and width remains the same. 

**Guidelines for Background Images (Standard & Fullwidth Modules)**

Recommended width for standard image background: equal to the size of its column width

Recommended width for full width image background: 1920px

Divi has basic modules that need background images to match the width of their column. They are –

  • Portfolio Module
  • Filterable Portfolio Module
  • Call to Action Module
  • Post Slider Module
  • Post Title Module
  • Slider Module
  • Text Module

And all of the background images will always need to be at least as wide as the column in which they will place.

  • 1 column: 1080px
  • ¾ column: 795px
  • â…” column: 700px
  • ½ column: 510px
  • â…“ column: 320px
  • ¼ column: 225px

If you use a full width section background image, it will expand to the entire width of your browser. That means you should make these images at least as wide as most larger monitor displays, around 1920px.

Here the modules list –

  • Fullwidth Header
  • Fullwidth Portfolio
  • Fullwidth Slider
  • Fullwidth Post Title
  • Fullwidth Post Slider
  • Full Width Image

Note: In each of these modules, the height of the background image depends on the amount of content in that module, so you may have to adjust your images accordingly.

How to Optimize Divi Image Files

Making your images just the right size before and after putting them on Divi can make your site faster, improve its SEO, and use up less of your website’s data. Because Divi has responsive image settings and SEO optimization in its theme option.

The idea behind optimizing your images is to make them as small as possible without sacrificing quality.

The four main image optimization factors in Divi are:

  • Choose the correct file format (JPEG, PNG, GIF)

Each image format is best suited to specific types of images. For photos or images with many colors, use JPEGs, for transparent images, use PNGs, and for animated images, use GIFs.

  • Use image compression

You can reduce the file size of your images by compressing them, but be sure not to affect their pixel dimensions. You can do this with software on your computer or using online tools both before and after upload.

  • Use the correct image pixel dimension

Use the recommended image size mentioned in this Divi image size guide. The image’s width and height must correspond to the dimensions of the space in which it will be displayed. You can do this with free online tools or software on your computer.

  • Include image alt text

In image alt text, you can briefly describe the image’s content so that it can be indexed by search engines. It helps to tell Google and your users with screen readers what your image is.

Image Optimization through Plugins 

Along with the general image optimizations, plugins also can leverage various options to achieve image optimization for your Divi website:

  • ShortPixel is an image optimizer plugin known for its various image compression types. It can handle image backups and resize large images. Its support for WebP images and retina image optimization gives it a plus.
  • The EWWW Image Optimizer plugin is a free WordPress plugin that compresses, scales, lazy loads, and converts images into WebP format automatically.
  • You can use Smush to optimize images by resizing, compressing, and lazy loading them for faster loading.
  • A Divi plugin called Siteground Optimizer is available for hosting with Siteground. It includes image optimization options such as image compression, lazy loading, and web options. If you are hosted with Siteground, the SG Optimizer is a handy optimization tool for images and your site.

Final Thoughts

We hope this image guide for Divi has helped you understand the image sizes for every module. This should be used as a general image guideline for Divi.

But the truth is that there is no perfect Divi image size due to having a lot of variables within Divi websites and screen sizes.

If you find our Divi image guide helpful, share it with your contacts. Feedback in the comments is also welcome. 

Team DiviGear

At DiviGear, we are more than just a team – we are a collective of Dev Experts, Word Artists, Design Virtuosos, and Marketing Maestros, all united by our profound expertise in Divi and WordPress. Our mission is to provide you with accurate, insightful, and in-depth content aimed at enriching your understanding of Divi, WordPress, and the art of web design.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *