wptools

Make your website load faster in Divi Theme using image srcsets.
<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>
<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>
</blockquote>
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.
<blockquote>
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.
</blockquote>
<h3>The Solution – Divi responsive image size plugin</h3>
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.
<ul>
<li>Responsive Image divi module – It’s available in regular divi section.</li>
<li>Fullwidth Responsive Image divi module – It’s available in fullwidth divi section.</li>
</ul>
<blockquote>
Both the modules help creates a image tag with responsive image sizes.
</blockquote>
A responsive image adds the srcset and sizes attributes to the image markup.
<h3>What does srcset and sizes do?</h3>
Consider the example of an <img> tag
<blockquote>
<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">
</blockquote>
Let’s go over each attribute.
<blockquote>
alt=”Divi responsive image sizes”`
</blockquote>
The <code>alt</code> attribute describes the alternative text for the image. Browser loads this text when it can’t find the image.
<blockquote>
src=”default.jpg”
</blockquote>
The <code>src</code> attribute defines a fallback image path for browsers that don’t support srcset and sizesattributes
<blockquote>
srcset=”small.jpg 240w, medium.jpg 300w, large.jpg 720w”
</blockquote>
The <code>srcset</code> attribute lists images at different sizes. Along with each image path we specify it’s width in pixels.
<blockquote>
sizes=”(max-width: 360px) 300px, 100vw”
</blockquote>
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,
<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>
Divi supports following css media breakpoints.
<ul>
<li>Large screens (1405px upwards)</li>
<li>Laptops and desktops (between 1100px and 1405px)</li>
<li>Tablets in landscape mode (between 981px and 1100px)</li>
<li>Tablets in portrait mode (between 768px and 980px)</li>
<li>Smart phones in landscape mode (between 480px and 768px)</li>
<li>Smart phones in portrait mode (between 0 and 479px)</li>
</ul>
For every breakpoint, the responsive divi modules has a corresponding field to set the image width.
<h3>Improve image SEO score</h3>
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>
<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>
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.
<h3>Divi Responsive Image Sizes Module Settings – 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 & 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>
We offer other divi premium plugins. Each of them have a 7-day FREE trial, no upfront payment details required.
<ul>
<li><a href="https://wptools.app/wordpress-plugin/gravity-forms-divi-module/?utm_source=wp&utm_medium=plugin-page&utm_campaign=responsive-images&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&utm_medium=plugin-page&utm_campaign=responsive-images&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&utm_medium=plugin-page&utm_campaign=responsive-images&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&utm_medium=plugin-page&utm_campaign=responsive-images&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&utm_medium=plugin-page&utm_campaign=responsive-images&utm_content=ups" rel="nofollow ugc">Contact Form 7 Grid & Styler For Divi</a></li>
<li><a href="https://wptools.app/wordpress-plugin/divi-blog-carousel/?utm_source=wp&utm_medium=plugin-page&utm_campaign=responsive-images&utm_content=ups" rel="nofollow ugc">Blog Carousel For Divi</a></li>
</ul>

Responsive Image Sizes Divi

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

mansoormunib

Image Sizes in Admin Dashboard adds a read-only widget to the WordPress admin Dashboard that lists all currently registered image sizes.
Any size you register in your theme or plugin with <code>add_image_size()</code> is picked up automatically, alongside the built-in <code>thumbnail</code>, <code>medium</code>, <code>medium_large</code> and <code>large</code> sizes. Each row shows:
<ul>
<li>The image size name (human readable)</li>
<li>Width in pixels (— when unconstrained)</li>
<li>Height in pixels (— when unconstrained)</li>
<li>Crop mode (Cropped or Proportional)</li>
</ul>
This is handy when building a theme and you need a quick reference of the exact dimensions available to <code>the_post_thumbnail()</code> and the media library.
More detail on registering custom image sizes: https://developer.wordpress.org/reference/functions/add_image_size/

Image Sizes in Admin Dashboard

....

Lists every registered image size — built-in and custom add_image_size() sizes — with width, height and crop mode in a Dashboard widget.

Responsive Image Sizes Divi vs Image Sizes in Admin Dashboard