Responsive Image Sizes Divi

Responsive Image Sizes Divi

Wordpress plugin

Install on Wordpress

App Details

Make your website load faster in Divi Theme using image srcsets.

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

  • Is your divi webpage slow?
  • Do the 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.

src=”default.jpg”

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.

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.

Divi Responsive Image Sizes Module Settings – See screenshot 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.
  • Responsive Image Width section – Define the image sizes at different media breakpoints.
  • Caption Text section – Add custom style to the caption text.
  • Sizing section – Change the max and standard width for the figure element.
  • Spacing section – Set the padding and margin values for the figure
  • Border section – Set border styles for the img tag.
  • Box shadow section – Set box shadow styles for the img tag.
  • Filters section – Set filters for the figure element.
  • Transform section – Set transforms for the figure element
  • CSS ID & Classes section – Set css id and classes for figure element
  • Custom CSS section – Add custom css for figure, img and figcaption tags
  • Visibility section – Set visibility for the figure tag on desktop, tablet and mobile.

Divi Premium Plugin

We offer other divi premium plugins. Each of them have a 7-day FREE trial, no upfront payment details required.

Pricing

Starting from $0 per month.

Check Out the Comments Widget

By Common Ninja

CommentsTry For Free!

App Info

Rating

Reviewers

1 reviews

Tags

divi
image sizes
responsive images

Developed By

wptools

Quick & Easy

Find the Best Wordpress plugins for you

Common Ninja has a large selection of powerful Wordpress plugins that are easy to use, fully customizable, mobile-friendly and rich with features — so be sure to check them out!

Testimonial

Testimonial plugins for Wordpress

Contact Form

Contact Form plugins for Wordpress

Maps

Maps plugins for Wordpress

Translation

Translation plugins for Wordpress

Chat

Chat plugins for Wordpress

Slider

Slider plugins for Wordpress

Reviews

Reviews plugins for Wordpress

Contact

Contact plugins for Wordpress

Galleries

Galleries plugins for Wordpress

SEO

SEO plugins for Wordpress

Forms

Forms plugins for Wordpress

Comments

Comments plugins for Wordpress

Backup

Backup plugins for Wordpress

Privacy

Privacy plugins for Wordpress

Optimize

Optimize plugins for Wordpress

Tabs

Tabs plugins for Wordpress

Social Sharing

Social Sharing plugins for Wordpress

Events Calendar

Events Calendar plugins for Wordpress

Comments

Comments plugins for Wordpress

Social Feeds

Social Feeds plugins for Wordpress

Social Sharing

Social Sharing plugins for Wordpress

Portfolio

Portfolio plugins for Wordpress

Video Player

Video Player plugins for Wordpress

popup

popup plugins for Wordpress

SiteMap

SiteMap plugins for Wordpress

Payment

Payment plugins for Wordpress

Coming Soon

Coming Soon plugins for Wordpress

Inventory

Inventory plugins for Wordpress

Testimonials

Testimonials plugins for Wordpress

Portfolio

Portfolio plugins for Wordpress

Membership

Membership plugins for Wordpress

Forms

Forms plugins for Wordpress

Analytics

Analytics plugins for Wordpress

Events Calendar

Events Calendar plugins for Wordpress

Sliders

Sliders plugins for Wordpress

Analytics

Analytics plugins for Wordpress

Reviews

Reviews plugins for Wordpress

Security

Security plugins for Wordpress

Ads

Ads plugins for Wordpress

Music Player

Music Player plugins for Wordpress

Countdown

Countdown plugins for Wordpress

Email Marketing

Email Marketing plugins for Wordpress

Membership

Membership plugins for Wordpress

Ecommerce

Ecommerce plugins for Wordpress

Customer Support

Customer Support plugins for Wordpress

Video Player

Video Player plugins for Wordpress

Tabs

Tabs plugins for Wordpress

Social Feeds

Social Feeds plugins for Wordpress

More plugins

plugins You Might Like

Discover Apps By Platform

Discover the best apps for your website

WordPress
Wix
Shopify
Weebly
Webflow
Joomla
PrestaShop
Shift4Shop
WebsiteX5
MODX
Opencart
NopCommerce

Common Ninja Search Engine

The Common Ninja Search Engine platform helps website builders find the best site widgets, apps, plugins, tools, add-ons, and extensions! Compatible with all major website building platforms - big or small - and updated regularly, our Search Engine tool provides you with the business tools your site needs!

Multiple platforms