Title: Responsive Picture Block Author: Core Essentials Published: September 30, 2025 Last modified: March 12, 2026 --- Search plugins ![](https://ps.w.org/responsive-picture-block/assets/banner-772x250.png?rev=3370243) ![](https://ps.w.org/responsive-picture-block/assets/icon.svg?rev=3370243) # Responsive Picture Block By [Core Essentials](https://profiles.wordpress.org/coreessentials/) [Download](https://downloads.wordpress.org/plugin/responsive-picture-block.1.1.1.zip) [Live Preview](https://frp.wordpress.org/plugins/responsive-picture-block/?preview=1) * [Details](https://frp.wordpress.org/plugins/responsive-picture-block/#description) * [Reviews](https://frp.wordpress.org/plugins/responsive-picture-block/#reviews) * [Installation](https://frp.wordpress.org/plugins/responsive-picture-block/#installation) * [Development](https://frp.wordpress.org/plugins/responsive-picture-block/#developers) [Support](https://wordpress.org/support/plugin/responsive-picture-block/) ## Description **Core Essentials – Responsive Picture Block** turns several standard **Image** blocks into one semantic, front-end `` 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: * **`` vs ``** 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` ` does by letting you swap **entire sources** via ``. * **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: - Desktop preview ⇒ show **all** child images - Tablet preview ⇒ show **Tablet**, else **Desktop**, else **Mobile** - Mobile preview ⇒ show **Mobile**, else **Tablet**, else **Desktop** * **Perfect source ordering** Custom media queries are **auto-sorted** so the correct `` wins (most specific first). Works with `max-width`, `min-width`, and range queries. ### Key Features * Wraps multiple core **Image** blocks into a single semantic `` * Pick **Desktop / Tablet / Mobile / Custom** images (true art direction) * **Override `media`** per Tablet/Mobile/Custom (e.g., `(max-width: 1200px)`) * Optional **`sizes` override** per source (advanced bandwidth tuning) * Allows **width, height, aspect-ratio, object-fit** per breakpoint * Uses **link + caption** from the Desktop (fallback) image * Editor **preview** follows WordPress’ device switcher (Desktop/Tablet/Mobile) * Prevents layout overflow; picture wrapper is fully responsive * Works with standard WP image sizes and responsive `srcset` * Lightweight, no front-end JS — pure HTML/CSS on the front end ### Why `` (Art Direction 101) 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 `` element enables this by letting the browser **choose an entire source** based on `media` conditions (and even file `type`, 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. ### Use Cases * Hero banners with **different crops** for mobile vs desktop * Product images where the **subject framing** changes on small screens * Editorial layouts that require **portrait vs landscape** compositions * File **format switching** (e.g., AVIF/WebP with PNG/JPEG fallback) ### Usage 1. **Insert** the **Responsive Picture (Block)** block. 2. **Add Image blocks** inside it for: Desktop (fallback), Tablet, Mobile, and/or Custom. 3. **Select each Image** and open the **Responsive: Breakpoint** panel: 4. * **Viewport**: Desktop / Tablet / Mobile / Custom * **Override media query** (Tablet/Mobile): optional (e.g., `(max-width: 1200px)`) * **Custom media query**: required when using the “Custom” viewport 5. (Optional) Open **Advanced: Sizes override** to set a custom `sizes=""` for that source. 6. Use the editor’s **Desktop / Tablet / Mobile** preview to check the effective image per breakpoint. 7. Publish. The front end renders a single `` with perfectly ordered `` tags and a fallback ``. ### Block Details * Block name: `ce/responsive-picture` * Children: one or more `core/image` blocks * Front-end HTML output: * ``` ``` ## Screenshots * [[ * Block wrapper with Desktop, Tablet, Mobile child options * [[ * Front-end markup: `` with differnt image for mobile * [[ * Choosing Responsive Picture Block in the block editor * [[ ## Blocks This plugin provides 1 block. * Responsive Picture (Group) ## Installation 1. Upload the plugin folder to `/wp-content/plugins/` or install via the Plugins screen. 2. Activate **Core Essentials – Responsive Picture Block**. 3. In the block editor, add **Responsive Picture (Block)** and insert one **Image** per breakpoint. ## FAQ ### Does this replace `srcset` / responsive images? No. Each `` (and the fallback ``) still uses WordPress’ native responsive` srcset`. The plugin adds **art direction** by swapping **sources** per breakpoint;` srcset` then chooses the best **resolution** within that source. ### Can I add multiple custom breakpoints? Yes. Add more **Custom** Images with your media queries. The plugin **sorts** them( and Tablet/Mobile) into the correct order so the right source wins. ### Do I need to touch `sizes`? No. It’s optional and only affects **resolution selection** inside a matched source. If you use it, follow the pattern: (media) length, …, fallback-length (e.g., `( max-width: 1024px) 100vw, 1024px`). ### Accessibility? Alt text? Alt text is taken from the **Desktop Image**, the image; the `` `` carries it. ### What about aspect ratio and scale? All aspect ratio and scale settings are taken from the individual image, so if your mobile image is 9:16 and desktop image is set to 4:3 both will be respected at their screen sizes. ### Performance and formats? You can upload **AVIF/WebP** assets and still provide a PNG/JPEG fallback in the Desktop image if needed. The browser will pick the **first matching** ``( by `media` and optionally `type`) and an optimal width via `srcset`. ### Does it work with Synced Patterns and Overrides? As of version 1.1.0, the Responsive Picture Block fully supports WordPress Synced Patterns with Overrides. You can: 1. Create a synced pattern containing a Responsive Picture Block 2. Enable overrides on the Desktop, Tablet, and Mobile images 3. Use the pattern across multiple pages 4. Replace images on each page using the standard“ Replace” feature Each page will display different images while maintaining the same responsive structure and design. The Block Bindings API handles all image attributes( id, url, alt, caption) automatically. ## Reviews ![](https://secure.gravatar.com/avatar/0815855a652c9655dd7250e04aa7d9a22a3fdd8b34a6dd7db39ecfff3cc432cb? s=60&d=retro&r=g) ### 󠀁[Excellent Plugin – must have on every project](https://wordpress.org/support/topic/excellent-plugin-must-have-on-every-project/)󠁿 [SPiNNdevs](https://profiles.wordpress.org/spinndevs/) February 17, 2026 Has one dedicated focus, does this very well and does not introduce any other overhead or clutter. T This plugin also works with synced pattern overrides which is a game changer for us. Also the support ist top notch. Very fast feedback and a fix ready and live on the next day 🤯 [ Read all 1 review ](https://wordpress.org/support/plugin/responsive-picture-block/reviews/) ## Contributors & Developers “Responsive Picture Block” is open source software. The following people have contributed to this plugin. Contributors * [ Core Essentials ](https://profiles.wordpress.org/coreessentials/) [Translate “Responsive Picture Block” into your language.](https://translate.wordpress.org/projects/wp-plugins/responsive-picture-block) ### Interested in development? [Browse the code](https://plugins.trac.wordpress.org/browser/responsive-picture-block/), check out the [SVN repository](https://plugins.svn.wordpress.org/responsive-picture-block/), or subscribe to the [development log](https://plugins.trac.wordpress.org/log/responsive-picture-block/) by [RSS](https://plugins.trac.wordpress.org/log/responsive-picture-block/?limit=100&mode=stop_on_copy&format=rss). ## Changelog #### 1.1.1 * Fixed: Classes and alignments added to the main block are now included #### 1.1.0 * Thanks: Huge thank you to the @spinndevs team for their feedback and functionality suggestions which powered this version * Added: Full support for WordPress Synced Patterns with Override images per pattern instance * Added: Block Bindings API integration for pattern overrides (id, url, alt, caption attributes) * Changed: Default preview mode is now “Show All” for better user experience * Changed: Auto mode now correctly mirrors frontend behaviour (shows only relevant image / fallback per viewport) * Improved: Block toolbar simplified to All/Auto toggle (full controls remain in inspector panel) * Fixed: Floating toolbar now appears correctly when block is selected * Fixed: Block now properly receives pattern override context via uses_context #### 1.0.0 * Initial release ## Meta * Version **1.1.1** * Last updated **1 month ago** * Active installations **10+** * WordPress version ** 6.3 or higher ** * Tested up to **6.9.4** * PHP version ** 7.4 or higher ** * Language * [English (US)](https://wordpress.org/plugins/responsive-picture-block/) * Tags * [art-direction](https://frp.wordpress.org/plugins/tags/art-direction/)[block-editor](https://frp.wordpress.org/plugins/tags/block-editor/) [gutenberg](https://frp.wordpress.org/plugins/tags/gutenberg/)[picture element](https://frp.wordpress.org/plugins/tags/picture-element/) [responsive images](https://frp.wordpress.org/plugins/tags/responsive-images/) * [Advanced View](https://frp.wordpress.org/plugins/responsive-picture-block/advanced/) ## Ratings 5 out of 5 stars. * [ 1 5-star review ](https://wordpress.org/support/plugin/responsive-picture-block/reviews/?filter=5) * [ 0 4-star reviews ](https://wordpress.org/support/plugin/responsive-picture-block/reviews/?filter=4) * [ 0 3-star reviews ](https://wordpress.org/support/plugin/responsive-picture-block/reviews/?filter=3) * [ 0 2-star reviews ](https://wordpress.org/support/plugin/responsive-picture-block/reviews/?filter=2) * [ 0 1-star reviews ](https://wordpress.org/support/plugin/responsive-picture-block/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/responsive-picture-block/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/responsive-picture-block/reviews/) ## Contributors * [ Core Essentials ](https://profiles.wordpress.org/coreessentials/) ## Support Issues resolved in last two months: 2 out of 2 [View support forum](https://wordpress.org/support/plugin/responsive-picture-block/)