Jeff Starr

<p>This plugin completely disables WP responsive-image feature that was introduced in version 4.4. It is meant for people who know what they are doing and want to use their own responsive-image techniques.</p>
<p><strong>Features</strong></p>
<ul>
<li>Disables responsive images on the front-end</li>
<li>Disables generation of <code>medium_large</code> 768px image size</li>
<li>Completely plug-and-play, no configuration required</li>
<li>Works perfectly with or without Gutenberg block editor</li>
<li>Uses the WP API to disable responsive images</li>
<li>Clean, lightweight code, a real pleasure</li>
</ul>
<p>Why would anyone want to do this? Check out the FAQs below for all sorts of good reasons.</p>
<p>Check out <a href="https://perishablepress.com/disable-wordpress-responsive-images/" rel="nofollow ugc">Disable WordPress Responsive Images</a> at Perishable Press for more information about how this plugin works, etc.</p>
<blockquote>
<p><strong>Related:</strong> Free plugin to control which image sizes are generated by WordPress, check out <a href="https://wordpress.org/plugins/disable-media-sizes/" rel="ugc">Disable Media Sizes</a>.</p>
</blockquote>
<p><strong>Privacy</strong></p>
<p>This plugin does not collect or store any user data. It does not set any cookies, and it does not connect to any third-party locations. Thus, this plugin does not affect user privacy in any way.</p>
<p>Disable Responsive Images Complete is developed and maintained by <a href="https://x.com/perishable" rel="nofollow ugc">Jeff Starr</a>, 15-year <a href="https://plugin-planet.com/" rel="nofollow ugc">WordPress developer</a> and <a href="https://books.perishablepress.com/" rel="nofollow ugc">book author</a>.</p>
<p><strong>Support development</strong></p>
<p>I develop and maintain this free plugin with love for the WordPress community. To show support, you can <a href="https://monzillamedia.com/donate.html" rel="nofollow ugc">make a donation</a> or purchase one of my books:</p>
<ul>
<li><a href="https://wp-tao.com/" rel="nofollow ugc">The Tao of WordPress</a></li>
<li><a href="https://digwp.com/" rel="nofollow ugc">Digging into WordPress</a></li>
<li><a href="https://htaccessbook.com/" rel="nofollow ugc">.htaccess made easy</a></li>
<li><a href="https://wp-tao.com/wordpress-themes-book/" rel="nofollow ugc">WordPress Themes In Depth</a></li>
<li><a href="https://books.perishablepress.com/downloads/wizards-collection-sql-recipes-wordpress/" rel="nofollow ugc">Wizard’s SQL Recipes for WordPress</a></li>
</ul>
<p>And/or purchase one of my premium WordPress plugins:</p>
<ul>
<li><a href="https://plugin-planet.com/bbq-pro/" rel="nofollow ugc">BBQ Pro</a> – Blazing fast WordPress firewall</li>
<li><a href="https://plugin-planet.com/blackhole-pro/" rel="nofollow ugc">Blackhole Pro</a> – Automatically block bad bots</li>
<li><a href="https://plugin-planet.com/banhammer-pro/" rel="nofollow ugc">Banhammer Pro</a> – Monitor traffic and ban the bad guys</li>
<li><a href="https://plugin-planet.com/ga-google-analytics-pro/" rel="nofollow ugc">GA Google Analytics Pro</a> – Connect WordPress to Google Analytics</li>
<li><a href="https://plugin-planet.com/head-meta-pro/" rel="nofollow ugc">Head Meta Pro</a> – Ultimate Meta Tags for WordPress</li>
<li><a href="https://plugin-planet.com/simple-ajax-chat-pro/" rel="nofollow ugc">Simple Ajax Chat Pro</a> – Unlimited chat rooms</li>
<li><a href="https://plugin-planet.com/usp-pro/" rel="nofollow ugc">USP Pro</a> – Unlimited front-end forms</li>
</ul>
<p>Links, tweets and likes also appreciated. Thank you! 🙂</p>


Disable Responsive Images Complete

Light as feather and fixed our problem of WordPress "helping" us by serving an unoptimised, resized version of a PNG image that was 4x the size of the original. You'd think they'd just not add it if was larger.

Ace.

We had a client site that kept claiming their images were blurry. I was unable to duplicate it, but I figured it was due to the responsive images being output. I activated the plugin and could immediately spot the culprit. I figured there was a plugin with a reputable author that had a solution for this, so thank you so much for developing it.

Works Perfect

Completely disables WP responsive images.

stefanledin

<p>Responsify WP is the WordPress plugin that cares about responsive images.</p>
<h3>Features</h3>
<ul>
<li>Use <code>img</code> with srcset/sizes attributes.</li>
<li>…or the <code>picture</code> element.</li>
<li>Works with or without <a href="http://scottjehl.github.io/picturefill/" rel="nofollow ugc">Picturefill</a>.</li>
<li>Supports high resolution images (retina).</li>
<li>Custom media queries.</li>
<li>Handpick which image sizes to use.</li>
<li>Responsive background images.</li>
</ul>
<h3><a href="https://www.youtube.com/watch?v=3ThYWO6vHKI&spfreload=10" rel="nofollow ugc">Demo</a></h3>
<p>Responsify WP finds featured images and all images inside the content and makes them responsive.<br />
For example, you might have a template that looks like this:</p>
<pre><code><article>
    <h1><?php the_title();?></h1>
    <?php the_content();?>
</article>
</code></pre>
<p>That will output something like this:</p>
<pre><code><article>
    <h1>Hello world</h1>
    <p>Lorem ipsum dolor sit amet...</p>
    <img src="large.jpg" alt="Image description">
</article>
</code></pre>
<p>But once you have activated the plugin, it will look like this instead:</p>
<pre><code><article>
    <h1>Hello world</h1>
    <p>Lorem ipsum dolor sit amet...</p>
    <img sizes="(min-width: 300px) 1024px, (min-width: 150x) 300px, 150px"
        srcset="thumbnail.jpg 150w,
        medium.jpg 300w,
        large.jpg 1024w"
        alt="Image description">
</article>
</code></pre>
<p>You can also choose to use the <code>picture</code> element instead:</p>
<pre><code><article>
    <h1>Hello world</h1>
    <p>Lorem ipsum dolor sit amet...</p>
    <picture>
        <source srcset="full-size.jpg" media="(min-width: 1024px)">
        <source srcset="large.jpg" media="(min-width: 300px)">
        <source srcset="medium.jpg" media="(min-width: 150px)">
        <img srcset="thumbnail.jpg" alt="Image description">
    </picture>
</article>
</code></pre>
<p>It also works with high resolution (retina) images:</p>
<pre><code><article>
    <h1>Hello world</h1>
    <p>Lorem ipsum dolor sit amet...</p>
    <picture>
        <source srcset="full-size.jpg" media="(min-width: 1024px)">
        <source srcset="large.jpg, large_retina.jpg 2x" media="(min-width: 300px)">
        <source srcset="medium.jpg, medium_retina.jpg 2x" media="(min-width: 150px)">
        <img srcset="thumbnail.jpg, thumbnail_retina.jpg 2x" alt="Image description">
    </picture>
</article>
</code></pre>
<p>The different versions of the image in the examples above is in the standard <code>thumbnail</code>, <code>medium</code>, <code>large</code> and <code>full</code> sizes.<br />
The <strong>media queries</strong> are based on the width of the “previous” image.<br />
Any <strong>custom sizes</strong> of the image will also be found and used.</p>
<h3>Settings</h3>
<p>You can <strong>select which image sizes</strong> that the plugin should use from the RWP settings page.<br />
These settings can be overwritten from your templates.</p>
<pre><code><?php

// Using get_posts()
$posts = get_posts( array(
    'post_type' => 'portfolio',
    'rwp_settings' => array(
        'sizes' => array('large', 'full')
    )
) );
foreach( $posts as $post ) {
    // ...
}

// Using WP_Query()
$query = new WP_Query( array(
    'category_name' => 'wordpress',
    'rwp_settings' => array(
        'sizes' => array('large', 'full')
    )
) );
if ( $query->have_posts() ) {
    // ...
}
?>
</code></pre>
<p><strong>Available settings:</strong></p>
<ul>
<li>Select which image sizes to use.</li>
<li>Set/override attributes.</li>
<li>Set custom media queries.</li>
<li>Turn on/off retina.</li>
<li>Ignore image formats.</li>
</ul>
<h3>Functions</h3>
<p>RWP provides a number of functions that can generate responsive images in your templates.<br />
Let’s say that you have the following markup for a very large header image:</p>
<pre><code><header>
    <?php the_post_thumbnail( 'full' ); ?>
</header>
</code></pre>
<p>As you probably know, <code>the_post_thumbnail()</code> will create a regular <code><img></code> tag with the full-size image in this case.<br />
But you don’t want to send a big 1440px image to a mobile device. This can easily be solved like this:</p>
<pre><code><header>
    <?php
    $thumbnail_id = get_post_thumbnail_id( $post->ID );

    // Generate an <img> tag with srcset/sizes attributes.
    echo rwp_img( $thumbnail_id );

    // Generate a <picture> element
    echo rwp_picture( $thumbnail_id );
    ?>
</header>
</code></pre>
<h3>Website</h3>
<p><a href="http://responsifywp.com" rel="nofollow ugc">http://responsifywp.com</a>.</p>
<h3>Demo</h3>
<p><a href="http://responsifywp.com/demo" rel="nofollow ugc">http://responsifywp.com/demo</a>.</p>
<h3>Documentation and examples</h3>
<p><a href="https://github.com/stefanledin/responsify-wp" rel="nofollow ugc">https://github.com/stefanledin/responsify-wp</a>.</p>
<h3>Requirements</h3>
<ul>
<li>PHP 5.3</li>
</ul>


Disable Responsive Images Complete vs Responsify WP