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.
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.
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)
Guilty- of uploading full size photos on 1st Divi site, assuming that Divi is creating the resized ones. So Gtmetrix is giving a D to PlayaLindaHotelTapachula .com However I ran across a plugin called ShortPixel Resize Images, that resizes images and thumbnails, 1st 100 free and $10.00 for 10,000 would do mine many times over. But I have a question, space is not too much an issue on this site. Would I not be better to leave full size photos and only have it create the resized thumbnails and webp, in that way when site is viewed it would be… Read more »
Excellent share Craig! Choosing the right image size is really important for the website performance and your have made the task look really easy with your tips! Thanks for sharing!
Hi! I am creating images at the 16:9 ratio to fit into a1/2 column: 510 x 287 pixels. The file is 72 dpi and a compressed JPEG. When I load it into the page, it always appears enlarged. I don’t understand what I am doing wrong. Thoughts?