The Ultimate Guide To Using Images With Divi

When building your website, you might be unsure of the perfect image sizes to use. Image sizing is important as it influences various aspects of your website. Things like your site loading speed, consistency, responsiveness, and more are influenced by the size of your images on your website. Now the question is, as a Divi Theme user, how do you know the correct Divi image sizes? Well, read on to find out!

This article will discuss the right image sizes and how to correctly optimize images for your Divi website. We will look at image dimensions and look at tips for getting better with images. This is the Divimode ultimate guide to Divi image sizes.

The Ultimate Divi Image Optimization Guidelines

Divi was built with three main aspect ratios in mind; 16:9, 4:3, and 3:4. These are the aspect ratios, we will be focusing on in this article.

Optimize Images Before You Upload

So, let’s start. As content writers or web developers, we know that it is always best to optimize images before uploading them to WordPress. Make sure you resize, compress, crop, your images, and more. It is also a good idea to try and keep all of your images between 60kb and 200kb.

Never Forget About SEO

When it comes to images, search engines like Google read image’s by their filenames. Filenames like, ‘alt’ text, captions, file type, file size, etc is what tell search engines what and where images are. When uploading images to WordPress. make sure you add all of this info to your images.

DiviImgSize
Divi Image Sizes

File Formats

There are a lot of different image file formats out there. Most images on the internet are either in JPEG, PNG, or GIF format. For WordPress, we recommend uploading JPEGs.

JPEGs should be used for all of your full-color photographs like featured images and background images.

PNGs are mostly used for images that support transparent backgrounds such as logos or icons.

Image Dimension Guidelines Based on Divi’s Column Layouts

The following guidelines for image dimensions are based on Divi’s default layout settings. This includes a content width of 1080px and a gutter width of 3. Changing these settings may require you to adjust the dimensions of your images slightly.

Here is a list of dimensions according to the 4:3 and 16:9 aspect ratios. This is helpful to keep your images at a width and height that scales appropriately for mobile.

The following image dimensions follow the 16:9 aspect ratio standard

  • 1 column: 1080 x 608
  • ¾ column: 795 x 447
  • ⅔ column: 700 x 394
  • ½ column: 510 x 287
  • ⅓ column: 320 x 181
  • ¼ column: 225 x 128

The following image dimensions follow the 4:3 aspect ratio standard

  • 1 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

Image Module

When using the image module, you can simply follow the 16:9 and 4:3 layouts to choose what image size you need for each column layout.

The upside to using the specific sizes for each column is that it gives you the exact image size you need without wasting image file size which may slow down your page load time.

The downside is that it doesn’t fill the column width on smaller screens like tablets. When the screen size drops below the 1080px breakpoint, the 4-column layout changes to a 2-column layout. This 2-column layout has room for an image size with a width of 370px. So if you want the image to fill the column width on tablet displays, you may want to start with an image size with a width of 370px instead of the 225px width.

So if you are looking to have your images fill the maximum width of the column on all devices, The following sizes for each column layout when using the image module are recommended.

For 4:3 aspect ratio:

  • 1 column: 1080 x 810
  • ⅔ column: 770 x 578
  • ¾ column: 770 x 578
  • ½ column: 770 x 578
  • ⅓ column: 770 x 578
  • ¼ column: 370 x 278

For 16:9 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 208

Slider and Post Slider Background Images

Slider background images should be at least the width of the column that it sits in. So deciding on image size is pretty straightforward.

The height of your slider background image will be determined by the content of the slider, so you may need to adjust the height of your background image.

The following image dimensions follow the 16:9 aspect ratio standard:

  • 1 column: 1080 x 608
  • ¾ column: 795 x 447
  • ⅔ column: 700 x 394
  • ½ column: 510 x 287
  • ⅓ column: 320 x 181
  • ¼ column: 225 x 128

The following image dimensions follow the 4:3 aspect ratio standard:

  • 1 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 use these guidelines:

For 4:3 aspect ratio:

  • 1 column: 1080 x 810
  • ⅔ column: 770 x 578
  • ¾ column: 770 x 578
  • ½ column: 770 x 578
  • ⅓ column: 770 x 578
  • ¼ column: 370 x 278

For 16:9 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 208

Fullwidth Slider Background Images

Recommended minimum width: 1920px

The width of your fullwidth slider background image is always determined by the browser width. Based on standard screen sizes we recommend that your images are at least 1280px wide. But for larger monitors, a safer bet would be to use an image that is 1920px wide.

Images in Lightbox Displays

If you are using the lightbox feature with your image, you may want to use a larger image. Usually, 1500 x 844 works well for a good full-screen image in a lightbox display for large monitors.

The featured images should be as wide as the column it sits in. For example, if you are using a blog module in a two-thirds column with a right sidebar, you would need to use a featured image at least 700px width since that is the width of a two-thirds column in Divi.

Don’t forget that the featured image will also be used on your single post template (the page that displays your full post after you click on the post excerpt). So, make sure your single page template is also using a two-thirds column to display your featured image.

  • 1 column: 1080
  • ¾ column: 795
  • ⅔ column: 700
  • ½ column: 510
  • ⅓ column: 320
  • ¼ column: 225
Divi Blog Image Size

Width: Equal to the size of the single post column width (default 795px)

Blog Grid layout is that Divi uses a smaller version of the featured image uploaded to the media gallery (with a width of 400px). Since this smaller image is created and displayed automatically, there is no need to worry about your page loading an image file size that is too big for the grid column.

Conclusion

Using the Divi Builder is very easy and especially with images. The Divi theme is very adaptable, but if you need any more information on Divi image sizes, hop on over to the Elegant Themes Blog for lots of information on image optimization.