Remove srcset attribute from Bricks Image Elements

How To
1

How can I remove the srcset attribute from image elements? I don’t want different image sizes based on different device widths for this particular image. Here’s what my HTML looks like:

<img width="2560" height="720" src="https://example.com/media/sub/yes/image-scaled.webp" class="brxe-image hero-image css-filter size-full" alt="" decoding="async" loading="lazy" srcset="https://example.com/media//image-scaled.webp 2560w, https://example.com/media//image-scaled-600x169.webp 600w, https://example.com/media//image-300x84.webp 300w, https://example.com/media//image-1024x288.webp 1024w, https://example.com/media//image-768x216.webp 768w, https://example.com/media//image-1536x432.webp 1536w, https://example.com/media//image-2048x576.webp 2048w" sizes="(max-width: 2560px) 100vw, 2560px">

1 Like
2

I’d love to know this too.

3

Actually looks like you can just add an attribute “srcset” with value " " (one space, otherwise it doesn’t work) and then srcset will be blank. This seems to be a fine way.

I am also using this functions.php snippet on a site where I want all loading to be “eager” (not “lazy”) and I want there to be no srcset. This seems to be effective.

// Remove srcset from images, set lazy loading to eager, decoding to sync
add_filter('wp_get_attachment_image_attributes', function ($attr, $attachment, $size) {
    unset($attr['srcset'], $attr['sizes']); // Remove srcset and sizes
    $attr['decoding'] = 'sync'; // Set decoding to sync
    $attr['loading'] = 'eager'; // Set loading to eager
    return $attr;
}, 10, 3);