Image Sizes Obey Breakpoints

I’ve noticed that setting an image’s size affects every breakpoint. To help bricks render fast, for example, I would like to have some images display around 500 pixels wide for desktop, but then on mobile display around 1200 pixels for a true full screen display. The problem is, at the moment I am forced to use the larger image size on all breakpoints.

Also consider this thread: How to use Proper Image Size for Photos with srcset

3 Likes

Did you ever solve this? I have the same question. Although, I think you mixed up your words “mobile” and “desktop” in your post.

Yes. Bricks released a fix for this. See the sources setting in the image element. Or see this video about the release it was fixed in.

This is only for images, is there not an option to do this for background images as well? Would it be the same if I just set the image at each breakpoint?

Yes, you could set the image at each breakpoint. The reason we needed something for image source tag “src” is because breakpoints didn’t affect them. Background images are controlled by styling the element, which does obey the breakpoints. I hope that makes sense.