Title: Responsive Picture Block
Author: Core Essentials
Published: septembre 30, 2025
Last modified: mars 12, 2026
---
Search plugins
# 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://tah.wordpress.org/plugins/responsive-picture-block/?preview=1)
* [Details](https://tah.wordpress.org/plugins/responsive-picture-block/#description)
* [Reviews](https://tah.wordpress.org/plugins/responsive-picture-block/#reviews)
* [Installation](https://tah.wordpress.org/plugins/responsive-picture-block/#installation)
* [Development](https://tah.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⌉⌊Block wrapper with Desktop,
Tablet, Mobile child options⌉[
Block wrapper with Desktop, Tablet, Mobile child options
[⌊Front-end markup: with differnt image for mobile⌉⌊Front-end markup:
with differnt image for mobile⌉[
Front-end markup: `` with differnt image for mobile
[⌊Choosing Responsive Picture Block in the block editor⌉⌊Choosing Responsive Picture
Block in the block editor⌉[
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
### [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/) février 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 **4 mois ago**
* Active installations **30+**
* WordPress version ** 6.3 or higher **
* Tested up to **6.9.5**
* PHP version ** 7.4 or higher **
* Language
* [English (US)](https://wordpress.org/plugins/responsive-picture-block/)
* Tags
* [art-direction](https://tah.wordpress.org/plugins/tags/art-direction/)[block-editor](https://tah.wordpress.org/plugins/tags/block-editor/)
[gutenberg](https://tah.wordpress.org/plugins/tags/gutenberg/)[picture element](https://tah.wordpress.org/plugins/tags/picture-element/)
[responsive images](https://tah.wordpress.org/plugins/tags/responsive-images/)
* [Advanced View](https://tah.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
Got something to say? Need help?
[View support forum](https://wordpress.org/support/plugin/responsive-picture-block/)