Hey folks, big fan of Bricks, it’s a big boost in performance compared to other page builders.
I am proposing a somewhat simple feature: automatically wrap images in a element for file-format fallbacks.
As an example, the Performance Lab plugin (or any image pipeline) generates AVIF/WebP/JPEG variants based on the user upload, which get rendered in a element with sources (browsers pick the first source that is compatible, in order).
A more concrete usecase: the WooCommerce transactional emails that display product images. Most email clients refuse AVIF/WebP entirely and only render JPEG/PNG. So if I upload AVIF or WebP images directly, without a proper fallback chain these images will fail to load in the order confirmation email.
This could be a faceless feature or just a small UI option e.g. “Enable format fallbacks (AVIF/WebP/JPEG)” that would let Bricks output correct markup even when no responsive images are needed.
This would make Bricks fully compatible with Performance Lab (and similar solutions like EWWW, Imagify, etc.) outputs and improve interoperability.
Thank you so much for considering it.
Tudor
solution: setup the woocommerce emails with only .jpg format
what you are talking about is completly related to woocommerce
BUT image fallbacks works on frontend usualy like this with picture html tag
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Product">
</picture>
instead of using the < img directly it is possible to use picture tag and add multiple formats and then depending on the device or browser it just choices the format automaticly on user end. this is a gigantic task for bricks to do I am not even sure if I would want them to do it.
so are you asking frontend solution or email solution or are you asking bricks builder to handle your EVERY UPLOAD and generate these formats every time 
I am not sure if any of this topics related to bricks directly at all
I think this problem should be solved on the wordpress media lib level as well.
But because of this need I solved optimization issue on my theme everytime I need to upload something I just use the webp tool instead of using default wordpress media upload.
Thank you for the explanation, much appreciated and I agree that the WooCommerce usecase can be fixed from the email template level.
I am also thinking about websites where strict backwards compatibility matters (governmental, NGOs, etc.).
For example, a clean, empty WordPress + Bricks installation only outputs a plain <img> with srcset, not a <picture> element. So unless you manually add “Sources” in Bricks, there’s no way to trigger <picture> markup for format fallback only, without also defining breakpoint-based sources.
In those cases, having the option to output a <picture> wrapper would help. The request is simply about exposing a clean, native way to output the correct HTML structure when format fallback is needed.
Hope I fully understood what you wrote and got my idea across, english isn’t my strong suit. Thanks!
1 Like
Ended up creating a small plugin that forces Bricks image elements to expose WordPress attachment metadata (wp-image-{ID} class and srcset attributes) so Performance Lab can emit fallbacks for Bricks images. It hooks into the bricks/frontend/render_element filter and applies WordPress content image filters before Performance Lab processes the markup.
If anyone is interested you can use it freely for yourself:
<?php
/**
* Plugin Name: MT · Fixes · Bricks image fallback
* Plugin URI: https://mateitudor.com
* Description: Injects WordPress attachment metadata into Bricks image elements so Performance Lab can emit <picture> fallbacks.
* Version: 1.0.0
* Author: Tudor Matei
* Author URI: https://mateitudor.com
* Text Domain: mt-fixes-bricks-image-fallback
* License: The Unlicense
* License URI: https://unlicense.org/
*
* @package MT_Fixes_Bricks_Image_Fallback
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
add_action(
'plugins_loaded',
static function() {
add_filter( 'bricks/frontend/render_element', 'mt_bif_filter_bricks_image_output', 40, 2 );
}
);
/**
* Ensures Bricks image markup exposes attachment metadata before Performance Lab runs.
*/
function mt_bif_filter_bricks_image_output( $html, $element ) {
if (
! isset( $element->name ) ||
'image' !== $element->name ||
(
function_exists( 'bricks_is_builder_main' ) &&
( bricks_is_builder_main() || bricks_is_builder_iframe() || bricks_is_builder_call() )
)
) {
return $html;
}
$attachment_id = (int) ( $element->settings['image']['id'] ?? 0 );
if ( $attachment_id <= 0 ) {
if ( defined( 'WP_DEBUG' ) && WP_DEBUG ) {
error_log( '[MT Bricks Image Fallback] Missing attachment id for element ' . (string) ( $element->id ?? '' ) );
}
return $html;
}
static $processed_cache = array();
$cache_key = $element->id . ':' . md5( $html );
if ( isset( $processed_cache[ $cache_key ] ) ) {
return $processed_cache[ $cache_key ];
}
$has_wp_class = str_contains( $html, 'wp-image-' . $attachment_id );
$has_srcset = str_contains( $html, 'srcset=' );
if ( $has_wp_class && $has_srcset ) {
$processed_cache[ $cache_key ] = $html;
return $html;
}
if ( ! $has_wp_class ) {
$html = mt_bif_append_wp_image_class( $html, $attachment_id );
}
$filtered_html = mt_bif_apply_wp_content_img_tag_filters( $html, $attachment_id );
if ( defined( 'WP_DEBUG' ) && WP_DEBUG && $filtered_html !== $html ) {
error_log( '[MT Bricks Image Fallback] Updated markup for element ' . (string) ( $element->id ?? '' ) );
}
$processed_cache[ $cache_key ] = $filtered_html;
return $filtered_html;
}
/**
* Adds the wp-image-{ID} class so WordPress can resolve attachment metadata.
*/
function mt_bif_append_wp_image_class( string $html, int $attachment_id ): string {
if ( ! class_exists( 'WP_HTML_Tag_Processor' ) ) {
return $html;
}
$processor = new WP_HTML_Tag_Processor( $html );
if ( ! $processor->next_tag( array( 'tag_name' => 'IMG' ) ) ) {
return $html;
}
$current_class = (string) $processor->get_attribute( 'class' );
$wp_class = 'wp-image-' . $attachment_id;
if ( str_contains( $current_class, $wp_class ) ) {
return $html;
}
$processor->set_attribute( 'class', trim( $current_class . ' ' . $wp_class ) );
if ( defined( 'WP_DEBUG' ) && WP_DEBUG ) {
error_log( '[MT Bricks Image Fallback] Added class ' . $wp_class );
}
return $processor->get_updated_html();
}
/**
* Passes markup through WordPress image filters to trigger Performance Lab <picture> fallbacks.
*/
function mt_bif_apply_wp_content_img_tag_filters( string $html, int $attachment_id ): string {
if ( has_filter( 'wp_content_img_tag' ) ) {
$filtered_html = apply_filters( 'wp_content_img_tag', $html, 'the_content', $attachment_id );
if ( is_string( $filtered_html ) ) {
return $filtered_html;
}
}
if ( function_exists( 'wp_filter_content_tags' ) ) {
$filtered_html = wp_filter_content_tags( $html, 'the_content' );
if ( is_string( $filtered_html ) ) {
return $filtered_html;
}
}
return $html;
}
1 Like
