Core Essentials – Responsive Picture Block turns several standard
Image blocks into one semantic, front-end
<picture>
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:
<picture>
vs <img srcset>
\
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 <picture>
does by letting you swap entire sources via <source media="…">
.
- 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
<source>
wins (most specific first). Works with max-width
, min-width
, and range queries.
Key Features
- Wraps multiple core Image blocks into a single semantic
<picture>
- 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
<picture>
(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
<picture>
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)