Linux 软件免费装
Banner图

Responsive Picture Block

开发者 coreessentials
更新时间 2025年10月1日 19:03
PHP版本: 7.4 及以上
WordPress版本: 6.8
版权: GPLv2 or later
版权网址: 版权信息

标签

performance accessibility gutenberg sizes responsive images block editor webp srcset media queries art direction picture element object-fit aspect-ratio

下载

1.0.0

详情介绍:

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: Key Features 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

安装:

  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.

屏幕截图:

  • Front-end markup: `<picture>` with differnt image for mobile
  • Choosing Responsive Picture Block in the block editor
  • How art direction works with `<picture>` HTML