Divi Responsive Image Sizes Plugin Logo

Divi Responsive Image Sizes Plugin

Improve your page speed. Serve images sizes based on user device.

  • Decrease website load time by using responsive divi image sizes. Lower bounce rates
  • Improve google pagespeed and pagerank scores
  • Use google recommended <figure> and <figcaption> tags
  • Populate image's alt attribute using data stored in attachment. Improve your SEO score
  • Full divi frontend builder support

The Problem – Images on divi webpage serving single image size irrespective of devices sizes

  • Is your divi webpage slow?
  • Do the <img> tags serve a single size irrespective of the device size?

A slower website causes decrease in sales due to increase in bounce rate.

A responsive image offers different sizes of the same image. The browser decides the best image size to render.

Divi includes a fullsize and regular image module. They don’t serve a responsive image. It’s a one-size-fits-all.

The non-responsive image have a single image size. The same image loads on large desktop, tablet and mobiles.

Let’s say you use the native divi image module with image of size 2000px. Serving the 2000px wide image on a device with width 400px serves no purpose other than to slow down the webpage.

The Solution – Divi responsive image size plugin

The Divi Responsive Image Size plugin has two modules.

  • Responsive Image divi module – It’s available in regular divi section
  • Fullwidth Responsive Image divi module – It’s available in fullwidth divi section.

Both the modules help creates a image tag with responsive image sizes.

A responsive image adds the srcset and sizes attributes to the image markup.

What does srcset and sizes do?

Consider the example of an <img> tag

<img alt=”Divi responsive image sizes” src=”default.jpg” srcset=”small.jpg 240w, medium.jpg 300w, large.jpg 720w” sizes=”(max-width: 360px) 300px, 100vw”>

Let’s go over each attribute.

alt=”Divi responsive image sizes”

The alt attribute describes the alternative text for the image. Browser loads this text when it can’t find the image.


The src attribute defines a fallback image path for browsers that don’t support srcset and sizesattributes

srcset=”small.jpg 240w, medium.jpg 300w, large.jpg 720w”

The srcset attribute lists images at different sizes. Along with each image path we specify it’s width in pixels.

sizes=”(max-width: 360px) 300px, 100vw”

The sizes attribute instructs the browser on how to pick the right image from the srcset based on the viewport (device) size.

Going by the above example,

  • For viewport size 360px and below, browser displays medium.jpg (300px) image.
  • For viewport size above 360px, browser displays large.jpg image that is 720px wide.

Divi image sizes

Divi supports following css media breakpoints.

  • Large screens (1405px upwards)
  • Laptops and desktops (between 1100px and 1405px)
  • Tablets in landscape mode (between 981px and 1100px)
  • Tablets in portrait mode (between 768px and 980px)
  • Smart phones in landscape mode (between 480px and 768px)
  • Smart phones in portrait mode (between 0 and 479px)

For every breakpoint, the responsive divi modules has a corresponding field to set the image width.

Divi Responsive Image Sizes Module Settings
Figure: Divi Responsive Image Sizes Module Settings
  1. Image section – Upload/select an image, set alt and figcaption tags. If alt and caption values are empty, it uses corresponding values from WordPress media attachment.
  2. Responsive Image Width section – Define the image sizes at different media breakpoints.
  3. Caption Text section – Add custom style to the caption text.
  4. Sizing section – Change the max and standard width for the <figure> element.
  5. Spacing section – Set the padding and margin values for the figure
  6. Border section – Set border styles for the <img> tag.
  7. Box shadow section – Set box shadow styles for the <img> tag.
  8. Filters section – Set filters for the figure element.
  9. Transform section – Set transforms for the figure element
  10. CSS ID & Classes section – Set css id and classes for figure element
  11. Custom CSS section – Add custom css for <figure>, <img> and <figcaption> tags
  12. Visibility section – Set visibility for the <figure> tag on desktop, tablet and mobile.

Improve image SEO score

Image SEO is important. The responsive divi modules follows google recommendations for image SEO

  • The responsive divi modules wraps the image in a <figure> tag.
  • It can display a caption for the image using the <figcaption> tag.
  • The alt attribute text is got from the WordPress media attachment or custom text.

Full divi frontend builder support

The Responsive Image and Fullwidth Responsive Image divi modules provide full divi frontend builder support. Add custom styles to the image and caption text via the modules Design tab.


  • image/svg+xml image/svg+xml
    Does this plugin work with external image URLs?

    It works with external images. However it would show a non-responsive image as it cannot compute the srcset attribute.

  • image/svg+xml image/svg+xml
    Does the "Gravity Forms For Divi" plugin support theme "Extra" by Elegant themes?

    Yes, the Gravity Forms For Divi plugin supports theme Extra by Elegant themes.

  • image/svg+xml image/svg+xml
    Does the FAQ Manager plugin supports Divi theme?

    Yes, we support divi theme. We have included a Faq List divi module. For details visit https://wptools.app/how-to/how-to-use-divi-faq-module-on-a-theme-page/

  • image/svg+xml image/svg+xml
    How to cancel your recurring subscription?
    • Login to your accounts Renewals & Billing section
    • Active subscriptions will have a green label on the STATUS column and will start with AUTO RENEW ON
    • Click the row of the subscription that you’d like to cancel.
    • In the subscription’s advanced panel, and then click the Cancel Auto-Renew link.
    • A confirmation dialog giving you the option to set up an email reminder instead of canceling right away shows on the browser.
    • You can submit a feedback and let us know why you are canceling the subscription. Your feedback will help us improve our offering.
    • Press the Send & Cancel renewals button to complete the cancellation


  • image/svg+xml image/svg+xml
    What are the dependencies for "Divi Responsive Image Sizes" plugin

    Yes – It depends on Divi theme from elegant themes.

  • image/svg+xml image/svg+xml
    Does the FAQ Manager plugin support gutenberg block editor?

    Yes, we support Gutenberg Block Editor. We have included a FAQ List block within the plugin. For details visit https://wptools.app/how-to/add-faq-section-in-wordpress-with-faq-gutenberg-block/

  • image/svg+xml image/svg+xml
    How to update your payment-method / credit card / PayPal?
    • Login to your accounts Renewals & Billing section.
    • Locate the subscription that you'd like to update its payment method and select it by clicking on its row.
    • This will open the subscription’s advanced panel.
    • Then, click on the Update button next to the payment method, and checkout with your new payment method.
    • The initial payment will be automatically prorated based on the next renewal date.
  • image/svg+xml image/svg+xml
    How to upgrade from a single site license to N-sites license?
    • Login to your accounts Renewals & Billing section.
    • Locate the subscription that you'd like to upgrade its license's sites limit and select it by clicking on its row
    • This will open the subscription’s advanced panel.
    • Then, next to the plan, click on the Upgrade To .. dropdown list and choose the plan and license you'd like to upgrade to
    • The initial payment will be automatically prorated.
  • image/svg+xml image/svg+xml
    Can I use the FAQ Manager plugin on any theme?

    Yes, you can use the FAQ Manager on any theme. We have included a WordPress Shortcodewpt_faqs, that can be used to list FAQs alongside any WordPress theme.

    For details visit – https://wptools.app/how-to/faq-shortcode-documentation/

  • image/svg+xml image/svg+xml
    How to move a license from one website to another?
    • Login to the Websites section.
    • Click on the row of the website that has the license you'd like to deactivate.
    • If there are multi-products running on that site, the next screen will show you all the products.
    • Click on the relevant product to open the details panel.
    • Click the Deactivate button under the LICENSE section.
    • Once deactivated, you’ll be able to reuse the license on any other website.
  • image/svg+xml image/svg+xml
    Does this plugin generate FAQ structured schema data for SEO?

    Yes, this plugin automatically handles FAQ structured schema data. This ensures, search engines like Google & Bing, can read them.

    FAQ structured data are known to increase traffic to your website. It’s totally upto search engines to include your FAQs on the search results.

    To verify the correctness of your FAQ items, kindly read this article https://wptools.app/how-to/verify-faq-schema-data-using-google-structured-data-testing-tool/

  • image/svg+xml image/svg+xml
    How to add a Tax / VAT ID and business details to your invoices?
    • If you didn't enter a Tax / VAT ID during checkout, then it's possible to do it afterwards.
    • It's important to have these details on your invoice.
    • Go to My Profile and update the billing information.
    • Orders History will have invoices with your Tax / VAT ID.
  • image/svg+xml image/svg+xml
    Do you offer a FREE trial for the FAQ Manager plugin?

    Yes, we offer a 7-day FREE trial for the FAQ Manager plugin. We don’t ask for upfront payment details during the trial.

    If you happen to purchase the plugin, we offer a 14-day money back gaurantee. For details on the gaurantee please refer to the moneyback guarantee section just below the pricing table.

  • image/svg+xml image/svg+xml
    How do I get a PDF invoice for my payments?
    • You can access your payments in the Orders History section.
    • To get a PDF invoice of a payment, click the button of the payment’s record.
  • image/svg+xml image/svg+xml
    Does the FAQ Manager plugin supports theme "Extra" by Elegant Themes?

    Yes, the FAQ Manager plugin works with theme “Extra” from Elegant themes.

    It works in the frontend builder, like Divi Theme. Hence the instructions are same that we use for Divi Theme – https://wptools.app/how-to/how-to-use-divi-faq-module-on-a-theme-page/

  • image/svg+xml image/svg+xml
    How to install and activate a plugin?
    1. Download the plugin

      After purchasing a product, you'll receive 2 emails.
      The first will provide you with a link to download the plugin, along with your license key.
      The second email, after successful payment, will provide a receipt and a secure link to download your PDF invoice.
      Note: For lifetime license you’ll receive a single email.
      For Apple's Safari browser, disable its default ZIP auto extraction setting before downloading.
      Safari user's watch this video https://youtu.be/CbKgEv47WVA

    2. Upload the paid product to WordPress

      Now that you've downloaded the premium zip file, you are ready to upload it to your WordPress website.
      How to upload and activate a plugin/add-on? Watch this video

    3. Activate the product with your License Key

      Product purchased from within the WP Admin dashboard have the license key activated on upgrade.
      Otherwise, on activation, a license activation screen shows up.
      Enter the key provided in your email and click Agree & Activate License.
      Your product is now activated and you'll can begin to set it up.

  • image/svg+xml image/svg+xml
    How do I update my plugin?
    • Plugin updates become available automatically through your WordPress admin dashboard.
    • When one is available, click Update. As long as you have an active license, it will update to the latest version.


== 1.1.0 ==

03/07/2019 - Updated for wordpress.org release

== 1.0.0 ==

21/06/2019 - Initial version

Version: 1.1.0
Last Updated: 03/07/2019
WordPress Version: 4.9.8 and above
Tested On: WordPress 5.2.2