How to Optimize Divi Images Accurately<\/strong><\/h2>\nWhile Divi makes it extremely easy to build websites without code. It has a whole multitude of options to add images and that can definitely get in the way by making things more complicated.<\/p>\n
Follow these key principles for optimizing image size:<\/b><\/h3>\n\n- Column Layout:<\/strong> Maximum width of your image<\/li>\n
- Aspect ratio:<\/strong> Height and width of your image<\/li>\n
- Responsiveness:<\/strong> How your images are optimized for different screen sizes<\/li>\n<\/ul>\n
Using Divi\u2019s Column Layouts<\/strong><\/h4>\n![\"\"](\"https:\/\/divigallery.com\/wp-content\/uploads\/column-layouts-min.png\")
<\/p>\n
Divi Uses a whole multitude of column layouts that support images of different sizes however the hard part is actually getting those images to scale up and down as per different screen sizes.<\/p>\n
Pro Tip<\/strong>: As a rule of thumb make sure your images at least as wide as the column it is going to be used into.<\/p>\nImage sizes for standard Divi Column Layouts:<\/strong><\/p>\n1 Column Layout<\/strong><\/p>\n![\"\"](\"https:\/\/divigallery.com\/wp-content\/uploads\/1080-min.png\")
<\/p>\n
Recommended Image Width: 1080px<\/p>\n
1\/2 Column 510px<\/strong><\/p>\n![\"\"](\"https:\/\/divigallery.com\/wp-content\/uploads\/510-min.png\")
<\/p>\n
Recommended Image Width: 510px<\/p>\n
1\/3 Column 320px<\/strong><\/p>\n![\"\"](\"https:\/\/divigallery.com\/wp-content\/uploads\/320px-min.png\")
<\/p>\n
Recommended Image Width: 320px<\/p>\n
1\/4 Column 225px<\/strong><\/p>\n![\"\"](\"https:\/\/divigallery.com\/wp-content\/uploads\/225px-min.png\")
<\/p>\n
Recommended Image Width: 225px<\/p>\n
However, the problem with using Divi column layouts is that they can\u2019t accurately measure the height of your images which is affected by the content within that section and the screen size.<\/p>\n
Using Aspect Ratio as a Reference<\/strong><\/h4>\nAspect ratio is the ratio of width to height of an image or a screen and this is a much better measure to determine the size of your image for your Divi website. What’s more aspect ratio is important when optimizing images for small screens,\u00a0especially<\/em> 11 inch laptops.<\/p>\nIf you use aspect ratio 16:9 to you can use the following dimensions for your images:<\/strong><\/p>\n\n- 1 column:<\/strong> 1080px by 608px<\/li>\n
- 3\/4 column:<\/strong> 795px by 447px<\/li>\n
- 2\/3 \u00a0column:<\/strong> 700px by 394px<\/li>\n
- 1\/2 column:<\/strong> 510px by 287px<\/li>\n
- 1\/3 column<\/strong>: 320px by 181px<\/li>\n
- 1\/4 column:<\/strong> 225px by 128px<\/li>\n<\/ul>\n
If you use the aspect ratio 4 x 3 these are the dimensions for your images:<\/strong><\/p>\n\n- 1 column:<\/strong> 1080px by 810px<\/li>\n<\/ul>\n
\n- 3\/4 column<\/strong>: 795px by 597px<\/li>\n<\/ul>\n
\n- 2\/3 column:<\/strong> 700px by 526px<\/li>\n<\/ul>\n
\n- 1\/2 column:<\/strong> 510px by 384px<\/li>\n<\/ul>\n
\n- 1\/3 column:<\/strong> 320px by 241px<\/li>\n<\/ul>\n
\n- 1\/4 \u00a0column:<\/strong> 225px by 170px<\/li>\n<\/ul>\n
Note<\/strong>: Keep in mind these dimensions are simply guidelines and can vary depending on the content so it’s best to use them as a reference and work from there.<\/p>\nDivi’s Image Module<\/strong><\/p>\nFor the Image module, the aspect ratio is either 16:9 or 4:3 layout and either can be used to choose an image size for each column layout.<\/p>\n
So you can follow the same dimensions as for column layouts for instance if you’re using a 2 column layout in 4 x 3 ratio you can use an image with dimensions 510px x 384px.<\/p>\n
![\"\"](\"https:\/\/divigallery.com\/wp-content\/uploads\/384px-min.png\")
<\/p>\n
Pro Tip:<\/strong> With 2 or more column layouts the mobile\/tablet version changes to cascade so I recommend using an image with a slightly longer width so as to offer a wider fit on smaller screens.<\/p>\nDivi’s\u00a0<\/strong>Background Images\u00a0<\/strong><\/h4>\nFor background images make sure the image is at least as wide as the column in which you plan to use it which is as follows:<\/p>\n
\n- 1 Column:<\/strong> 1080px<\/li>\n
- 3\/4 Column:<\/strong> 795px<\/li>\n
- 2\/3 Column:<\/strong>700px<\/li>\n
- 1\/2 Column<\/strong>: 320px<\/li>\n
- 1\/4 Column:<\/strong> 225px<\/li>\n<\/ul>\n
Full-Width Background Images Module<\/strong><\/h4>\nIf you are using a background image in a full-width section the images here will need to expand to the full width of your browser meaning you need to make these images as wide as a the monitor display at around 1920px.<\/p>\n
The following modules need to have a 1920px wide background image:<\/strong><\/p>\n\n- Fullwidth Header<\/li>\n
- Fullwidth Portfolio<\/li>\n
- Fullwidth Slider<\/li>\n
- Fullwidth Post Title<\/li>\n
- Fullwidth Post Slider<\/li>\n
- Full-Width Image<\/li>\n<\/ul>\n
Pro Tip:<\/strong> Make sure you look into the content for these modules as this will determine the height of your background image.<\/p>\nFullwidth Header Module<\/strong><\/h4>\nI figured since this is a commonly used module in Divi websites I\u2019d dedicate a section just for this module.<\/p>\n
Note<\/strong>: Keep in mind all the images below this are specifically for the Fullwidth Header module.<\/p>\nBackground Image:<\/strong><\/h4>\n![\"\"](\"https:\/\/divigallery.com\/wp-content\/uploads\/fullscreen-backaground.png\")
<\/p>\n
Do not confuse this with the full-width background image<\/strong> these guidelines are specifically for the Fullwidth header module that allows your header to span across the full screen of your monitor.<\/p>\nYou will need to go to Module Settings > Design > Make Fullscreen<\/strong>: and check \u201cYES\u201d to span the background image across the screen.<\/p>\nSince most monitors either use 4:3 or 16:9 aspect ratio your images will need to be 1280px or 1920px wide below are the recommended dimensions:<\/p>\n
\n- 4:3 Aspect Ratio –<\/strong> 1280px x 960px<\/li>\n
- 16:9 Aspect Ratio<\/strong> – 1920px x 1080px<\/li>\n<\/ul>\n
Logo Image:<\/strong><\/h4>\nThe fullwidth header module allows you to place a logo on the inside of the header content area. Divi\u2019s Logo is 93px x 43px which serves as a perfect reference.<\/p>\n
There are many more modules but these guidelines should be enough for most websites if you want to access more content regarding the same I recommend checking of Divi\u2019s resources.<\/a><\/p>\nResponsiveness: How to optimize images for different screen sizes<\/strong><\/h3>\n![\"\"](\"https:\/\/divigallery.com\/wp-content\/uploads\/responsive-images.png\")
<\/p>\n
You can simply use Divi’s Mobile\/tablet view to check how your images look on smaller screens<\/p>\n
Also when on smaller screens most column layouts turn are displayed cascade\u00a0style so if you want your images to appear bigger on smaller screens it’s the best practice to use wider images so as to avoid having less spacing on the sides.<\/p>\n
Why is it important to Optimize Images?<\/strong><\/h2>\n![\"\"](\"https:\/\/divigallery.com\/wp-content\/uploads\/image-ssize-min.jpg\")
<\/p>\n
The advantage of using specific dimensions and sizes for your images is to reduce the file size of your image so as to take up less space on your website and ultimately make it load faster.<\/p>\n
A website that loads faster could mean many things for an MNC it cou,ld mean millions of dollars more in sales or for an affiliate blogger higher conversions.<\/p>\n
Common practices whilst Optimizing images:<\/strong><\/h3>\n1. Resize images as per their actual size<\/strong><\/h3>\nOne of the biggest factors that affect file size is the dimensions of the image. I’ve already talked about this above which should be enough to resize images right.<\/p>\n
2. Compress images before you upload<\/strong><\/h3>\nUsing a quality compression tool like Imagify or Compress PNG can reduce your file size a ton without sacrificing on quality.<\/p>\n
Some of the tools I recommend are as follows:<\/strong><\/p>\n\n- Imagify <\/a>– A premium tool that compresses both PNG\/JPG using smart loss compression and is considered the best compression in the industry<\/li>\n
- Compress PNG\/JPEG<\/a> – A free compression tool that can compress both PNG and JPG and is one of the best free compression tools in the industry<\/li>\n<\/ul>\n
3. Image SEO<\/strong><\/h3>\n![\"\"](\"https:\/\/divigallery.com\/wp-content\/uploads\/image-SEO-min.png\")
<\/p>\n
When it comes to image SEO google relies on image file names, \u2018alt\u2019 text, captions, file type, etc. I can go much more into detail but I recommend you check out this image SEO guide<\/a> for a more detailed guide.<\/p>\nNote:<\/strong> Divi has an option to add alternate text in its Image Module settings which overrides the WordPress sections.<\/p>\n4. Use the right File Formats<\/strong><\/h3>\nMost images are either JPEG or PNG (sometimes even GIF) and these are good for most situations because of their widespread compatibility. It’s best practice to do the following:<\/p>\n
- \n
- Column Layout:<\/strong> Maximum width of your image<\/li>\n
- Aspect ratio:<\/strong> Height and width of your image<\/li>\n
- Responsiveness:<\/strong> How your images are optimized for different screen sizes<\/li>\n<\/ul>\n
Using Divi\u2019s Column Layouts<\/strong><\/h4>\n
<\/p>\nDivi Uses a whole multitude of column layouts that support images of different sizes however the hard part is actually getting those images to scale up and down as per different screen sizes.<\/p>\n
Pro Tip<\/strong>: As a rule of thumb make sure your images at least as wide as the column it is going to be used into.<\/p>\n
Image sizes for standard Divi Column Layouts:<\/strong><\/p>\n
1 Column Layout<\/strong><\/p>\n
<\/p>\nRecommended Image Width: 1080px<\/p>\n
1\/2 Column 510px<\/strong><\/p>\n
<\/p>\nRecommended Image Width: 510px<\/p>\n
1\/3 Column 320px<\/strong><\/p>\n
<\/p>\nRecommended Image Width: 320px<\/p>\n
1\/4 Column 225px<\/strong><\/p>\n
<\/p>\nRecommended Image Width: 225px<\/p>\n
However, the problem with using Divi column layouts is that they can\u2019t accurately measure the height of your images which is affected by the content within that section and the screen size.<\/p>\n
Using Aspect Ratio as a Reference<\/strong><\/h4>\n
Aspect ratio is the ratio of width to height of an image or a screen and this is a much better measure to determine the size of your image for your Divi website. What’s more aspect ratio is important when optimizing images for small screens,\u00a0especially<\/em> 11 inch laptops.<\/p>\n
If you use aspect ratio 16:9 to you can use the following dimensions for your images:<\/strong><\/p>\n
- \n
- 1 column:<\/strong> 1080px by 608px<\/li>\n
- 3\/4 column:<\/strong> 795px by 447px<\/li>\n
- 2\/3 \u00a0column:<\/strong> 700px by 394px<\/li>\n
- 1\/2 column:<\/strong> 510px by 287px<\/li>\n
- 1\/3 column<\/strong>: 320px by 181px<\/li>\n
- 1\/4 column:<\/strong> 225px by 128px<\/li>\n<\/ul>\n
If you use the aspect ratio 4 x 3 these are the dimensions for your images:<\/strong><\/p>\n
- \n
- 1 column:<\/strong> 1080px by 810px<\/li>\n<\/ul>\n
- \n
- 3\/4 column<\/strong>: 795px by 597px<\/li>\n<\/ul>\n
- \n
- 2\/3 column:<\/strong> 700px by 526px<\/li>\n<\/ul>\n
- \n
- 1\/2 column:<\/strong> 510px by 384px<\/li>\n<\/ul>\n
- \n
- 1\/3 column:<\/strong> 320px by 241px<\/li>\n<\/ul>\n
- \n
- 1\/4 \u00a0column:<\/strong> 225px by 170px<\/li>\n<\/ul>\n
Note<\/strong>: Keep in mind these dimensions are simply guidelines and can vary depending on the content so it’s best to use them as a reference and work from there.<\/p>\n
Divi’s Image Module<\/strong><\/p>\n
For the Image module, the aspect ratio is either 16:9 or 4:3 layout and either can be used to choose an image size for each column layout.<\/p>\n
So you can follow the same dimensions as for column layouts for instance if you’re using a 2 column layout in 4 x 3 ratio you can use an image with dimensions 510px x 384px.<\/p>\n
<\/p>\nPro Tip:<\/strong> With 2 or more column layouts the mobile\/tablet version changes to cascade so I recommend using an image with a slightly longer width so as to offer a wider fit on smaller screens.<\/p>\n
Divi’s\u00a0<\/strong>Background Images\u00a0<\/strong><\/h4>\n
For background images make sure the image is at least as wide as the column in which you plan to use it which is as follows:<\/p>\n
- \n
- 1 Column:<\/strong> 1080px<\/li>\n
- 3\/4 Column:<\/strong> 795px<\/li>\n
- 2\/3 Column:<\/strong>700px<\/li>\n
- 1\/2 Column<\/strong>: 320px<\/li>\n
- 1\/4 Column:<\/strong> 225px<\/li>\n<\/ul>\n
Full-Width Background Images Module<\/strong><\/h4>\n
If you are using a background image in a full-width section the images here will need to expand to the full width of your browser meaning you need to make these images as wide as a the monitor display at around 1920px.<\/p>\n
The following modules need to have a 1920px wide background image:<\/strong><\/p>\n
- \n
- Fullwidth Header<\/li>\n
- Fullwidth Portfolio<\/li>\n
- Fullwidth Slider<\/li>\n
- Fullwidth Post Title<\/li>\n
- Fullwidth Post Slider<\/li>\n
- Full-Width Image<\/li>\n<\/ul>\n
Pro Tip:<\/strong> Make sure you look into the content for these modules as this will determine the height of your background image.<\/p>\n
Fullwidth Header Module<\/strong><\/h4>\n
I figured since this is a commonly used module in Divi websites I\u2019d dedicate a section just for this module.<\/p>\n
Note<\/strong>: Keep in mind all the images below this are specifically for the Fullwidth Header module.<\/p>\n
Background Image:<\/strong><\/h4>\n
<\/p>\nDo not confuse this with the full-width background image<\/strong> these guidelines are specifically for the Fullwidth header module that allows your header to span across the full screen of your monitor.<\/p>\n
You will need to go to Module Settings > Design > Make Fullscreen<\/strong>: and check \u201cYES\u201d to span the background image across the screen.<\/p>\n
Since most monitors either use 4:3 or 16:9 aspect ratio your images will need to be 1280px or 1920px wide below are the recommended dimensions:<\/p>\n
- \n
- 4:3 Aspect Ratio –<\/strong> 1280px x 960px<\/li>\n
- 16:9 Aspect Ratio<\/strong> – 1920px x 1080px<\/li>\n<\/ul>\n
Logo Image:<\/strong><\/h4>\n
The fullwidth header module allows you to place a logo on the inside of the header content area. Divi\u2019s Logo is 93px x 43px which serves as a perfect reference.<\/p>\n
There are many more modules but these guidelines should be enough for most websites if you want to access more content regarding the same I recommend checking of Divi\u2019s resources.<\/a><\/p>\n
Responsiveness: How to optimize images for different screen sizes<\/strong><\/h3>\n
<\/p>\nYou can simply use Divi’s Mobile\/tablet view to check how your images look on smaller screens<\/p>\n
Also when on smaller screens most column layouts turn are displayed cascade\u00a0style so if you want your images to appear bigger on smaller screens it’s the best practice to use wider images so as to avoid having less spacing on the sides.<\/p>\n
Why is it important to Optimize Images?<\/strong><\/h2>\n
<\/p>\nThe advantage of using specific dimensions and sizes for your images is to reduce the file size of your image so as to take up less space on your website and ultimately make it load faster.<\/p>\n
A website that loads faster could mean many things for an MNC it cou,ld mean millions of dollars more in sales or for an affiliate blogger higher conversions.<\/p>\n
Common practices whilst Optimizing images:<\/strong><\/h3>\n
1. Resize images as per their actual size<\/strong><\/h3>\n
One of the biggest factors that affect file size is the dimensions of the image. I’ve already talked about this above which should be enough to resize images right.<\/p>\n
2. Compress images before you upload<\/strong><\/h3>\n
Using a quality compression tool like Imagify or Compress PNG can reduce your file size a ton without sacrificing on quality.<\/p>\n
Some of the tools I recommend are as follows:<\/strong><\/p>\n
- \n
- Imagify <\/a>– A premium tool that compresses both PNG\/JPG using smart loss compression and is considered the best compression in the industry<\/li>\n
- Compress PNG\/JPEG<\/a> – A free compression tool that can compress both PNG and JPG and is one of the best free compression tools in the industry<\/li>\n<\/ul>\n
3. Image SEO<\/strong><\/h3>\n
<\/p>\nWhen it comes to image SEO google relies on image file names, \u2018alt\u2019 text, captions, file type, etc. I can go much more into detail but I recommend you check out this image SEO guide<\/a> for a more detailed guide.<\/p>\n
Note:<\/strong> Divi has an option to add alternate text in its Image Module settings which overrides the WordPress sections.<\/p>\n
4. Use the right File Formats<\/strong><\/h3>\n
Most images are either JPEG or PNG (sometimes even GIF) and these are good for most situations because of their widespread compatibility. It’s best practice to do the following:<\/p>\n
- Compress PNG\/JPEG<\/a> – A free compression tool that can compress both PNG and JPG and is one of the best free compression tools in the industry<\/li>\n<\/ul>\n
- 16:9 Aspect Ratio<\/strong> – 1920px x 1080px<\/li>\n<\/ul>\n
- 4:3 Aspect Ratio –<\/strong> 1280px x 960px<\/li>\n
- 3\/4 Column:<\/strong> 795px<\/li>\n
- 1 Column:<\/strong> 1080px<\/li>\n
- 1\/4 \u00a0column:<\/strong> 225px by 170px<\/li>\n<\/ul>\n
- 1\/3 column:<\/strong> 320px by 241px<\/li>\n<\/ul>\n
- 1\/2 column:<\/strong> 510px by 384px<\/li>\n<\/ul>\n
- 2\/3 column:<\/strong> 700px by 526px<\/li>\n<\/ul>\n
- 3\/4 column<\/strong>: 795px by 597px<\/li>\n<\/ul>\n
- 3\/4 column:<\/strong> 795px by 447px<\/li>\n
- Aspect ratio:<\/strong> Height and width of your image<\/li>\n