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.
I always hate it when a client uploads an image straight from their phone! Will try one of the plugins to stop any huuuuuuge images getting through.
and some of the new cameras create super high-quality images that will crush any site loading time
I never go below 510 width to make sure they also are big enough for mobile. And since the august update Divi supports responsive images with srcset, so it automatically resizes based on screen size.
Don’t forget the WebP file format, use the WebP Express to serve that format and you get another check in Google’s speed test.
Another tool worth to mention is IrfanView, it’s free Windows image manipulation software that can also resize and compress in batches and much more.
The image alt text is now (finally!!!!) added to the images automatically by Divi so no need for the Alt Text plugin!
Hey Craig, thanks for this—it’s very helpful. Question: in the beginning you started describing the foundation of Divi’s default grid specs: “A default Divi setup would have a max-width of 1080px and a gutter-width of 3.” I assume the gutter-width of “3” is a typo? I tried setting this up in Sketch with a gutter width of 30 px, with “Gutters on outside” enabled and that seemed to reconcile. But when I applied the column-width values in your list above, after 2 columns it didn’t add up: 2 col @ 510 px leaves 30 px gutters – check, all good… Read more »
“3 col @ 320 px – leaves a pixel surplus (320×3=960 1080-960=120 120/3=40 px gutters)
4 col @ 225 px – (225×4=900 1080-900=180 180/4=45 px gutters)”
3 col 1 -1 – 1 has 2 (-) gutters
4 col 1 -1 – 1 – 1 has 3 (-) gutters
3 col @ 320 px – (320×3=960 1080-960=120 120/2=60)
4 col @ 225 px – (225×4=900 1080-900=180 180/3=60)