How to choose the right Divi image size and optimize for your site

Optimizing your website images to ensure they are created at the correct size, compressed efficiently and have the necessary data when uploading will help give your website an easy boost in traffic and keep your visitors happy.

Images that are optimized for your Divi website will;

• Improve your page loading speed. -Your users are very impatient and loading big images takes time your visitors may not be willing to give you.
• Improves your SEO & traffic –  Slow page speeds will negatively affect your Google ranking and large images are often the #1 cause of a slow website. Missing titles and alt tags from images will also negatively affect your Google ranking.
• Use less hosting bandwidth – Most hosting packages come with limits and hitting those limits can cost you more financially or even lead to downtime or restrictions on your site.

This post will show you how to choose the right images sizes for Divi, how to optimize them prior to upload and how to make sure they are added to your site correctly for SEO.

1. Choose the right Divi Image size

Image widths for Divi are based on the number of columns being 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;

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 

Based on column widths you can then set a height for your image using ratios.

You can use any image height you choose, but there are some common aspect ratios that are used 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.

The recommended sizes for Divi images when using a 16 x 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 sizes for Divi images when using a 4 x 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

Image sizes recommended by Elegant Themes for each of the specific 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, or read the full Divi image guide on the Elegant Themes blog.

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 fullwidth layout:
1 column: 1080, ¾ column: 795, ⅔ column: 700, ½ column: 510, ⅓ column: 320, ¼ column: 225

Porfolio 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 desktop, in order to have a better fitting size on a tablet.

2. Optimize images before uploading to Divi

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

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

The 3 image optimization factors are:

• Image file format (JPEG, PNG, GIF)
  Use JPEGs for photos or images with many colors, PNGs for images with transparency, and GIF for animated images.
• Image Compression
  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.
• 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.

There are many tools for optimizing images off-site, but the most common would be;

• Adobe Photoshop is premium software that can resize and compress your images. (My Image editor of choice)
• GIMP is a free, open-source alternative to Adobe Photoshop that can resize and compress your images. (Pro)
• TinyPNG is a free web-app that can compress your JPG and PNG files. (quick and easy)
• Bulk Resize Photos is a free web-app that can resize the pixel dimensions of your images (quick and easy)

If you have users adding images on the site that are not willing or able to optimize their images before uploading, there are a few useful WordPress plugins such as EWWW, WP Smush, etc that can resize and compress on-site after upload.

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

3. Adding title and alt tags for better SEO

By default, when adding an image to Divi it does not automatically fetch the image title or alt text from the media library and add it to your image.

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

To help Google and your users understand what your image is, you will need to either;

• Enter the title and alt text in the modules’ advanced settings manually.
• Use the free Divi Image Alt Text plugin which is a plugin that will automatically fetch images title and alt text from the media library for your Divi module (except for the gallery module).

Final Thoughts

Images are a vital part of every website and for many sites, the wrong images can cause a snowball of issues that can ultimately lead to less conversions and income. One of the main website killers is large images that slow down your website and lead to poor Google rankings and poor user experience so users either never find your website, or leave your site without becoming a client or customer.

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.