Choosing the right image size is essential for optimizing the performance and visual appeal of your Divi website. Using appropriately sized images ensures fast loading times, high-quality visuals, and a better user experience.
This article will guide you through the ideal image sizes for various elements on Divi websites.
Divi makes adding images to your website easy. An image can be used in various modules such as the Blurb module, Call to Action module, Heading module, Gallery module, Image module, and much more.
Images can also be used as background images for all the available elements, such as Sections, Rows, Columns, and Modules. However, knowing the correct image sizes for each instance is one of the biggest challenges.
No standard “perfect” size exists 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 ratio between the width and height 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
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 (16) represents the width (x-axis), and the number on the right(9) is the height (y-axis). The two most popular aspect ratios are 4:3 and 16:9. 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
3:4
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 don’t have to slow down your page load time. For a complete guide on optimizing your images, check the How to Reduce the Size of JPEG and Other Image Files blog post.
Choose the image size depending on the layout
The following guidelines for image dimensions are based on Divi’s default layout settings. These include a content width of 1080px and a gutter width of 3. Changing these settings may require you to adjust your images' dimensions slightly.
Note: 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. The Height of any image will be automatically set based on its width value.
Check out our Ultimate Guide to Using Images within Divi from our Blog for a complete list of details regarding various image sizes.