Divi image sizes and optimization guide

Do you want to choose the correct image sizes for Divi and make sure those images are fully optimized?

Ensuring your Divi images are created at the correct size, compressed efficiently, and have the necessary data when uploading will help give your website a faster load time, an SEO boost, and keep your visitors happy.

Images that are optimized for your Divi website will;

• Improve your page loading speed.
• Improves your SEO & website traffic
• Use less hosting bandwidth

This article will show you how to choose the right image sizes for Divi, how to optimize your image file for Divi, and how to optimize your images for SEO in Divi.

1. How to choose the right Divi Image size

The size of Divi Image width is based on the number of columns used in the Divi Builder or Theme Builder.

A default Divi setup would have a max-width of 1080px and a gutter-width of 3. Using these default settings, the image widths for Divi images based on the number of columns are shown below;

Choose the image width based on the number of columns in the row

The recommended image size for a 1 column image in Divi is 1080 pixels 

The recommended image size for a 1/2 column image in Divi is 510 pixels 

The recommended image size for a 1/3 column image in Divi is 320 pixels 

The recommended image size for a 1/4 column image in Divi is 225 pixels 

The recommended image size for a 1/5 column image in Divi is 168 pixels 

The recommended image size for a 1/6 column image in Divi is 130 pixels 

Set image heights using ratios based on column widths

You can use any image height you choose, but there are some common aspect ratios that are used in Divi and web design in general such as 4:3 and 16:9.

The image aspect ratio is just a number to represent the relationship between the image width and image height.

The following image sizes are based on the default column structure (1080px max-width and gutter width of 3) before any custom widths, gutter widths, spacing or padding have been added.

Set the Divi Image height and width for the most common aspect ratios

The recommended Divi image sizes when using a 16:9 ratio are:

• 1 column: 1080 x 608 pixels
• 3/4 column: 795 x 447 pixels
• 2/3 column: 700 x 394 pixels
• 1/2 column: 510 x 287 pixels
• 1/3 column: 320 x 181 pixels
• 1/4 column: 225 x 128 pixels

The recommended Divi image sizes when using a 4:3 ratio are :

• 1 column: 1080 x 810 pixels
• 3/4 column: 795 x 597 pixels
• 2/3 column: 700 x 526 pixels
• 1/2 column: 510 x 384 pixels
• 1/3 column: 320 x 241 pixels
• 1/4 column: 225 x 170 pixels

Set the Divi Image height and width for the most common Divi modules

Each module in Divi is different so you may need to use a different image size depending on which module your image will be used for. You can see a quick outline below for some of the most common Divi modules.

Divi Image module (16:9 aspect ratio + for tablet):
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
images using lightbox: 1500px x 844px
Divi Slider/Post slider module background (16:9 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 128
Divi full-width slider:
minimum 1280px but ideally1920px
Divi Slider and Post Slider module featured image:
1 column: 450px, ¾ column: 330px, ⅔ column: 320px
Divi Blog module featured images with a fullwidth layout:
1 column: 1080, ¾ column: 795, ⅔ column: 700, ½ column: 510, ⅓ column: 320, ¼ column: 225
Portfolio Module Featured Images (Fullwidth and Grid Layout; Standard and Filterable):
Width: equal to your single post column width (default: 795px)
Divi Blurb module image:
1 column: 550px, ½ column: 510px, ⅓ column: 320px, ¼ column: 225px
Divi Gallery module images (Slider and Grid Layout):
Recommended dimensions: 1500 x 844
Divi Person module image:
3:4 – 600 x 800 (recommended for portraits), 16:9 – 600 x 338, 4:3 – 600 x 400
Divi Shop module product images (WooCommerce):
6 column: 150px, 5 column: 183px, 4 column: 240px, 3 column: 332px, 2 column: 520px, 1 column: 1080px
Divi Fullwidth Header module image (Fullscreen Background Images):
1920px x 1080px

There is no one-size-fits-all image size

There are a lot of variables within Divi that can be changed, so these numbers should be used as a general guideline. As your content widths, gutter-width, padding, etc are changed then the available space for images within the content will also change.

There is also the issue of responsive images on tablets and mobile devices which will change the number of columns of your website.

A 4-column row on a desktop will change to a 2-column row on a tablet so you not only have a different screen size but and a different number of columns.

You may then want to use an image that is bigger than necessary for a desktop, in order to have a better fitting size on a tablet.

2. How to optimize your Divi image files

Optimizing your images both before and after uploading to Divi will result in a faster Divi website, better SEO, and less bandwidth usage on your website hosting.

The goal of optimizing your images is to produce the lowest file size possible, whilst maintaining acceptable image quality.

The 3 main image optimization factors in Divi are:

• Choosing the correct image file format (JPEG, PNG, GIF)
  Each image format is best suited to specific types of images. As a general guide, you would want to use JPEGs for photos or images with many colors, PNGs for images with transparency, and GIFs for animated images.
• Using Image Compression
  Compressing your images reduces the file size but does not affect the pixel dimensions of the image. This can be done with software on your computer or using online tools both before and after upload. The key to image compression is to get the lowest file size without drastically reducing the quality of the image.
• Choosing the correct image pixel dimensions
  This is the pixel width and height of the image and should match the pixel dimensions of the space it will be placed on your website. This can be done with software on your computer or using online tools. The image sizes used in Divi listed above will give you a good idea as to what pixel dimensions you should be using on your website. Don’t upload an image straight from your camera to a space that is 400 pixels wide.
• Including image alt and title text
  These text attributes will tell Google and your users with screen readers what your image is and will help your images show up in Google too.
  

Software for optimizing images before upload

These software programs allow you to take a large image and optimize it for your website before you upload it. You will need to resize the pixel dimensions and then export the image in the correct file format with the correct image compression applied.

Adobe Photoshop is the tool the professionals use that does everything you will need and much more. It is a full feature image editor and image compression is just one small part of this powerful software. The cost of Photoshop is more expensive than other options.

Affinity Photo – A cheaper photoshop alternative that offers a lot of the same features for a fraction of the price. If you are used to using Photoshop and want to switch to a cheaper option then this is a great software. It does however take a bit of time to transition and there are limitations.

Gimp is a free, open-source image editor that is also a very solid Photoshop alternative. If you just need the basics and don’t want to spend any money then Gimp is a great community-based software that will also get the job done.

Bulk Resize Photos is a free web app that can resize the pixel dimensions of your images. Very quick and easy to use for beginners.

TinyPNG is a smart lossy compression software that reduces the file size of your WEBP, JPEG, and PNG files by reducing the number of colors in the image.

It is better to optimize prior to uploading, but it is also better to optimize on-site after upload than not optimizing at all.

Plugins for optimizing images on your website

Siteground Optimizer is a plugin for Divi websites hosted with Siteground and includes a range of optimization options to optimize your images. There is image compression, lazy load, and webP options. If you are hosted with Siteground (like this website) then the SG Optimizer is a very useful optimization tool for images and your site in general.

EWWW Image Optimizer is a free WordPress plugin that will automatically compress, scale to fit the page and device size, lazy load, and convert images to the next-gen WebP format.

Smush is a popular premium WordPress plugin from WPMU DEV that allows you to optimize images by resizing, compressing, and lazy loading images for faster load times.

Optimize your Divi images for SEO

To help Google and your users understand what your image is, you will need to add an image title and image alt text for every image on your website.

When adding an image to Divi using the Image module it will automatically fetch the image title and alt text from the media library and add it to your image.

This is good for SEO and your users as Google or people with screen-readers will know what content your image contains.

If you later update the image Alt text or title in the WordPress media library, Divi will not update them in your Image module.

This can be an issue, but if you set a suitable alt and title text initially there is usually no need to change it later.

Final thoughts

Images are a vital part of every website and it is important to choose the right image size, and the right file type, and optimize it so it has a small file size.

If your website is slow, there is a good chance this is caused by images that are too large. It is a simple fix and can have dramatic effects on your website.  Optimizing your images will speed up your website and give it a huge boost for very little effort so put image optimization on your to-do list now.