Inversely, if it IS going to open in a light-box, ideally, you don’t want the lightbox to display your 300px version. Let’s look at a few examples from the above layout. Jason started a career in education before co-founding a web agency specializing in Divi websites. What is great about the Blog Grid layout is that Divi uses a smaller version of the featured image uploaded to the media gallery (with a width of 400px). I.e., for example, if I want to use a full image header should I generate manually all sizes of images you suggested in this post? Most of the time, a 1280 image will work just fine in place of a 1920 image. Awesome and useful resource! If using a fullwidth section background image, these images will expand to the full width of your browser. add_image_size( 'homepage-thumb', 220, 180, true ); These functions like set_post_thumbnail_size and add_image_size are used in your themeâs file to create additional image sizes. hello! You should definately include more information about Retina implementation though. The featured images should be as wide as the column it sits in. And thank you so much, Elegant Themes, for educating me with this amazing blog. Another important thing to consider about Divi image sizes is the file type. A person module image on a 1 column layout will be displayed on the left side of the content at 320px. I would like to do the same thing for the blog grid featured image??? I use Divi for my photography work – and I decide the aspects I need myself. The blurb image follows the same rule of matching image width with column width, with the exception of the 1 column, which has a max width of 550px instead of the normal 1080px. So what we are left with is 250×250. We are also giving away $800,000... Posted on November 28, 2020 by Donjete Vuniqi in Divi Resources, Posted on November 26, 2020 by Randy A. You can adjust the size of the logo in Diviâs theme customizer. GIF’s are good for small images with limited color. Hence, my question, wouldn’t an image sized to a 1080 px or even 1366 px column width have a lower quality display when scaled up to 2048 px (4th gen iPad), to 2560 px (MacBook Pro 13 inch 2015), or to 2880 px (MacBook Pro 15 inch 2016). Thumbnail Image Crop Ratio â How your product gallery thumbnails be cropped. Just use the guideline for image sizes for each column width. Can anyone help me for the responsive css? Great article. Precisely, Divi offers us a lot of responsive options in various places, which we will discover below: 3 - Manage default font sizes for the whole site. You can get away with having really large images without a 1:1 aspect ratio but this will be a lot of wasted file size that will slow down your page load time. Reviews. When/how would you even specify aspect ratio for modules? The option generates 3 additional Divi Image Sizes with the 16:9 aspect ratio based on Divi Theme breakpoints.The additional resized images are added to the srcset attribute of the image elements and should improve the Divi Image Module output responsiveness on various devices. I’ve looked everywhere for this info, and here you have it all in one easy-to-read post. Even if I try to give my customers (these site owners) some basic understanding of images, usually I see they still upload images right from their camera. Trust me, been there done that, had to start over. Good Guide, I’m curious how the retina a 4k displays affects divi images? Furthermore, these suggestions are meant to be guidelines in order to take the guesswork out of optimizing your images for your Divi site (not a firm standard). ⅓ column: 770 x 433 nice article, thanks! Itâs a one-size-fits-all. 4:3 – 600 x 400. Call to Action Module Finally! And on iPad, browser always opens into a full screen view. Only Available For A Short Time For 1/2 width, I use image width of 510, but on the screen, it is displayed at a width of 490. Here are a few good image compression tools to consider: In general, the smaller the file size the better. It might be worth considering if the majority of your audience uses Retina displays. Is it relevant what the “Website Content Width” setting is set to in the Layout Settings? This was great to read. A good rule of thumb to optimize for these screens is to double the dimensions. Thanks, this is a keeper! You can also adjust the vertical alignment to bottom, if you want your image to hug the bottom of the header. Christian Rauchenwald, The default Divi logo PNG dimensions are 93 pixels x 43 pixels. The first thing you can do to optimize Divi's Responsive Design is to set the font size to match the screen size. His specialties include product reviews, plugin and theme roundups, in-depth tutorials, website design, industry news, and interviews. Factuurprogramma-V6-PNG8-1080×675.png À présent, si vous observez les fichiers de votre site, via FTP (Filezilla), à lâarborescence www > wp-content > uploads > dossier année > dossier moisâ¦ I think they might be generated by wordpress for the various dashboard viewing options. Adding featured images to your posts to be displayed using the Blog Module is pretty straightforward. I recommend using these sizes as a loose guideline and experimenting to see what works best for you. Thanks in advance either way. However, there is something I don’t understand: should I generate manually all those sizes of images? The perfect theme for bloggers and online-publications. It is almost impossible to achieve a correct effect without the photo undergo a zoom effect …. When you click to view your portfolio item from the grid layout, the featured image will span the width of the content section. Could we please have a detailed explanation of how images work with parallax. ¼ column: 370 x 208. But I have a question related to this image size, is the setting in the: That’s our look at how to choose the best image sizes for your Divi website. - Fixed broken image size on Image module and image logo of Menu module. Divi offers this option in its customizer customization options: They’re chosen carefully for their location within the layout. Yes, it takes up space on our servers, no, there is nothing we can do about it. The question I get asked most from clients is, what size image should I use in this space? This is one of the best and most useful posts ever!!! By default, Divi converts your portrait image to a 90 x 90 size and a 90 border width displaying it as a circle. When the screen size is less than 767px the image spans the width of the content area at a max width of 600px. No need to upload different sizes. I installed WP-SMUSH and did set the setting of media file to 0 pixels in WP ( except for thumbs). Receive notifications about our new blog posts. For instance, with a 1331px content width, you images for a one column layout should be 1331px wide instead of the default 1080px. Since this smaller image is created and displayed automatically, there is no need to worry about your page loading an image file size that is too big for the grid column. 2 column: 520px Cheers! This is helpful for reducing file size and keeping your page load time down. Factuurprogramma-V6-PNG8-157×157.png Great article Jason. I hope this serves as a helpful resource for your future projects. In this article I’m going to take the guess work out of using images within Divi and teach you how to find (or create) the perfect size images for your Divi website, every time. The following guidelines for image dimensions are based on Divi’s default layout settings. It pre-creates a lot of image files “just in case” WP needs it for thumbs etc. Although Divi can accommodate any size image, these ratios work best in Divi layouts. Don’t forget that the featured image will also be used on your single post template (the page that displays your full post after you click on the post excerpt). This means that your 2 column and 1 column layout may show a blurry version of your product image. I tried using “Simple Image Sizes” plugin, but the created sizes don’t show up in the media dialog when I add an image. But yeah, the width is what is important here for us photographers. I was wrong! For this post, I will be basing all recommended image dimensions on these aspect ratios. Jason, you care about your audience. These should look familiar to you if ever adjusted your TV screen or monitor settings before. I will revisit it again and again. Again, this is using the default column structure of 1080 pixels maximum width and gutter-width of 3. Could you please address the 1080 px default width selection. Elegant Themes recommends specific image sizes for each module. This wonât affect any other image sizes on your site. Additionally, the Divi Builder allows you to add ‘alt’ text and title text from within certain modules. So if you are keeping the default settings, I would recommend your image dimensions be exactly 90 x 90. Question for you — the on-screen displayed sizes of the images does not match the recommended sizes even when I use the exact same size. It’ll use the smaller 1:1 thumbs for a phone or a tablet, and bigger 1:1 thumbs for a bigger screen etc. I know can can use Photoshop to resize and optimize, but, it seems like wasted effort when it’s been done for me. We can use the common ratios to work out the image heights for the recommended image widths listed above. Just what I’ve been looking for, a definitive guide! The recommended sizes for Divi images when using a 4 x 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 For the person module, it’s time to introduce the aspect ratio 3:4 which is a great size for portraits. The new Divi Theme v.4 update introduced an undocumented option to âEnable Responsive Imagesâ support. A fix has been requested, by myself and others, for the past few years. This one is 400 x 400 with a file size of 17kb. It forces you to crop every image. . This is completely out of ET’s control – this is just something that WP does as “standard”. I am recommending these aspect ratios for the images, not the modules. Thank you for putting this together, Elegant Themes team! I tried overriding Diviâs post_thumbnails.php fileâ¦no dice. This is a great tutorial to bookmark! Required reading for anyone starting to work with Divi! If these sizes wonât work for you, continue reading to understand why we chose these sizes â¦ This website is not affiliated with nor endorsed by Elegant Themes. ¼ column: 370 x 278, 1 column: 1080 x 608 Yes, this will affect the size of your images for desktop display. There isn’t a single best size for every layout location or screen size, but playing around with sizing for specific locations within your layout will give you excellent results for your Divi image sizes. Fullwidth Post Slider Try to keep the size under 300kb. Does this mean that the images are actually getting scaled to slightly lower sizes before being displayed? Instead of the already square image we uploaded we now are left with only 62.5% of â¦ Divi makes adding images to your website easy. Factuurprogramma-V6-PNG8-510×382.png Interesting and helpful. So if you are using a 1 column layout for your Post Title Module, 1080px width is ideal for your featured image. Force Divi Images to a Uniform Size. If you’ve loaded one of the many free layouts that are available in the Divi Builder (Elegant Themes provides two new layout packs every week. The general rule of thumb is to have your images be at least as wide as the column in which it sits. As I mentioned before, there is no one perfect standard image dimension for all websites and screen sizes. Factuurprogramma-V6-PNG8-510×274.png My hope with this article is to shed some light on how the modules handle images so you can have a better idea of how to size them appropriately. Click the green check to save the module. This is an awesome resource! Stay up to date with the latest Divi Space news, updates, special offers and more! This means Dâ¦ With PHP-functions like: add_image_size( ‘homepage-thumb’, 220, 180, true ); Not so happy, but there is nothing you can do about it Thanks again. You can crop however you want, as long as you use the with as a rule of thumb before cropping/resizing. Change Divi Portfolio Images to Square or Any Other Proportion. It helps out so so much. You can choose the placement of your featured image to be above the title, below the title, or as a background of the title. The same image loads on large desktop, tablet and mobiles. Just like for the Blog Module, Divi creates a smaller version (400px wide) of the portfolio featured image to be used for the Portfolio Module grid layout. Tom Greer on June 6, 2020 at 11:04 am If the image will display as a full-screen header it will need to be much larger than if it were an image for a blurb in a 1/6 column. Great Job . If the sizes that Divi generates look blurry in a different size module that you originally intended to use the image for, then you might consider uploading a larger size. You should upload the full size and then the theme will display the smaller image automatically. ⅔ column: 700 x 394 Randy A Brown is a professional writer specializing in WordPress, eCommerce, and business development. Great guide! Uploading images of the size that you’re going to use them saves storage space on your server and saves bandwidth, which speeds up your website’s loading time. We needs a DIVI Gallery Slider to keep the same height and scale the images to fit. Jason, I’m trying to figure out where/when Divi displays smaller (thumbnail) versions and when it displays a css shrunken version. To accommodate for a 3 column layout and the single product page, I recommend sticking with a product image size at least 330px wide. A very useful resource indeed. When using a background image for your module, the background image will always need to be at least as wide as the column in which it sits. I’ll keep this in mind for a future post. But – and this is my point – here Divi kicks in as well, on the down side: Divi somehow has a ‘largest thumbnail size’ of 2880px wide… Imagify can’t or won’t resize below this maximum thumbnail size, and I suppose other compression tools have similar settings. Again, with sliders, the height is always determined by the amount of content, so you may need to adjust the height to fit your needs. Got the same issue; dont seem to be able to configure this either. Click Save and the add_image-size function will be enabled. Thanks. Awesome. Just like for the Blog Module. and the grey box is becoming transparent. I’d like to keep the original resolution in the linked image (Lightbox) and obviously use TinyPNG to reduce the size of all images. When changing these settings, make sure that you keep the width and height the same and the border radius at 100 if you want to keep the circled images looking good. You literally just plug in the dimensions of your image to this URL and it will put a placeholder image in. Thx for a nice article. Thanks. ⅔ column: 700 x 526 There are lots of ways to use images in Divi including full-screen image and header modules, galleries, project modules, blog modules and blog posts, blurbs, shop modules, and lots more. The shop module allows you to display your products in a one column layout all the way up to a six column layout. Great article, Jason! But, why can’t I just use an image WordPress already resized? But that’s just the tip of the iceberg! For example, if you are using a blog module in a two-thirds column with a right sidebar, you would need to use a featured image at least 700px width since that is the width of a two-thirds column in Divi. For general use, here are their recommended image sizes for 16 x 9 ratio: And these are the image sizes for 4 x 3 ratio: Keep in mind that image sizes will be different for the various modules and photo subjects. You can also click the Use Visual Builderbutton when browsing your website on tâ¦ This image is 1280 x 854 with a file size of 55kb. Pascal on May 23, 2020 at 5:33 am Thank you. The 4:3 aspect ration is the standard screen size for older TV’s and monitors and has a more box-like display. Get the Exclusive FREE Black Friday Header & Footer Layout Pack, Get the Exclusive FREE Black Friday Landing Page Layout Pack, Divi Design Showcase: New Submissions from November 2020. ¼ column: 225, Width: Equal to the size of the single post column width (default 795px). But for larger monitors, a safer bet would be to use an image that is 1920px wide. I had been planning to use Divi for websites for photographers, but this gives me pause, as all images will have to be cropped to fit one of your aspect ratios. This is the MOST common issue with the Divi sliderâ¦ The background image size will rarely be left at the default value. So if you want the image to fill the column width on tablet displays, you may want to start with an image size with a width of 370px instead of the 225px width. ⅓ column: 320px Any idea if Divi will start supporting Srcset? }. But could i please make a request that the Elegant themes crew do an in depth tutorial on how parallax works with images. https://www.elegantthemes.com/blog/divi-resources/the-ultimate-guide-to-using-images-within-divi, How to Choose the Best Divi Logo Height for Your Website, Ten Ways to Improve the User Experience of Your Divi Website, How to Create a WooCommerce Store in Under an Hour With Divi, Save these links if you want to be better at CSS / Divi, Theme Showcase! Great article. You can customize the dimensions and border radius of the portrait image from within the Advanced setting of the Testimonial Module. Now it is here. Great ! Divi Blog Post Featured Image Size â 1200 x 750. JPEG’s should be used for all of your full color photographs like featured images and background images. These dimensions are just guidelines. Thanks. Brown in Divi Resources. Width: equal to your single post column width (default: 795px). Under 200kb is even better. The downside is that it doesn’t fill the column width on smaller screens like tablets. I know that I may change the settings for the Thumbnail, Medium and Large size but I’d also like to add the formats for 1/2, 1/3, 1/4, 3/4 column width (as mentioned in the article above). You can adjust the size of the logo in Diviâs theme customizer, but you canât adjust it larger than its native pixel size. This doesn’t address the height your images need to be. Make sure you are adding this info to your images whenever uploading a new image to your media gallery. Divi is a registered trademark of Elegant Themes, Inc. If you are using the lightbox feature with your image, you may want to use a larger image. There’s also a question I have about selecting images that you know are going to be small on the front-end, but are uploaded as a larger image. And, just like with the Blog Module Fullwidth layout, the featured image needs to be large for your single post display. You are welcome, Wilhelm. 3 column: 332px Awesome! Sorry if that was confusing. Google+, FB all pick up images off posts. Select an image size in the module under the âAdvancedâ tab. In those cases you’re better to use a 16:9 image” …or something like this to offer some clarity. Only use 1920 x 1080 where that size is needed. Perhaps you can also share how best to add video. Factuurprogramma-V6-PNG8-400×400.png In the wordpress dashboard in the mutimedia settings section, I gave value to 0 in all image sizes, is that good or bad? My current issue is that I’m looking for a way to add custom images sizes as mentioned on Divi’s website https://www.elegantthemes.com/blog/divi-resources/the-ultimate-guide-to-using-images-within-divi. ½ column: 770 x 433 Using the 4:3 or 16:9 ratios is really up to the designer. When using the image module, you can simply follow the 16:9 and 4:3 layout to choose what image size you need for each column layout. It’s that time again for our monthly Divi Showcase, where we take a look at ten amazing Divi websites made by our community members. For the Primary Menu Bar you can set the Divi logo max height in the theme customizer between 30 to 100 pixels with the default set at 54 pixels. The ultimate email opt-in plugin for WordPress. Not to be confused with fullwidth background images, the fullscreen background image refers to the setting on your Fullwidth Header Module that allows your header to span the full size (both width and height) of your browser window. This is a super helpful article, Randy, thank you! If the image will display as a full-screen header it will need to be much larger than if it were an image for a blurb in a 1/6 column. Do you choose the Divi image sizes for your website? Did not see in the article if DIVI can automatically choose smaller faster loading versions of images to deliver to a mobile device. Posted on April 20, 2017 by Jason Champagne in Divi Resources | 85 comments. Thank you! Even though it may have taken a while to get this info which I’ve been crying out for you still had the PSD’s available to help get us started. 1 License. We have already published two other tutorials in our âchange image aspect rationâ series, and there is one more to follow after this. It cant be easy but the blogs are so helpful and make the combination of being an ET member and the Divi theme miles out from the rest. Letâs say you use the native divi image module with image of size 2000px. ½ column: 510px You want it to show your higher-res image. Divi was built with three aspect ratios in mind – 16:9, 4:3, and 3:4. One could argue that usually browser is not opened in full screen on a desktop, but even small laptops and iPads have much wider resolutions. This includs a content width of 1080px and a gutter width of 3.