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

Responsify WP

Core Essentials

Core Essentials – Responsive Picture Block turns several standard Image blocks into one semantic, front-end <code><picture></code> HTML element. It’s built for art direction: choose different crops, compositions, or formats for different breakpoints (e.g., a tight mobile crop, a wider desktop crop, or an AVIF/WebP source).
Why this matters:
<ul>
<li>
<code><picture></code> vs <code><img srcset></code> 
 srcset is great for picking the right resolution of the same image. But when you need different content (crop/ratio/composition) at different viewport widths, you need art direction — that’s exactly what <code><picture></code> does by letting you swap entire sources via <code><source media="…"></code>.
</li>
<li>
Editor-first UX 
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 preview shows the native Desktop / Tablet / Mobile toolbar:
<ul>
<li>Desktop preview ⇒ show all child images </li>
<li>Tablet preview ⇒ show Tablet, else Desktop, else Mobile </li>
<li>Mobile preview ⇒ show Mobile, else Tablet, else Desktop</li>
</ul>
</li>
<li>
Perfect source ordering 
Custom media queries are auto-sorted so the correct <code><source></code> wins (most specific first). Works with <code>max-width</code>, <code>min-width</code>, and range queries.
</li>
</ul>
<h3>Key Features</h3>
<ul>
<li>Wraps multiple core Image blocks into a single semantic <code><picture></code></li>
<li>Pick Desktop / Tablet / Mobile / Custom images (true art direction)</li>
<li>Override <code>media</code> per Tablet/Mobile/Custom (e.g., <code>(max-width: 1200px)</code>)</li>
<li>Optional <code>sizes</code> override per source (advanced bandwidth tuning)</li>
<li>Allows width, height, aspect-ratio, object-fit per breakpoint</li>
<li>Uses link + caption from the Desktop (fallback) image</li>
<li>Editor preview 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>
When your layout needs different imagery across breakpoints (e.g., a vertical crop on phones and a wide landscape on desktops), you’re doing art direction. The <code><picture></code> element enables this by letting the browser choose an entire source 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 better design control and faster pages because each device downloads only the most appropriate asset for its layout saving you bandwidth as well as having compositions control.
<h3>Use Cases</h3>
<ul>
<li>Hero banners with different crops for mobile vs desktop </li>
<li>Product images where the subject framing changes on small screens </li>
<li>Editorial layouts that require portrait vs landscape compositions </li>
<li>File format switching (e.g., AVIF/WebP with PNG/JPEG fallback)</li>
</ul>
<h3>Usage</h3>
<ol>
<li>Insert the Responsive Picture (Block) block. </li>
<li>Add Image blocks inside it for: Desktop (fallback), Tablet, Mobile, and/or Custom. </li>
<li>Select each Image and open the Responsive: Breakpoint panel:
<ul>
<li>Viewport: Desktop / Tablet / Mobile / Custom </li>
<li>Override media query (Tablet/Mobile): optional (e.g., <code>(max-width: 1200px)</code>) </li>
<li>Custom media query: required when using the “Custom” viewport </li>
</ul>
</li>
<li>(Optional) Open Advanced: Sizes override to set a custom <code>sizes=""</code> for that source. </li>
<li>Use the editor’s Desktop / Tablet / Mobile 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>
Front-end HTML output:
<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>

Alternatives to Responsive Picture Block

Top alternatives