Divi makes adding images to your website easy.
The challenge for some, however, is knowing the correct image sizes to use in each instance.
There is no standard “perfect” size for all websites because each is different. But, there are some things you, as a web designer, can do to ensure your images are a good fit for your Divi site.
Finding the perfect image sizes for your Divi website depends on three main factors:
Aspect ratio: the height and width of your image.
Column layout: the maximum width of your image.
Responsiveness: the changes made to the dimensions of your image on different screen sizes.
Step 1. Use Divi’s Image Aspect Ratio (16:9, 4:3, 3:4)
The aspect ratio expresses the proportional dimensions of the width and height of an image or screen.
The number on the left of the colon represents the width (x-axis), and the number on the right is the height (y-axis). The two most popular aspect ratios are 4:3 and 16:9.
These should look familiar to you if you have ever adjusted your TV screen or monitor settings. The 4:3 aspect ratio is the standard screen size for older TVs and monitors and has a more box-like display.
The newer high-definition televisions and monitors have a 16:9 aspect ratio with a wider display. The 3:4 aspect ratio is useful in Divi for displaying portraits. Divi was built with three aspect ratios in mind – 16:9, 4:3, and 3:4.
Step 2. Optimize Images Before You Upload
It is always best to optimize (resize, compress, crop, etc.) your images before uploading them to WordPress. Also, keep your image file sizes between 60 and 200kb.
That way, you aren’t slow down your page load time. For a complete guide on how to optimize your images, go here.
Step 3. Choose the image size depending on the layout
The following guidelines for image dimensions are based on Divi’s default layout settings. This includes a content width of 1080px and a gutter width of 3. Changing these settings may require you to adjust the dimensions of your images slightly.
The general rule of thumb is to have your images be at least as wide as the column in which it sits.
Dimensions for images according to each column layout.
This doesn’t address the height your images need to be. So, here is a list of dimensions according to the 4:3 and 16:9 aspect ratios. This is helpful to keep your images at a width and height that scales appropriately for mobile.
For a complete list of details regarding various image sizes, check out our Ultimate Guide to Using Images within Divi from our Blog.