When you choose the correct image sizes for your Divi website and make sure they are optimized for online use, you can;
- Make your Divi site load faster – This is important to keep your users from losing interest and leaving your site. You are impatient too, right?
- Boost your SEO & traffic – A fast website will keep users on your site longer, which will in turn help with search engine ranking.
- Save hosting bandwidth – If you have a lot of traffic and a lot of un-optimized images then you may find that your hosting limits are maxed out.
- Improve accessibility – Adding alt text to images ensures screen readers (software for the visually impaired) and Google understand what the image is.
In this article, you will learn how to choose the correct image sizes for Divi, how to best optimize images before uploading them, and how to add the correct text and titles for SEO.
1. how to choose the right image size
Images sizes in Divi are recommended in terms of image width in pixels and these image widths are based on the number of columns being used in the layout. By default, This post was based on the post about Divi image sizes over on Divithemeexamples.com
Divi has a maximum width of 1080 pixels and a gutter width of 3. If you keep these default settings, then the recommended image widths for Divi images based on the number of columns would be;
The recommended image size for a 1 column image in Divi is 1080 pixels
The recommended image size for a 2 column image in Divi is 510 pixels
The recommended image size for a 3 column image in Divi is 320 pixels
The recommended image size for a 4 column image in Divi is 225 pixels
The recommended image size for a 5 column image in Divi is 168 pixels
The recommended image size for a 6 column image in Divi is 130 pixels
Use the Divi column widths above to set the height for your image using ratios.
The image width and height can be set to anything you choose, but there are some common aspect ratios such as 4:3 and 16:9 that are commonly used for images. An image aspect ratio represents the relationship between the image height and width.
We can use the common ratios to work out the image heights for the recommended image widths listed above. Again, this is using the default column structure of 1080 pixels maximum width and gutter-width of 3. If you apply any custom widths, gutter-widths, spacing, or padding you will need to adjust the values.
The recommended Divi image sizes with 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 with 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
Specific Divi module image size recommendations
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 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
But really, you can use any size image you want!
The recommended image sizes can be taken as a general guideline for your own images. As your content widths, gutter-width, padding, margin change, then your image sizes will also change.
2. How to optimize images before you upload to Divi
An image with the best optimization will have the lowest file size possible, along with acceptable image quality.
There are 3 key factors involved when getting the best image optimization. These are
- Format of the image file (JPEG, PNG, GIF)
As a general rule, you should use JPEGs for photographs or more complex images, PNGs for images with transparency, and GIF for animated images.
- Image Compression
Compression is used to reduces the image file size without reducing the pixel dimensions of the image. Over compression can lead to a low quality looking image.
- Image pixel dimensions
The pixel width and height of the image should match the pixel dimensions of the area it will be displayed on your website.
Optimizing images can be done in many ways, but a few of the most common software tools would be;
- Adobe Photoshop is a premium software that can resize and compress your images. (My Image editor of choice, but not for beginners)
- 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)
It is better to optimize prior to uploading, but it is also better to optimize on-site after upload than not optimizing at all. There are many WordPress plugins that will optimize images after they are uploaded such as EWWW and WP Smush.
3. Image Title and Alt tags for Google ranking and accessibility.
Image alt text
The image alt text is used to describe the image so that search engines and screen readers can understand what the image is. Using image alt text correctly can help visually impaired users understand what images you have on your page and help to boost your SEO rankings by including images in search results.
By default, when adding an image to Divi via one of the Divi modules it will automatically take the alt text that has been added via the media library and add it to your image.
Image title text
The image title tag is simply used to provide an image with a title, but most would say that it isn’t important for SEO. I generally include both the title tag as well as the alt text just in case.
By default, when adding an image to Divi via one of the Divi modules, the image title is taken from the image filename and will have dashes-between-the-words. This is why it is also a great idea to name your images properly when saving them in the first place.
How to add image alt text and title tag in DIvi
Add an alt text when uploading the image via the WordPress media library.
You may also want to edit the title text so that it does not include dashes or if the filename does not properly represent what the image is.
If you forget to add an image alt text when uploading your image you can add it within the Divi module settings. In your module click on the Advanced tab and then on the Attributes section. Here you will see the fields for Image ALternative Text and Image Title Text.