Core Essentials

<p><strong>Core Essentials – Responsive Picture Block</strong> turns several standard <strong>Image</strong> blocks into one semantic, front-end <code><picture></code> HTML element. It’s built for <strong>art direction</strong>: choose <strong>different crops, compositions, or formats</strong> for different breakpoints (e.g., a tight mobile crop, a wider desktop crop, or an AVIF/WebP source).</p>
<p>Why this matters:</p>
<ul>
<li>
<p><strong><code><picture></code> vs <code><img srcset></code></strong><br />
  srcset is great for picking the right <strong>resolution</strong> of the <em>same</em> image. But when you need different <strong>content</strong> (crop/ratio/composition) at different viewport widths, you need <strong>art direction</strong> — that’s exactly what <code><picture></code> does by letting you swap <strong>entire sources</strong> via <code><source media="…"></code>.</p>
</li>
<li>
<p><strong>Editor-first UX</strong><br />
Authors see a single “Responsive Picture (Block)” wrapper, then insert one Image per breakpoint. The plugin mirrors the link /caption from the Desktop image. Per-image design controls (aspect ratio, object-fit, width/height) are respected. The block’s <strong>preview</strong> shows the native <strong>Desktop / Tablet / Mobile</strong> toolbar:</p>
<ul>
<li>Desktop preview ⇒ show <strong>all</strong> child images  </li>
<li>Tablet preview ⇒ show <strong>Tablet</strong>, else <strong>Desktop</strong>, else <strong>Mobile</strong>  </li>
<li>Mobile preview ⇒ show <strong>Mobile</strong>, else <strong>Tablet</strong>, else <strong>Desktop</strong></li>
</ul>
</li>
<li>
<p><strong>Perfect source ordering</strong><br />
Custom media queries are <strong>auto-sorted</strong> so the correct <code><source></code> wins (most specific first). Works with <code>max-width</code>, <code>min-width</code>, and range queries.</p>
</li>
</ul>
<h3>Key Features</h3>
<ul>
<li>Wraps multiple core <strong>Image</strong> blocks into a single semantic <code><picture></code></li>
<li>Pick <strong>Desktop / Tablet / Mobile / Custom</strong> images (true art direction)</li>
<li><strong>Override <code>media</code></strong> per Tablet/Mobile/Custom (e.g., <code>(max-width: 1200px)</code>)</li>
<li>Optional <strong><code>sizes</code> override</strong> per source (advanced bandwidth tuning)</li>
<li>Allows <strong>width, height, aspect-ratio, object-fit</strong> per breakpoint</li>
<li>Uses <strong>link + caption</strong> from the Desktop (fallback) image</li>
<li>Editor <strong>preview</strong> follows WordPress’ device switcher (Desktop/Tablet/Mobile)</li>
<li>Prevents layout overflow; picture wrapper is fully responsive</li>
<li>Works with standard WP image sizes and responsive <code>srcset</code></li>
<li>Lightweight, no front-end JS — pure HTML/CSS on the front end</li>
</ul>
<h3>Why <code><picture></code> (Art Direction 101)</h3>
<p>When your layout needs <strong>different imagery</strong> across breakpoints (e.g., a vertical crop on phones and a wide landscape on desktops), you’re doing <strong>art direction</strong>. The <code><picture></code> element enables this by letting the browser <strong>choose an entire source</strong> based on <code>media</code> conditions (and even file <code>type</code>, like AVIF/WebP), not just a different width of the same file. The result is <strong>better design control</strong> and <strong>faster pages</strong> because each device downloads <strong>only the most appropriate asset</strong> for its layout saving you bandwidth as well as having compositions control.</p>
<h3>Use Cases</h3>
<ul>
<li>Hero banners with <strong>different crops</strong> for mobile vs desktop  </li>
<li>Product images where the <strong>subject framing</strong> changes on small screens  </li>
<li>Editorial layouts that require <strong>portrait vs landscape</strong> compositions  </li>
<li>File <strong>format switching</strong> (e.g., AVIF/WebP with PNG/JPEG fallback)</li>
</ul>
<h3>Usage</h3>
<ol>
<li><strong>Insert</strong> the <strong>Responsive Picture (Block)</strong> block.  </li>
<li><strong>Add Image blocks</strong> inside it for: Desktop (fallback), Tablet, Mobile, and/or Custom.  </li>
<li><strong>Select each Image</strong> and open the <strong>Responsive: Breakpoint</strong> panel:
<ul>
<li><strong>Viewport</strong>: Desktop / Tablet / Mobile / Custom  </li>
<li><strong>Override media query</strong> (Tablet/Mobile): optional (e.g., <code>(max-width: 1200px)</code>)  </li>
<li><strong>Custom media query</strong>: required when using the “Custom” viewport  </li>
</ul>
</li>
<li>(Optional) Open <strong>Advanced: Sizes override</strong> to set a custom <code>sizes=""</code> for that source.  </li>
<li>Use the editor’s <strong>Desktop / Tablet / Mobile</strong> preview to check the effective image per breakpoint.  </li>
<li>Publish. The front end renders a single <code><picture></code> with perfectly ordered <code><source></code> tags and a fallback <code><img></code>.</li>
</ol>
<h3>Block Details</h3>
<ul>
<li>Block name: <code>ce/responsive-picture</code>  </li>
<li>Children: one or more <code>core/image</code> blocks  </li>
<li>
<p>Front-end HTML output:</p>
<pre><code><picture>
  <source media="(max-width: 767px)" srcset="…" sizes="…">
  <source media="(max-width: 1024px)" srcset="…" sizes="…">
  
  <img src="…" srcset="…" sizes="…" alt="">
</picture>
</code></pre>
</li>
</ul>

Responsive Picture Block

Create truly responsive, art-directed images in the block editor. Wrap multiple Image blocks (Desktop/Tablet/Mobile/Custom) and render a single HTML e …

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>


Responsive Picture Block vs Responsify WP