![\"Divi](\"https:\/\/mk0markhendriks8nxd9.kinstacdn.com\/wp-content\/uploads\/2019\/08\/Divis-Aspect-Ratios.png\")
<\/figure>\n\n\n\nUnderstanding aspect ratios help in designing layouts, using images in multiple layouts, and moving images from one layout to another. For example, it helps in setting featured images that work well both the blog post and within the blog modules for any layout or size screen. This also helps keep the sizes uniform.<\/p>\n\n\n\n
What is aspect ratio?<\/h3>\n\n\n\n
An aspect ratio is the proportions of the width and height of an image or a screen. It is expressed by the proportions of the width and the same proportions of the height separated by a colon such as x:y or 2:3. If 2 represented 100 pixels then 3 would represent 150 pixels. 100\u00d7150 has an aspect ratio of 2:3.<\/p>\n\n\n\n
Aspect ratios need to be chosen for the medium they\u2019re displayed on. For example, an image designed for a widescreen will be different from one designed for a tall and narrow screen.<\/p>\n\n\n\n
Popular aspect ratios<\/h3>\n\n\n\n
The most popular example is 16:9. This expresses 16 of a unit of measurement times 9 of the same measurement. This is the ratio of today\u2019s standard high definition TV or computer monitor and is expressed in pixels. Many 16\u00d79 screens display 1920\u00d71080 pixels.<\/p>\n\n\n\n
Divi aspect ratios and sizes<\/h3>\n\n\n\n
Knowing the best ratios and image sizes for Divi helps us to design the best layouts possible. Divi was designed with several aspect ratios on mind including 16:9, 4:3, and 3:4. These are common ratios for images.<\/p>\n\n\n\n You can download a pdf version of this cheat sheet in your membership dashboard under the tab cheat sheets. Not a member yet? you can sign up here<\/a> for free.<\/p><\/blockquote>\n\n\n\n For Divi, the images need to be as wide as the column they\u2019re placed in. Also, be sure to include space for padding if you plan to have space between your images. There are several ways you can measure the space needed. For example, you can add a placeholder image<\/a> and then check the size of the image in Google Chrome Tools or using a measuring tool.<\/p>\n\n\n\n Measurement tools, such as a Chrome extension called Page Ruler<\/a>, allows you to measure areas of the screen. This is useful for measuring the width of the modules.<\/p>\n\n\n\n 16:9<\/strong> is the standard ratio for monitors. It\u2019s great for full-width images and headers.<\/p>\n\n\n\n Here are the general image sizes for the main column widths:<\/p>\n\n\n\n 4:3<\/strong> is slightly wider than it is tall. This was the standard ratio for older monitors and it\u2019s a good ratio for most images.<\/p>\n\n\n\n Here are the general image sizes for the main column widths:<\/p>\n\n\n\n 3:4<\/strong> is slightly taller than it is wide and is a great choice for displaying portraits.<\/p>\n\n\n\n Here are the general image sizes for the main column widths:<\/p>\n\n\n\n 1280px wide and 1920px wide can be used for full-screen images.<\/p>\n\n\n\n These dimensions are just guidelines. Although Divi can accommodate any size image, these ratios work best in Divi layouts<\/a>. Your actual sizes will vary based on the content and needs, but they will help you get an idea of what works best where. To help you determine the image sizes for these ratios, take a look at an online tool called\u00a0Aspect Ratio Calculator<\/a>.<\/p>\n\n\n\n The larger the file size of your images the longer the page will take to load. It\u2019s important to optimize your images so your pages will load as fast as possible. Images that take too long to load will increase your bounce rate and reduce your SEO. Keep your images between 60 and 200kb for the best performance and good quality.<\/p>\n\n\n\n Resize the images so they fit within the space you want to use them. Don\u2019t use a 1920px wide image in a space that only needs a 225px image. Resizing the image dramatically reduces the file size and it looks the same as a larger image in the small space. If you plan to use the same images in multiple places it\u2019s best to create a new image that\u2019s sized specifically for each location.<\/p>\n\n\n\n Once the images are resized their file size can be reduced further by compressing them. Compression tools reduce the number of colors and removing unneeded metadata. Files can be reduced as much as 70% or more without a noticeable difference in quality. Images can be compressed with image editing apps or with online tools (more about tools later).<\/p>\n\n\n\n The most common file-types for the web are JPEGs and PNGs. Both are highly compatible with browsers across multiple platforms. Both have their advantages and both use compression to reduce their file sizes. GIFs are also popular for animated images.<\/p>\n\n\n\n File sizes will vary based on the number of colors and detail in the image.<\/p>\n\n\n\n JPEGs<\/strong> are excellent for photos with lots of colors. They\u2019re good choices for background images and featured images. They compress well without losing much quality. They\u2019re not recommended for icons because it can\u2019t be guaranteed that they\u2019ll have clean edges. They tend to be larger files than PNGs and they can\u2019t have transparent backgrounds.<\/p>\n\n\n\n PNGs<\/strong> are great for small images with lots of detail, which makes them great for screenshots. They have clean edges and support transparent backgrounds. This makes them ideal for buttons, icons, and logos. They compress well, but the file sizes can get large if they have a lot of colors.<\/p>\n\n\n\n GIFs<\/strong> are great for short animations with a few colors and low resolution. They\u2019re ideal for showing how a feature works, what happens when a button is clicked, etc. They can become large files really fast if the animation goes on for more than a few frames.<\/p>\n\n\n\n There are lots of good quality free and premium tools available to compress your images while retaining excellent quality. Here\u2019s a look at a few options.<\/p>\n\n\n\n ImageOptim<\/a> \u2013 is a free, open-source, app for Mac that combines the best optimization tools to shrink images for use on the web.<\/p>\n\n\n\n Squash<\/a> \u2013 is a premium app for Mac that lets you tweak the level of compression to get your preferred quality to file size ratio. It can also convert file types.<\/p>\n\n\n\n Caesium Image Compressor<\/a> \u2013 is a free, open-source, compression tool for Windows, Mac, and Linux that can compress images up to 90% without noticeable loss of quality. It has a preview and multi-image processing.<\/p>\n\n\n\n Photoshop<\/a> \u2013 has been the industry standard image editor for many years. It\u2019s available for Windows and Mac. It\u2019s the most expensive and complex, but it also has the most features.<\/p>\n\n\n\n Gimp<\/a> \u2013 is a free, open-source, professional-quality graphics editor for Mac, Windows, and Linux. It\u2019s an excellent Photoshop alternative.<\/p>\n\n\n\n Paint.NET<\/a> \u2013 is a free image editor for Windows. It\u2019s simpler than most editors but still has features such as layers. It\u2019s an excellent option for a free app that\u2019s simple to use.<\/p>\n\n\n\n Paintshop Pro<\/a> \u2013 is a professional graphics editor for Windows that provides a lot of image editing features at a relatively low cost.<\/p>\n\n\n\n Affinity Photo<\/a> \u2013 is a premium image editor for Mac that provides professional-level photography tools at a relatively low cost.<\/p>\n\n\n\n Bulk Resize<\/a> \u2013 an online tool that resizes images on your computer so you don\u2019t have to upload them.<\/p>\n\n\n\n TinyPNG<\/a> \u2013 compresses PNG\u2019s and JPEG\u2019s using a smart lossy compression that reduces the number of colors, but is almost non-detectable.<\/p>\n\n\n\n Compress JPEG<\/a> \u2013 part of a series of sites that compresses and converts JPG, PNG, and PDF files. It also has a manual mode if you want more control over the compression.<\/p>\n\n\n\n Smush<\/a> \u2013 Resizes and compresses any image in any directory using lossless compression. It will resize the images, compress in bulk, compress on upload, add a lazy loader, and more.<\/p>\n\n\n\n WP-Optimize<\/a> \u2013 uses lossy compression to compress and convert JPG, PNG, GIF, BMP, and TIF file-types. It will also clean your database and cache your site. It will compress in bulk, compress on upload, and has a restore feature.<\/p>\n\n\n\n EWWW Image Optimizer<\/a> \u2013 has lossy compression for JPG, PNG, and PDF files with intelligent conversion so you always have the right file-type for the job including JPG, PNG, or GIF. Its goal is to increase page speed without sacrificing quality.<\/p>\n\n\n\n That\u2019s our look at the best Divi image sizes for your website. Every website is different, but understanding the aspect ratios and best image sizes for Divi will help you create the best images for your Divi website.<\/p>\n\n\n\n What aspect ratios and image sizes do you prefer for your Divi website<\/a>? Let us know in the comments.<\/p>\n\n\n\n![\"Divi](\"https:\/\/mk0markhendriks8nxd9.kinstacdn.com\/wp-content\/uploads\/2019\/08\/Divi-image-sizes.png\")
<\/figure>\n\n\n\nShare this Image On Your Site<\/h3>\n\n\n\n
![\"Divi](\"https:\/\/mk0markhendriks8nxd9.kinstacdn.com\/wp-content\/uploads\/2019\/08\/Divi-aspect-ratios-and-sizes-2.png\")
<\/figure>\n\n\n\nDivi columns and sizes<\/h3>\n\n\n\n
![\"Divi](\"https:\/\/mk0markhendriks8nxd9.kinstacdn.com\/wp-content\/uploads\/2019\/08\/Divi-columns-and-sizes.jpg\")
<\/figure>\n\n\n\n![\"Divi](\"https:\/\/mk0markhendriks8nxd9.kinstacdn.com\/wp-content\/uploads\/2019\/08\/Divi-columns-and-sizes-measurment.jpg\")
<\/figure>\n\n\n\n![\"Divi](\"https:\/\/mk0markhendriks8nxd9.kinstacdn.com\/wp-content\/uploads\/2019\/08\/Divi-sizes-for-images.jpg\")
<\/figure>\n\n\n\nOptimizing Your Images to Reduce Page-Load<\/h2>\n\n\n\n
Resize Images<\/h3>\n\n\n\n
Compress Images<\/h3>\n\n\n\n
File Types and File Sizes<\/h2>\n\n\n\n
![\"File](\"https:\/\/mk0markhendriks8nxd9.kinstacdn.com\/wp-content\/uploads\/2019\/08\/File-types-and-file-sizes.jpg\")
<\/figure>\n\n\n\nImage Compression Tools<\/h2>\n\n\n\n
![\"Image](\"https:\/\/mk0markhendriks8nxd9.kinstacdn.com\/wp-content\/uploads\/2019\/08\/Image-Compression-Tools.jpg\")
<\/figure>\n\n\n\nOffline compression apps<\/h3>\n\n\n\n
Offline image editors<\/h3>\n\n\n\n
Online tools<\/h3>\n\n\n\n
WordPress plugins<\/h3>\n\n\n\n
Ending Thoughts<\/h2>\n\n\n\n
You Might Also Like…<\/h3>\n\n\n\n