Title: Responsive Picture Block Author: Core Essentials Published: 2025 年 9 月 30 日 Last modified: 2026 年 3 月 12 日 --- 搜索插件 ![](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 作者：[Core Essentials](https://profiles.wordpress.org/coreessentials/) [下载](https://downloads.wordpress.org/plugin/responsive-picture-block.1.1.1.zip) [实时预览](https://cn.wordpress.org/plugins/responsive-picture-block/?preview=1) * [详情](https://cn.wordpress.org/plugins/responsive-picture-block/#description) * [评价](https://cn.wordpress.org/plugins/responsive-picture-block/#reviews) * [安装](https://cn.wordpress.org/plugins/responsive-picture-block/#installation) * [开发进展](https://cn.wordpress.org/plugins/responsive-picture-block/#developers) [支持](https://wordpress.org/support/plugin/responsive-picture-block/) ## 描述 **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: * ``` ``` ## 屏幕截图 * [[ * Block wrapper with Desktop, Tablet, Mobile child options * [[ * Front-end markup: `` with differnt image for mobile * [[ * Choosing Responsive Picture Block in the block editor * [[ ## 区块 该插件提供了 1 个区块. * Responsive Picture (Group) ## 安装 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. ## 常见问题 ### 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. ## 评价 ![](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/) 2026 年 2 月 17 日 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 🤯 [ 阅读所有1条评价 ](https://wordpress.org/support/plugin/responsive-picture-block/reviews/) ## 贡献者及开发者 「Responsive Picture Block」是开源软件。 以下人员对此插件做出了贡献。 贡献者 * [ Core Essentials ](https://profiles.wordpress.org/coreessentials/) [帮助将「Responsive Picture Block」翻译成简体中文。](https://translate.wordpress.org/projects/wp-plugins/responsive-picture-block) ### 对开发感兴趣吗? 您可以[浏览代码](https://plugins.trac.wordpress.org/browser/responsive-picture-block/)， 查看[SVN仓库](https://plugins.svn.wordpress.org/responsive-picture-block/)，或通过 [RSS](https://plugins.trac.wordpress.org/log/responsive-picture-block/?limit=100&mode=stop_on_copy&format=rss) 订阅[开发日志](https://plugins.trac.wordpress.org/log/responsive-picture-block/)。 ## 更新日志 #### 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 ## 额外信息 * 版本 **1.1.1** * 最后更新：**3 月前** * 活跃安装数量 **20+** * WordPress 版本 ** 6.3 或更高版本 ** * 已测试的最高版本为 **6.9.4** * PHP 版本 ** 7.4 或更高版本 ** * 语言 * [English (US)](https://wordpress.org/plugins/responsive-picture-block/) * 标签 * [art-direction](https://cn.wordpress.org/plugins/tags/art-direction/)[block-editor](https://cn.wordpress.org/plugins/tags/block-editor/) [gutenberg](https://cn.wordpress.org/plugins/tags/gutenberg/)[picture element](https://cn.wordpress.org/plugins/tags/picture-element/) [responsive images](https://cn.wordpress.org/plugins/tags/responsive-images/) * [高级视图](https://cn.wordpress.org/plugins/responsive-picture-block/advanced/) ## 评级 5 星（最高 5 星）。 * [ 1 条 5 星评价 ](https://wordpress.org/support/plugin/responsive-picture-block/reviews/?filter=5) * [ 0 条 4 星评价 ](https://wordpress.org/support/plugin/responsive-picture-block/reviews/?filter=4) * [ 0 条 3 星评价 ](https://wordpress.org/support/plugin/responsive-picture-block/reviews/?filter=3) * [ 0 条 2 星评价 ](https://wordpress.org/support/plugin/responsive-picture-block/reviews/?filter=2) * [ 0 条 1 星评价 ](https://wordpress.org/support/plugin/responsive-picture-block/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/responsive-picture-block/reviews/#new-post) [查看全部评论](https://wordpress.org/support/plugin/responsive-picture-block/reviews/) ## 贡献者 * [ Core Essentials ](https://profiles.wordpress.org/coreessentials/) ## 支持 有话要说吗？是否需要帮助？ [查看支持论坛](https://wordpress.org/support/plugin/responsive-picture-block/)