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

Nazmul Ahsan

Codexpert, Inc

Pluggable IO

ThumbPress

<p>🚀 <a href="https://thumbpress.co/" rel="nofollow ugc">Pro Version</a> | 🔵 <a href="https://www.facebook.com/ThumbPressCo/" rel="nofollow ugc">Facebook</a> | 🐦 <a href="https://twitter.com/ThumbPressCo/" rel="nofollow ugc">Twitter</a> | 👥 <a href="https://www.linkedin.com/company/thumbpress/" rel="nofollow ugc">LinkedIn</a></p>
<p>How many images and thumbnails do you have on your WordPress site? Can’t count, right?</p>
<p>Managing those images and thumbnails is harder than counting them. ThumbPress, the one-stop WordPress image management plugin makes this easier than ever.</p>
<p>Check out the exciting features below:</p>
<h3>👉 All ThumbPress Features to Supercharge Your WordPress Image Management</h3>
<p>💥 <a href="https://thumbpress.co/modules/disable-thumbnails/" rel="nofollow ugc">Disable Thumbnails</a><br />
💥 <a href="https://thumbpress.co/modules/regenerate-thumbnails/" rel="nofollow ugc">Regenerate Thumbnails</a><br />
💥 <a href="https://thumbpress.co/modules/detect-unused-images/" rel="nofollow ugc">Find Unused Images</a> [Pro]<br />
💥 <a href="https://thumbpress.co/modules/image-upload-limit/" rel="nofollow ugc">Set Image Upload Limit</a><br />
💥 <a href="https://thumbpress.co/modules/detect-large-images/" rel="nofollow ugc">Detect Large Images</a> [Pro]<br />
💥 <a href="https://thumbpress.co/modules/compress-images/" rel="nofollow ugc">Image Compression</a> [Pro]<br />
💥 <a href="https://thumbpress.co/modules/replace-image-with-new-version/" rel="nofollow ugc">Replace Images</a> [Pro]<br />
💥 <a href="https://thumbpress.co/modules/set-social-media-thumbnails/" rel="nofollow ugc">Set Social Media Thumbnails</a><br />
💥 <a href="https://thumbpress.co/modules/image-editor/" rel="nofollow ugc">Image Editor</a> [Pro]<br />
💥 <a href="https://thumbpress.co/modules/convert-images-to-webp/" rel="nofollow ugc">Convert to WebP</a><br />
💥 <a href="https://thumbpress.co/modules/disable-right-click/" rel="nofollow ugc">Disable Right Click on Image</a></p>
<p>Here are some of the key features of the ThumbPress plugin for WordPress Image Management –</p>
<h4>🚀 Disable Thumbnails</h4>
<p>When you upload an image using Media Uploader, WordPress generates multiple copies/thumbnails of that image. By default, WordPress generates 5 thumbnails:<br />
– Thumbnail<br />
– Medium<br />
– Medium-large<br />
– Large<br />
– Scaled</p>
<p>Along with this, your themes and plugins add more thumbnails and most of these thumbnails remain unused.</p>
<p>The result? Unnecessary additional images eat up your server space and slow down your site!</p>
<p>This is where the Disable feature comes into the picture. Just install the plugin and choose which of the image sizes you want to prevent from generating.</p>
<h4>🚀 Regenerate Thumbnails</h4>
<p>Regenerate thumbnails on your WordPress site at any moment, regardless of their sizes. No more worrying about lost thumbnails — our WordPress plugin guarantees swift restoration, keeping your site’s visual appeal flawless and consistent. Start now and rebuild thumbnails on your WordPress site.</p>
<h4>🚀 Social Media Thumbnails</h4>
<p>ThumbPress enables you to assign unique thumbnails for various social media platforms, ensuring that an image intended for Facebook remains uncropped when shared on Twitter or LinkedIn. You can upload distinct thumbnails for each social media site.</p>
<h4>🚀 Image Upload Limit</h4>
<p>Set a maximum limit for image upload size and resolution to ensure faster loading times. Our feature allows you to customize these parameters according to your website requirements and prevent oversized images from slowing down your site.</p>
<h4>🚀 Convert Images to WebP</h4>
<p>In WordPress convert images to WebP in bulk or one by one without any effort. Convert JPG or PNG to WebP from the comfort of your favorite WordPress dashboard and upgrade your website’s performance without sacrificing image quality. This advanced function ensures your images remain crisp and clear while reducing file size compared to traditional formats. The image conversion to WebP format helps you in SEO and gets you better rankings as Google recommends this format.</p>
<h4>🚀 Disable Right Click on Image</h4>
<p>Disable the right-click function on your website, a simple yet effective way to deter visitors from downloading or copying your images and thumbnails. It’s a preventive measure that adds an extra layer of protection to your digital assets and keeps your visuals exclusive to your site.</p>
<h3>👉 ThumbPress Pro Features</h3>
<p>🔥 <a href="https://thumbpress.co/modules/detect-large-images/" rel="nofollow ugc">Detect Large Images</a> [Pro]<br />
🔥 <a href="https://thumbpress.co/modules/detect-unused-images/" rel="nofollow ugc">Detect Unused Images</a> [Pro]<br />
🔥 <a href="https://thumbpress.co/modules/compress-images/" rel="nofollow ugc">Compress Images</a> [Pro]<br />
🔥 <a href="https://thumbpress.co/modules/replace-image-with-new-version/" rel="nofollow ugc">Replace Image with New Version</a> [Pro]<br />
🔥 <a href="https://thumbpress.co/modules/image-editor/" rel="nofollow ugc">Image Editor</a> [Pro]</p>
<p>Check out our <a href="https://thumbpress.co/" rel="nofollow ugc">Pro Features</a> and <a href="https://thumbpress.co/pricing/" rel="nofollow ugc">Pricing Plans</a></p>
<h4>🌟 Detect Large Images</h4>
<p>Find and compress oversized images, or delete them entirely to get back valuable server space. It’s a great way to improve user experience by speeding up your site’s loading time and streamlining media files directly on the WordPress dashboard.</p>
<h4>🌟 Find & Delete Unused Images on WordPress</h4>
<p>Find unused images on WordPress and delete them by simply using ThumbPress. Unused images eat up your server space without adding any value to your website audiences. ThumbPress makes it easy for you to find all unused images and remove them from a very user-friendly interface with ThumbPress image optimizer.</p>
<h4>🌟 Compress Images (The Easiest Image Compression Plugin on WordPress)</h4>
<p>Optimize and have a blazing-fast website by using the WordPress image compression plugin ThumbPress. Our built-in WordPress image compression feature optimizes images to improve your site’s performance without losing visual quality. The plugin’s simple interface helps you compress WordPress effortlessly.</p>
<h4>🌟 Replace Image with New Version</h4>
<p>Replace images with newer versions without changing their existing links. It ensures that the same image will show up properly if used elsewhere. It’s the perfect solution for maintaining visual relevance.</p>
<h4>🌟 Image Editor</h4>
<p>We always try to upload the finest image to the site after all the editing stuff is done. But, sometimes, the previously uploaded images may require some brush-ups. In such cases, one option is to upload quite new images. The WordPress image editor feature of ThumbPress enables you to edit them right on your WordPress Dashboard. Try our simple and compact image editor tool today and bring perfection to your WordPress images.</p>
<h3>Notes</h3>
<ul>
<li>ThumbPress uses <a href="https://www.intercom.com/" rel="nofollow ugc">Intercom</a> and its API to provide live chat support right from the dashboard.</li>
<li>Some third-party libraries are used to enable some features of the plugin. Kudos to the corresponding authors.</li>
</ul>


ThumbPress – Image Management Suite for Performance and Optimization

Disable Thumbnails, Regenerate Thumbnails, Compress Images, Convert to WebP, Find Unused and Large Images, Edit Images, and more with ThumbPress.

Responsive Image Sizes Divi vs ThumbPress – Image Management Suite for Performance and Optimization