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

charliepatel

DraftPress Team

99robots

Custom Image Sizes by 99 Robots is a quick and simple way for you to add your own image sizes to your WordPress site.
You can view this plugin on GitHub at: <a href="https://github.com/99robots/99robots-custom-image-sizes" rel="nofollow ugc">https://github.com/99robots/99robots-custom-image-sizes</a>
Also, please <a href="https://draftpress.com/products/?utm_source=wprepo&utm_medium=custom-image-sizes&utm_campaign=desc" rel="nofollow ugc">check out our other plugins</a> 🙂

Custom Image Sizes by 99 Robots


This seems like this is the best custom image size plugin freely available today.



The plugin does what one expects/needs it to do without any added complexity. The interface is then neither too basic/unstyled (like some other popular custom image size plugins) nor does it go over the top & make things more complex than it needs to be.



It's also nice to see this plugin is on GitHub where the most recent patch was actually community-provided & officially adopted in the new release (rather than being somewhat stagnant and/or over-relying on the plugin developer to come up with improvements/fixes/etc.) It's also good to see some activity regarding support and updates (again, unlike some other popular plugins for this.)


Worked exactly as expected with a nice interface

Custom Image Sizes by 99 Robots is a quick and simple way for you to add your own image sizes to your WordPress site.

Responsive Image Sizes Divi vs Custom Image Sizes by 99 Robots