Serving responsive images

I Need Help
1

Hi guys,

I’m a very new user of blocs 3, and I’m loving it. Definitely the best web creation software I’ve used so far. My new site is coming together quickly and most things are very intuitive, other aspects become more clear with the knowledge base and the awesome video courses by @Eldar

But I’m stuck with serving responsive images. I want to serve the correct size image for the screen size, rather than have a larger image resized by software.

For example, serving a 270 x 270 square image for mobiles and not the 990 x 990 square image for desktop sizes; to save bandwidth etc. I’ve been doing this Wordpress and RW and would like to carry on the same with blocs.

Thanks in advance for great software and a really helpful community

Cheers!

1 Like
2

Probably the easiest way to do this would be to add a div or 1 column bric. Add a custom class to that bric and then add your image in the custom class editor as the background. You can change that image based on screen size.

You’ll have to play around with the dimensions to have it look the way you want

2 Likes
3

Hi David @DaveC

There’s a self-explanatory support document which explains how you can achieve this fairly easily:

https://help.blocsapp.com/knowledge-base/multi-resolution-images/

MDS

2 Likes
4

Thank you that really helped, much appreciated. What I ended up doing before I read your post, was to duplicate the images and make each one visible for only one breakpoint. Then selected an image size appropriate for the breakpoint.

Cheers!

1 Like