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

33themes

Carlos

Pancho Perez

gabrielperezs

Thomas Gr?nvogel

<p>This is an easy and fast way to crop any uploaded image in your wordpress. No more complicated graphical editors, photos of people without head or products with wrong view. Select a thumbnail, edit the crop area and save the new thumbnail image.</p>
<p>This plugin doesn’t create any new file or folder, when it saves the new crop area it rewrites the original thumbnail file, this means it doesn’t affect the theme design 🙂</p>
<h3>Features</h3>
<ul>
<li>The plugin automatically use all images created with the function <em>add_image_size</em> even if they are hard cropped or proportional. More info in https://codex.wordpress.org/Function_Reference/add_image_size#Crop_Mode</li>
<li>“Crop Editor” quick link in media list.</li>
<li>“Crop Editor” link in featured image widget.</li>
<li>“Crop Editor” button inside file details in media manager.</li>
</ul>
<p><span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/25dKFOV8toY?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span><br />
(Thanks to: https://software-lupe.de/review/ttt-crop-thumbnails-auf-mass/)</p>
<h3>How to use it</h3>
<ol>
<li>Select an image, open the image editor and click on the Crop Editor button.</li>
<li>Choose the image size you want and crop it.</li>
</ol>
<h3>Recomendations</h3>
<p>If you are a developer and you need to rebuild the thumbnails we recommend use this plugin: https://wordpress.org/plugins/ajax-thumbnail-rebuild/ it helps you to do it one at a time.</p>
<p>IMPORTANT: Notice that rebuilding thumbnails will overwrite the thumbnails cropped with the TTT Crop plugin.</p>
<h3>Hacks</h3>
<p>Just copy&paste this code into your functions.php</p>
<p><strong>Remove sizes from the editor</strong></p>
<pre><code>add_filter( 'tttcrop_image_sizes', 'custom_tttcrop_image_sizes');
function custom_tttcrop_image_sizes( $sizes ) {
    unset( $sizes['thumbnail'] );
    unset( $sizes['large'] );
    return $sizes;
}
?>
</code></pre>
<p><strong>Remove thumbnails sizes from the editor for an specific post type</strong></p>
<pre><code>function custom_tttcrop_image_sizes_CPT($sizes) {

    foreach ($sizes as $key => $values) {
        if ($key == 'THUMBNAIL-SIZE1')
            $new[ $key ] = $values;
        elseif ($key == 'THUMBNAIL-SIZE1')
            $new[ $key ] = $values;            
    }

    return $new;
}
</code></pre>
<p><strong>Change the name of the image to human friendly names</strong></p>
<pre><code>function local_ttt_crop_human_name($name) {
    switch( $name ) {
        case 'single-slider';
            return 'Home slider image'; break;
        case 'widget-thumbnail';
            return 'Widget small image'; break;

        default:
            return $name; break;
    }
}
add_filter('ttt_crop_human_name','local_ttt_crop_human_name');
</code></pre>
<p>This will change the name of the image inside the tooltip when it is selected.</p>


TTT Crop

Select any thumbnail size from your theme and crop it in a simple way.

Responsive Image Sizes Divi vs TTT Crop