Divi image module with srcset attribute support. Make your website load faster

Responsive Image Sizes Divi

<p>Make your website load faster in Divi Theme using image srcsets.</p>
<h3>The Problem – Images on divi webpage serving single image size irrespective of devices sizes</h3>
<ul>
<li>Is your divi webpage slow?</li>
<li>Do the  tags serve a single size irrespective of the device size?</li>
</ul>
<blockquote>
<p><a href="https://neilpatel.com/blog/speed-is-a-killer/" rel="nofollow ugc">A slower website causes decrease in sales due to increase in bounce rate.</a></p>
</blockquote>
<p><strong>A responsive image offers different sizes of the same image</strong>. The browser decides the best image size to render.</p>
<p><strong>Divi includes a fullsize and regular image module. They don&#8217;t serve a responsive image. It&#8217;s a one-size-fits-all.</strong></p>
<p>The non-responsive image have a single image size. The same image loads on large desktop, tablet and mobiles.</p>
<blockquote>
<p>Let&#8217;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>
</blockquote>
<h3>The Solution – Divi responsive image size plugin</h3>
<p>The <a href="https://wptools.app/wordpress-plugin/divi-responsive-image-sizes-plugin/" rel="nofollow ugc">Divi Responsive Image Size</a> plugin has two modules.</p>
<ul>
<li><strong>Responsive Image divi module</strong> – It&#8217;s available in regular divi section.</li>
<li><strong>Fullwidth Responsive Image divi module</strong> – It&#8217;s available in fullwidth divi section.</li>
</ul>
<blockquote>
<p>Both the modules help creates a image tag with responsive image sizes.</p>
</blockquote>
<p>A responsive image adds the srcset and sizes attributes to the image markup.</p>
<h3>What does srcset and sizes do?</h3>
<p>Consider the example of an &lt;img&gt; tag</p>
<blockquote>
<p>&lt;img alt=&quot;Divi responsive image sizes&quot; src=&quot;default.jpg&quot; srcset=&quot;small.jpg 240w, medium.jpg 300w, large.jpg 720w&quot; sizes=&quot;(max-width: 360px) 300px, 100vw&quot;&gt;</p>
</blockquote>
<p>Let&#8217;s go over each attribute.</p>
<blockquote>
<p>alt=&#8221;Divi responsive image sizes&#8221;`</p>
</blockquote>
<p>The <code>alt</code> attribute describes the alternative text for the image. Browser loads this text when it can&#8217;t find the image.</p>
<blockquote>
<p>src=&#8221;default.jpg&#8221;</p>
</blockquote>
<p>The <code>src</code> attribute defines a fallback image path for browsers that don&#8217;t support srcset and sizesattributes</p>
<blockquote>
<p>srcset=&#8221;small.jpg 240w, medium.jpg 300w, large.jpg 720w&#8221;</p>
</blockquote>
<p>The <code>srcset</code> attribute lists images at different sizes. Along with each image path we specify it&#8217;s width in pixels.</p>
<blockquote>
<p>sizes=&#8221;(max-width: 360px) 300px, 100vw&#8221;</p>
</blockquote>
<p>The sizes attribute instructs the browser on how to pick the right image from the srcset based on the viewport (device) size.</p>
<p>Going by the above example,</p>
<ul>
<li>For viewport size 360px and below, browser displays medium.jpg (300px) image.</li>
<li>For viewport size above 360px, browser displays large.jpg image that is 720px wide.</li>
</ul>
<h3>Divi image sizes</h3>
<p>Divi supports following css media breakpoints.</p>
<ul>
<li><strong>Large screens</strong> (1405px upwards)</li>
<li><strong>Laptops and desktops</strong> (between 1100px and 1405px)</li>
<li><strong>Tablets in landscape mode</strong> (between 981px and 1100px)</li>
<li><strong>Tablets in portrait mode</strong> (between 768px and 980px)</li>
<li><strong>Smart phones in landscape mode</strong> (between 480px and 768px)</li>
<li><strong>Smart phones in portrait mode</strong> (between 0 and 479px)</li>
</ul>
<p>For every breakpoint, the responsive divi modules has a corresponding field to set the image width.</p>
<h3>Improve image SEO score</h3>
<p>Image SEO is important. The responsive divi modules follows <a href="https://developers.google.com/style/images" rel="nofollow ugc">google recommendations for image SEO</a></p>
<ul>
<li>The responsive divi modules wraps the image in a <code>figure</code> tag.</li>
<li>It can display a caption for the image using the <code>figcaption</code> tag.</li>
<li>The alt attribute text is got from the WordPress media attachment or custom text.</li>
</ul>
<h3>Full divi frontend builder support</h3>
<p>The <strong>Responsive Image</strong> and <strong>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>
<h3>Divi Responsive Image Sizes Module Settings &#8211; See screenshot 1.</h3>
<ul>
<li>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.</li>
<li>Responsive Image Width section – Define the image sizes at different media breakpoints.</li>
<li>Caption Text section – Add custom style to the caption text.</li>
<li>Sizing section – Change the max and standard width for the <code>figure</code> element.</li>
<li>Spacing section – Set the padding and margin values for the figure</li>
<li>Border section – Set border styles for the <code>img</code> tag.</li>
<li>Box shadow section – Set box shadow styles for the <code>img</code> tag.</li>
<li>Filters section – Set filters for the figure element.</li>
<li>Transform section – Set transforms for the figure element</li>
<li>CSS ID &amp; Classes section – Set css id and classes for figure element</li>
<li>Custom CSS section – Add custom css for <code>figure</code>, <code>img</code> and <code>figcaption</code> tags</li>
<li>Visibility section – Set visibility for the <code>figure</code> tag on desktop, tablet and mobile.</li>
</ul>
<h3>Divi Premium Plugin</h3>
<p>We offer other divi premium plugins. Each of them have a 7-day FREE trial, no upfront payment details required.</p>
<ul>
<li><a href="https://wptools.app/wordpress-plugin/gravity-forms-divi-module/?utm_source=wp&amp;utm_medium=plugin-page&amp;utm_campaign=responsive-images&amp;utm_content=ups" rel="nofollow ugc">Gravity Forms Divi Module</a></li>
<li><a href="https://wptools.app/wordpress-plugin/faq-manager-with-structured-data/?utm_source=wp&amp;utm_medium=plugin-page&amp;utm_campaign=responsive-images&amp;utm_content=ups" rel="nofollow ugc">FAQ Plugin For Divi</a></li>
<li><a href="https://wptools.app/wordpress-plugin/image-carousel-for-divi/?utm_source=wp&amp;utm_medium=plugin-page&amp;utm_campaign=responsive-images&amp;utm_content=ups" rel="nofollow ugc">Image Carousel For Divi</a></li>
<li><a href="https://wptools.app/wordpress-plugin/product-carousel-for-divi/?utm_source=wp&amp;utm_medium=plugin-page&amp;utm_campaign=responsive-images&amp;utm_content=ups" rel="nofollow ugc">Product Carousel For Divi</a></li>
<li><a href="https://wptools.app/wordpress-plugin/grid-styler-for-contact-form-7-and-divi/?utm_source=wp&amp;utm_medium=plugin-page&amp;utm_campaign=responsive-images&amp;utm_content=ups" rel="nofollow ugc">Contact Form 7 Grid &amp; Styler For Divi</a></li>
<li><a href="https://wptools.app/wordpress-plugin/divi-blog-carousel/?utm_source=wp&amp;utm_medium=plugin-page&amp;utm_campaign=responsive-images&amp;utm_content=ups" rel="nofollow ugc">Blog Carousel For Divi</a></li>
</ul>


Alternative Plugins for

Discover the Lists with Responsive Image Sizes Divi

New install

CommunIT Divi Pack