Make your website load faster in Divi Theme using image srcsets.<\/p>\n\n
\nA slower website causes decrease in sales due to increase in bounce rate.<\/a><\/p>\n<\/blockquote>\n\n
A responsive image offers different sizes of the same image<\/strong>. The browser decides the best image size to render.<\/p>\n\n
Divi includes a fullsize and regular image module. They don't serve a responsive image. It's a one-size-fits-all.<\/strong><\/p>\n\n
The non-responsive image have a single image size. The same image loads on large desktop, tablet and mobiles.<\/p>\n\n
\nLet'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.<\/p>\n<\/blockquote>\n\n
The Solution \u2013 Divi responsive image size plugin<\/h3>\n\n
The Divi Responsive Image Size<\/a> plugin has two modules.<\/p>\n\n
\n
- Responsive Image divi module<\/strong> \u2013 It's available in regular divi section.<\/li>\n
- Fullwidth Responsive Image divi module<\/strong> \u2013 It's available in fullwidth divi section.<\/li>\n<\/ul>\n\n
\nBoth the modules help creates a image tag with responsive image sizes.<\/p>\n<\/blockquote>\n\n
A responsive image adds the srcset and sizes attributes to the image markup.<\/p>\n\n
What does srcset and sizes do?<\/h3>\n\n
Consider the example of an <img> tag<\/p>\n\n
\n<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"><\/p>\n<\/blockquote>\n\n
Let's go over each attribute.<\/p>\n\n
\nalt=\"Divi responsive image sizes\"`<\/p>\n<\/blockquote>\n\n
The
alt<\/code> attribute describes the alternative text for the image. Browser loads this text when it can't find the image.<\/p>\n\n\nsrc=\"default.jpg\"<\/p>\n<\/blockquote>\n\n
The
src<\/code> attribute defines a fallback image path for browsers that don't support srcset and sizesattributes<\/p>\n\n\nsrcset=\"small.jpg 240w, medium.jpg 300w, large.jpg 720w\"<\/p>\n<\/blockquote>\n\n
The
srcset<\/code> attribute lists images at different sizes. Along with each image path we specify it's width in pixels.<\/p>\n\n\nsizes=\"(max-width: 360px) 300px, 100vw\"<\/p>\n<\/blockquote>\n\n
The sizes attribute instructs the browser on how to pick the right image from the srcset based on the viewport (device) size.<\/p>\n\n
Going by the above example,<\/p>\n\n
\n
- For viewport size 360px and below, browser displays medium.jpg (300px) image.<\/li>\n
- For viewport size above 360px, browser displays large.jpg image that is 720px wide.<\/li>\n<\/ul>\n\n
Divi image sizes<\/h3>\n\n
Divi supports following css media breakpoints.<\/p>\n\n
\n
- Large screens<\/strong> (1405px upwards)<\/li>\n
- Laptops and desktops<\/strong> (between 1100px and 1405px)<\/li>\n
- Tablets in landscape mode<\/strong> (between 981px and 1100px)<\/li>\n
- Tablets in portrait mode<\/strong> (between 768px and 980px)<\/li>\n
- Smart phones in landscape mode<\/strong> (between 480px and 768px)<\/li>\n
- Smart phones in portrait mode<\/strong> (between 0 and 479px)<\/li>\n<\/ul>\n\n
For every breakpoint, the responsive divi modules has a corresponding field to set the image width.<\/p>\n\n
Improve image SEO score<\/h3>\n\n
Image SEO is important. The responsive divi modules follows google recommendations for image SEO<\/a><\/p>\n\n
\n
- The responsive divi modules wraps the image in a
figure<\/code> tag.<\/li>\n- It can display a caption for the image using the
figcaption<\/code> tag.<\/li>\n- The alt attribute text is got from the WordPress media attachment or custom text.<\/li>\n<\/ul>\n\n
Full divi frontend builder support<\/h3>\n\n
The Responsive Image<\/strong> and Fullwidth Responsive Image<\/strong> divi modules provide full divi frontend builder support. Add custom styles to the image and caption text via the modules Design tab.<\/p>\n\n
Divi Responsive Image Sizes Module Settings - See screenshot 1.<\/h3>\n\n
\n
- Image section \u2013 Upload\/select an image, set alt and figcaption tags. If alt and caption values are empty, it uses corresponding values from WordPress media attachment.<\/li>\n
- Responsive Image Width section \u2013 Define the image sizes at different media breakpoints.<\/li>\n
- Caption Text section \u2013 Add custom style to the caption text.<\/li>\n
- Sizing section \u2013 Change the max and standard width for the
figure<\/code> element.<\/li>\n- Spacing section \u2013 Set the padding and margin values for the figure<\/li>\n
- Border section \u2013 Set border styles for the
img<\/code> tag.<\/li>\n- Box shadow section \u2013 Set box shadow styles for the
img<\/code> tag.<\/li>\n- Filters section \u2013 Set filters for the figure element.<\/li>\n
- Transform section \u2013 Set transforms for the figure element<\/li>\n
- CSS ID & Classes section \u2013 Set css id and classes for figure element<\/li>\n
- Custom CSS section \u2013 Add custom css for
figure<\/code>,img<\/code> andfigcaption<\/code> tags<\/li>\n- Visibility section \u2013 Set visibility for the
figure<\/code> tag on desktop, tablet and mobile.<\/li>\n<\/ul>\n\nDivi Premium Plugin<\/h3>\n\n
We offer other divi premium plugins. Each of them have a 7-day FREE trial, no upfront payment details required.<\/p>\n\n
\n
- Gravity Forms Divi Module<\/a><\/li>\n
- FAQ Plugin For Divi<\/a><\/li>\n
- Image Carousel For Divi<\/a><\/li>\n
- Product Carousel For Divi<\/a><\/li>\n
- Contact Form 7 Grid & Styler For Divi<\/a><\/li>\n
- Blog Carousel For Divi<\/a><\/li>\n<\/ul>\n\n\n
\n
Does this plugin have any dependencies?<\/h3><\/dt>\n
Divi Theme from Elegant Themes is a pre-requisite to this plugin.<\/p><\/dd>\n
Does this work with Extra theme from Elegant themes<\/h3><\/dt>\n
We haven't tested it on Extra theme. If you happen to get it working, let us know :-)<\/p><\/dd>\n\n<\/dl>\n\n\n
2.0.0<\/h4>\n\n
\n
- WP 6.1.1 compatible.<\/li>\n<\/ul>\n\n
1.2.0<\/h4>\n\n
\n
- Fixed bug where scaled<\/strong> image url is being used.<\/li>\n
- Tested with WordPress 5.4<\/li>\n<\/ul>\n\n
1.1.0<\/h4>\n\n
\n
- Updated for release on wordpress.org<\/li>\n<\/ul>\n\n
1.0.0<\/h4>\n\n
\n
- Initial version<\/li>\n
Responsive Image<\/code> divi module added for standard divi section.<\/li>\nFullwidth Responsive Image<\/code> divi module added for fullwidth divi section.<\/li>\n<\/ul>","raw_excerpt":"Divi image module with srcset attribute support. Make your website load faster","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/ewe.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/106008","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ewe.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/ewe.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/ewe.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=106008"}],"author":[{"embeddable":true,"href":"https:\/\/ewe.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/wpt00ls"}],"wp:attachment":[{"href":"https:\/\/ewe.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=106008"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/ewe.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=106008"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/ewe.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=106008"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/ewe.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=106008"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/ewe.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=106008"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/ewe.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=106008"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}