Media Pair

Media Pair adds art direction to WordPress Media Library images. Upload a desktop image, pair a separate mobile composition once, and the plugin outputs semantic <picture> markup across blocks, featured images, and theme image functions.

• Mobile image pairing in the Media Library, block editor, and media list
• Automatic <picture> output via core WordPress filters
• Support for Image, Featured Image, Gallery, and Media & Text blocks
• Inline content images via wp_content_img_tag
• Global breakpoint and enable/disable settings
• Admin hints in the Media Library, featured image metabox, and block editor
• media_pair_get_picture() helper for themes and ACF blocks

How it works

Media Pair stores a link between a desktop attachment and a separate mobile attachment. When WordPress renders the desktop image on the frontend, the plugin wraps it in a <picture> element:

• A <source> tag serves the mobile image at or below your configured breakpoint.
• The original desktop <img> remains as the fallback for larger screens.

Pairing happens once per image in the Media Library. You do not need to configure individual posts, blocks, or pages. Anywhere WordPress outputs that attachment — featured images, Image blocks, galleries, theme templates, or custom code using wp_get_attachment_image() — the paired markup is applied automatically.

The frontend uses pure HTML and CSS media queries. No JavaScript is loaded for visitors.

Configuration

Pairing images

1. 01Open Media → Library and select a desktop image.
2. 02In the attachment details, find the Mobile image field.
3. 03Click Select , choose a separate mobile composition from the library, and save.
4. 04The pair saves automatically. Use Remove to unlink the mobile image.

You can also manage pairs from:

• The Mobile pair column in the Media Library list (includes a filter for paired/unpaired images)