Roconpaas

Blog

WordPress Featured Image Blog Post Divi Size: Ultimate Guide

September 16, 2025 by James

WordPress Keeps Logging Me Out

Introduction

If you’ve ever struggled with the right WordPress featured image blog post Divi size, you’re not alone. One of the most common frustrations Divi users face is uploading a featured image only to find it cropped, blurry, or oddly stretched when displayed on a blog post or grid. The problem isn’t just cosmetic — wrong image sizes can slow down your site, hurt SEO, and even ruin how your posts look when shared on social media.

This will cover everything you need to know about Divi featured image sizes. From exact pixel dimensions for each layout to export tips, code snippets and optimization strategies you’ll have a complete blueprint for perfect images. By the end you’ll know how to create featured images that look great, load fast and display correctly on all devices without trial and error.

How Divi Handles Featured Images — What Every Author Needs to Know

How Divi Handles Featured Images

Before we dive into the exact sizes, it’s important to understand how Divi and WordPress process images.

When you upload a featured image in WordPress, it generates several sizes: thumbnail, medium, large and full size. Divi takes it a step further and creates its own sizes for modules like the Blog Module. For example, Divi creates a 400×250 thumbnail for blog post listings. That’s why many users notice their featured images get cropped.

Another important detail is aspect ratio. Divi’s Blog Module has a 16:10 aspect ratio. So if you upload an image that’s not that shape (say a tall portrait photo), Divi will crop it to fit its design. That’s why the same featured image can look different in a full width layout compared to a grid layout.

Finally, remember that Divi displays featured images in multiple places:

  • Blog grid listings
  • Single post headers
  • Fullwidth blog modules
  • Blog Extras or third-party modules

Each location demands a slightly different size, which is why having a clear cheat sheet (we’ll build one below) is crucial.

Exact Featured Image Sizes for Divi by Layout

Here’s the reference you’ve been looking for. If you want your images to display perfectly in Divi without cropping or distortion, use these recommended sizes:

Divi Layout / Column Recommended Size Aspect Ratio Retina (2×) Size Typical Use Case
Single post header / full-width blog module 1080–1920px wide 16:9 or 16:10 2160–3840px wide Hero images, large headers
2/3 column 700px wide 16:10 1400px wide Blog grid with larger cards
1/2 column 510px wide 16:10 1020px wide Two-column layouts
1/3 column 320px wide 16:10 640px wide Blog grids, small previews
Grid/list thumbnail (Divi default) 400×250px 16:10 800×500px Blog Module default thumbnail
Social/OG sharing 1200×628px ~1.91:1 2400×1256px Facebook, LinkedIn, Twitter previews

Pro Tip: If you want a one-size-fits-all solution, export images at 1200×675px. It aligns closely with Divi’s aspect ratio, looks good on most grids, and works well for social sharing.

Why You’re Seeing Blurred or Cropped Featured Images

If your featured images look wrong, it usually comes down to one of these issues:

  1. Wrong aspect ratio
    Divi expects 16:10, but you uploaded something taller or wider. The system auto-crops, cutting off important parts of your image.
  2. Low-resolution upload
    If your uploaded image is smaller than what Divi needs (say 600px wide on a full-width blog), WordPress will stretch it. That’s when you get the dreaded blur.
  3. Theme cropping rules
    WordPress + Divi generate preset sizes. If none of those sizes fit your layout, WordPress serves the closest match and crops the rest.
  4. Caching & old thumbnails
    Sometimes, you’ve fixed your sizes but still see the wrong crop because WordPress is using an old thumbnail. That’s why regenerating thumbnails often fixes the issue.

Prepare and Export Perfect Featured Images

Here’s the workflow I recommend for creating flawless featured images:

  1. Start with the right canvas size
    Always design/export at the largest size you’ll need. For most Divi blogs, that’s at least 1920×1080px.
  2. Keep the aspect ratio consistent
    Stick to 16:10 (or 16:9 if you prefer social media harmony). This prevents Divi from chopping off parts of your image.
  3. Use the safe zone
    Keep important text or subjects away from the edges — Divi grids and some social networks crop tighter.
  4. Export in the right format
    • JPEG for photos
    • PNG for graphics with transparency
    • WebP for best of both worlds (smaller file sizes, great quality)
  5. Control file size
    Aim for under 200KB. Use tools like TinyPNG, ShortPixel, or ImageOptim to compress without losing visible quality.
  6. Create retina-ready versions
    Export at 2× (e.g., 2160px instead of 1080px) so Divi’s responsive system (srcset) can serve crisp images on high-DPI devices.
  7. Batch process if you publish often
    Use Photoshop actions, Affinity presets, or even command-line tools like ImageMagick to automate resizing.

Divi Settings and Module Tweaks to Preserve Featured Images

The biggest problem with the Divi featured image is images stretching, blurring or getting cropped weirdly in different layouts. The good news is Divi gives you loads of control through the Blog Module and other design settings—you just need to know which ones to use and when. Let’s get into it.

Blog Module Settings: Thumbnail Size Options

When you drop a Blog Module into your Divi layout, you’ll find a setting called “Featured Image Size” under Design → Layout → Featured Image. By default, you’ll usually see three choices:

  • Medium – WordPress-generated version (usually 300px wide). Good for very small grid layouts, but not ideal for larger cards.
  • Large – A WordPress-generated size (commonly 1024px wide). Works well for grid layouts with 2–3 columns.
  • Full – The original uploaded image, without resizing. Best for single-column blog feeds or featured posts.

When to use each:

  • If you’re building a multi-column blog grid, use Large to keep images sharp but not oversized.
  • If you want maximum clarity for a single-column or featured post, go with Full—but only if your uploaded image is optimized (ideally 1200px or more in width).
  • Avoid relying on Medium unless your thumbnails are tiny; otherwise, they’ll look blurry on modern devices.

Choosing Between “Full” and “Large” in Divi

This is where many Divi users get confused. Both “Full” and “Large” sound like they’ll deliver high-quality images, but the choice really depends on your workflow:

  • Use Large when performance matters most. WordPress creates a “Large” size (around 1024px wide by default), which is often enough for blog grids or cards. Since the file size is smaller, your pages load faster without noticeably losing quality.
  • Use Full when sharpness is critical. If you’re running a photography blog, design portfolio, or magazine-style layout, “Full” ensures your featured image matches the original clarity. But remember—if your original upload is 4000px wide, serving that “Full” image in a small blog grid is overkill and will slow down your site.

Pro tip: If you want the best of both worlds, register a custom Divi image size (e.g., 800×450 for blog grids) in your child theme. Then you can assign that size specifically for your Blog Module, keeping consistency and performance in check.

How the Blog Grid and Extras Modules Select Thumbnail Sizes

Divi offers two primary ways to display blog posts visually:

  1. Blog Grid Layout (inside the Blog Module).
  2. Third-party modules like Blog Extras (popular in Divi marketplaces).

Here’s how they handle featured images differently:

  • Blog Grid Layout: By default, the grid pulls from WordPress’s registered image sizes. If you select “Large,” Divi uses the cropped 1024px version. If you select “Full,” it loads the original upload. The challenge is, WordPress doesn’t crop all images to the same aspect ratio—so some thumbnails may look mismatched.
  • Blog Extras Module: These often add advanced layout options (masonry grids, magazine layouts, etc.) and may default to using Medium or Large sizes. Some even have built-in settings to crop or force a ratio (like 16:9 or square).

When to change:

  • If your grid looks uneven, switch to a plugin/module that supports fixed aspect ratios.
  • If you want total control, manually crop and upload consistent sizes (e.g., always 1200×675px). Divi will then scale them properly no matter which module you use.

Practical Workflow to Preserve Image Quality

Here’s a step-by-step approach that solves 90% of Divi featured image headaches:

  1. Upload consistent images. Aim for 2× resolution (e.g., 1200×675px for grids, 1920×1080px for hero layouts).
  2. In Blog Module → Featured Image Size, pick Large for grids and Full for single posts.
  3. If inconsistent crops appear, add a custom image size in functions.php and reassign it to the module.
  4. Test across devices. Always preview your blog module on desktop, tablet, and mobile to confirm no blurriness or awkward cropping.
  5. Optimize file sizes. Use plugins like ShortPixel or Imagify to keep load times fast without sacrificing clarity.

By using these Divi settings and blog module options you can control the WordPress featured image across your whole site. The key is consistency: choose one workflow, stick to the same aspect ratio and let Divi do the rest.

Two Bulletproof Fixes for Cropping & Aspect Issues

Even with the right upload size, Divi sometimes insists on cropping your featured images. Here are two reliable fixes you can apply — one quick CSS tweak, and one safer developer approach.

1. CSS Fix (Quick and Easy)

If Divi’s Blog Module is cropping your images to a fixed aspect ratio, you can override it with custom CSS.

Go to Divi → Theme Options → Custom CSS and paste this:

.et_pb_image_container img {

    object-fit: cover;

    height: auto;

    width: 100%;

}

This tells Divi to display the full image proportionally rather than force-cropping it. The object-fit property is the hero here — it makes sure your images fill their container without distortion.

Best for: Non-technical users who want a quick fix without touching theme files.

2. functions.php Fix (Developer-Friendly)

If you want total control, register custom image sizes that align with Divi’s column widths. Add this code to your child theme’s functions.php file:

function custom_divi_image_sizes() {

    add_image_size(‘divi_full’, 1080, 0, false); // full width

    add_image_size(‘divi_two_third’, 700, 0, false);

    add_image_size(‘divi_half’, 510, 0, false);

    add_image_size(‘divi_one_third’, 320, 0, false);

}

add_action(‘after_setup_theme’, ‘custom_divi_image_sizes’);

Then, install and run the Regenerate Thumbnails plugin so WordPress creates these sizes for all your existing images.

Best for: Developers or site owners who want consistent sizing across all posts and layouts.

How to Register Divi-Friendly Image Sizes in Theme

To take the functions.php method further, you can explicitly tell Divi to use these new sizes. Here’s how:

  1. Register sizes as shown above.
  2. Use the wp_get_attachment_image_src() function in your templates to call these sizes directly.
  3. If you’re working with custom modules, you can hook into Divi’s filters (like et_pb_blog_image_width) to specify which size should load.

By doing this, you’re making sure Divi doesn’t guess which WordPress size to use — you’re telling it exactly what you want. This approach keeps everything consistent and avoids the blurry-or-cropped lottery.

Image Optimization & Performance

A stunning featured image means nothing if it slows down your site. Google cares about speed, and users bounce from slow-loading blogs. Here’s how to optimize without losing quality:

  • Use WebP or AVIF formats whenever possible. They’re much smaller than JPEG/PNG but still sharp.
  • Compress smartly — tools like ShortPixel, Imagify, or TinyPNG can shrink images by 60–80% with minimal loss.
  • Lazy load below-the-fold images. WordPress 5.5+ does this by default, but always test it.
  • Keep image weight low. Aim for under 200KB for featured images, especially if they appear multiple times (grid, related posts, etc.).
  • Serve via CDN. A content delivery network like Cloudflare or BunnyCDN ensures images load fast worldwide.

Remember: a large 2MB featured image can be the difference between a 90+ Google PageSpeed score and a failing one.

Social Sharing, Open Graph, and Structured Data

Here’s a trap many Divi users fall into: an image looks perfect on the site but shows up cropped or pixelated when shared on Facebook or LinkedIn. That’s because social platforms pull from Open Graph (OG) tags, not from what Divi displays.

Best practice:

  • Upload a separate 1200×628px image specifically for social sharing.
  • In Yoast SEO or RankMath, set your OG image under “Social” → “Facebook Image.”
  • For Twitter, enable “Twitter Card” and provide a 1200×628 image as well.

By separating social images from Divi images, you guarantee both look their best — no matter the platform.

Tools and Plugins Roundup

Here are the most useful plugins and tools to streamline your workflow:

  • Regenerate Thumbnails — refresh image sizes after changes.
  • ShortPixel / Imagify / Smush — compress and optimize images.
  • WebP Express — serve modern formats automatically.
  • Canva / Photoshop / Affinity Photo — quick export in correct ratios.
  • Divi Blog Extras — adds more blog display options (but watch how it handles image sizes).

Divi Featured Image Size Guide

Here’s the condensed version you can pin to your desk:

  • Full width → 1080–1920px (use 2160px for retina)
  • 2/3 column → 700px (1400px retina)
  • 1/2 column → 510px (1020px retina)
  • 1/3 column → 320px (640px retina)
  • Grid/list thumbnail → 400×250px (800×500px retina)
  • Social sharing → 1200×628px (2400px retina)

Conclusion

For the WordPress featured image blog post Divi size the rule of thumb is to balance quality with performance. After testing across layouts and devices the best workflow is to upload images at 2x the recommended size—for example 1200×675 for landscape blog thumbnails or 2160×1350 for full-width Divi modules. This way you get sharp images on retina screens and small file sizes.

Add Divi’s custom image size registration in your functions.php (or a child theme) so WordPress always delivers perfectly cropped images without manual resizing. Saves time, no blurry images and a consistent design.

To make it even easier, grab our Divi Featured Image Size guide and try the sample code snippet above—you’ll never second guess your image sizes again.

Start the conversation.

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    Recommended articles

    WordPress

    WordPress Featured Image Blog Post Divi Size: Ultimate Guide

    James

    Icon

    9 Min Read

    WordPress

    Why WordPress Page Comes White After Migration – Rocon Guide

    William

    Icon

    6 Min Read

    WordPress

    How to Use GCP Load Balancer in WordPress — Rocon Guide

    Maria

    Icon

    8 Min Read