wptools

<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’t serve a responsive image. It’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’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’s available in regular divi section.</li>
<li><strong>Fullwidth Responsive Image divi module</strong> – It’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 <img> tag</p>
<blockquote>
<p><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>
</blockquote>
<p>Let’s go over each attribute.</p>
<blockquote>
<p>alt=”Divi responsive image sizes”`</p>
</blockquote>
<p>The <code>alt</code> attribute describes the alternative text for the image. Browser loads this text when it can’t find the image.</p>
<blockquote>
<p>src=”default.jpg”</p>
</blockquote>
<p>The <code>src</code> attribute defines a fallback image path for browsers that don’t support srcset and sizesattributes</p>
<blockquote>
<p>srcset=”small.jpg 240w, medium.jpg 300w, large.jpg 720w”</p>
</blockquote>
<p>The <code>srcset</code> attribute lists images at different sizes. Along with each image path we specify it’s width in pixels.</p>
<blockquote>
<p>sizes=”(max-width: 360px) 300px, 100vw”</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 – 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>
<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&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

YoOhw Studio

<p>Thumbnail Manager helps you control WordPress thumbnail generation, regenerate image sizes, and clean unused thumbnail files from the Media Library.</p>
<p>Use it after changing themes, installing WooCommerce, disabling custom image sizes, or cleaning up years of generated media files. The plugin focuses on predictable thumbnail management: choose which image sizes should stay enabled, rebuild the thumbnails you need, preview cleanup results, then delete only reviewed generated files.</p>
<p>Cleanup is metadata-aware and safety-focused. Thumbnail Manager validates uploads paths, protects original full-size images, runs prune/delete actions in batches, and updates attachment metadata after deleted thumbnail sizes are removed.</p>
<h4>Key Features</h4>
<ul>
<li>Regenerate WordPress thumbnails for existing image attachments</li>
<li>Generate only missing thumbnails or force-regenerate all selected images</li>
<li>Disable unwanted registered image sizes for future uploads</li>
<li>Prune unused thumbnails while keeping selected sizes</li>
<li>Run Dry-run previews before deleting generated thumbnail files</li>
<li>Detect legacy thumbnail sizes stored in attachment metadata</li>
<li>Report disk-only orphan matches without deleting unmapped files by default</li>
<li>Scan recommendations based on protected sizes, WooCommerce-related sizes, generated metadata, and common content references</li>
<li>Process large Media Libraries with cursor-based AJAX queues and folder scoping</li>
<li>Manage everything from Tools > Thumbnail Manager</li>
</ul>
<h4>Common Use Cases</h4>
<ul>
<li>Clean WordPress thumbnail bloat after theme or page builder changes</li>
<li>Regenerate thumbnails after changing Media Settings or custom image sizes</li>
<li>Reduce WooCommerce image storage by reviewing generated product thumbnails</li>
<li>Disable image sizes that should no longer be created for new uploads</li>
<li>Rebuild missing thumbnails after migration, restore, or failed image processing</li>
<li>Audit legacy thumbnail sizes left behind by old themes and plugins</li>
</ul>
<h4>Safety First</h4>
<p>Thumbnail Manager is designed for controlled cleanup, not blind filesystem deletion.</p>
<ul>
<li>Original full-size images are not deleted</li>
<li>Delete mode requires a fresh delete token and a completed scan</li>
<li>Dry-run mode never deletes files</li>
<li>Cleanup targets files from attachment metadata</li>
<li>Disk-only orphan matches are reported, not deleted by default</li>
<li>Paths are validated under the WordPress uploads directory before deletion</li>
<li>Attachment metadata is updated after generated thumbnail sizes are removed</li>
</ul>
<h4>What It Does Not Do</h4>
<ul>
<li>It does not compress or optimize image quality</li>
<li>It does not replace image optimization or CDN plugins</li>
<li>It does not automatically delete media without confirmation</li>
<li>It does not delete original uploaded images</li>
<li>It does not unregister image sizes from themes or plugins</li>
</ul>
<h3>Usage</h3>
<h4>Recommended Workflow</h4>
<ol>
<li>Open Tools > Thumbnail Manager.</li>
<li>Scan Recommendations to review likely keep/remove sizes.</li>
<li>Apply recommended sizes if they match your site.</li>
<li>Open Thumbnail Sizes and save the sizes you want generated for future uploads.</li>
<li>Run Regenerate to rebuild missing or selected thumbnails.</li>
<li>Open Prune Files and run Dry-run before any deletion.</li>
<li>Review matched files, then switch to Delete only when the preview is correct.</li>
</ol>
<h4>Regenerate Thumbnails</h4>
<p>Use Regenerate when you need to rebuild WordPress image sizes for existing attachments. You can process all media, the current year, a specific uploads folder, or specific attachment IDs.</p>
<h4>Prune Files</h4>
<p>Use Prune Files to clean generated thumbnails for sizes you no longer want to keep. Always run Dry-run first. If orphan discovery is enabled, metadata-backed legacy sizes can be included, while unmapped disk-only matches are reported for review.</p>
<h4>Thumbnail Sizes</h4>
<p>Use Thumbnail Sizes to control which registered image sizes WordPress should generate for future uploads. This setting does not remove existing files until you run Prune Files.</p>
<h3>Technical Notes</h3>
<ul>
<li>Uses <code>intermediate_image_sizes_advanced</code> to control future thumbnail generation</li>
<li>Uses cursor-based AJAX queues for regenerate and prune scans</li>
<li>Uses attachment metadata for prune candidates</li>
<li>Validates filesystem paths under the uploads directory before deletion</li>
<li>Updates attachment metadata after generated thumbnail files are removed</li>
<li>Requires the <code>manage_options</code> capability</li>
<li>Works per site on multisite installations</li>
</ul>
<h3>Privacy</h3>
<p>Thumbnail Manager does not collect, store, or transmit personal data. All thumbnail scans, regeneration actions, and cleanup actions run locally on your WordPress site.</p>


Thumbnail Manager

Regenerate WordPress thumbnails, disable image sizes, and safely clean unused media library thumbnails with dry-run previews.

Responsive Image Sizes Divi vs Thumbnail Manager