Responsive background images

General
1

I know background images are a poor choice for serving mobile users and I see that responsive bg’s are currenty not supported (currently a feature request).

The site I’m working on is photographic and has full width heros/ctas on hundreds of pages. I’ve done as much as I can to optimise the images but they still deliver the full kbs to mobile users which is in turn trashing the pagespeed score. I’m wondering if anyone has a workaround that I can use in Cwicly?

2

If you are using consistent semantic global classes on every page, as you are an experienced developer there is a straightforward solution using custom css or a custom stylesheet.

For example, if your hero blocks all have a class of .hero, you can hide the background image using a media query for the mobile breakpoint and target the .hero class with background: none (or whatever other background you need).

There was some mention recently about work being done on this, so it is possible an upcoming release will include it, for now though, some custom CSS is a quick workaround.

You can also vote on this feature request if you want:

3

You’re too kind - I’m experienced but I had a break for a couple of years and lost most of my skills. I’m currently trying to get up to speed.

Thanks for the link. I copied the file over and can see it on the canvas, but I can’t figure out how to make any changes within Cwicly - I see a couple of others had the same.

4

Cwicly is a great tool for that, due to the CSS view on each block :smile:

If you share some general information about how you structure your classes for your blocks, one of us will be able to help you add some custom CSS.

If you are simply trying to hide the background images on mobile for some specific classes, effectively it really is as simple as something like this:

/* Mobile */
@media (max-width: 576px) {
        .your-class-name-here, your-other-class-name-here {
            background: none;
        } 
}

You can add this into a custom stylesheet:

When you add a stylesheet, make sure you toggle the “active” dot to enabled (so it turns green).

1 Like
5

Thanks @StrangeTech - just about to cook Friday night outdoors pizza in the cold so I’ll have a go at this later.

Cheers!

1 Like
6

Nice! I actually made homemade pizza last night :smile: Although indoors, I confess!

1 Like
7

Another way to get around this is to use an inline image that is positioned absolutely within the container you would normally have a background image on. This way, you’re able to use “srcset” to adjust the images sizes served at different breakpoints. I find this method preferable and use it almost all the time since there’s not real downside to using it. Additionally, this method also lets you adjust the aspect ratio and focal point at each breakpoint.

Eventually, when they add support, we will be able to not only have responsive images, but swap out images at different breakpoints, as well as swapping out images with dark/light mode versions depending on the users OS color scheme setting. You can actually do this now using the code block and hand-coding the “picture” element, but official support would be preferable.

8

@msguerra74 thanks - do you have and example I could have quick look at? I’m trying to find the easiest/laziest way possible because I have a lot of images to work on

9

I have an ooni oven which is amazing. No matter the weather, we’ve cooked from 36C summer to -10C winter. Don’t think I could ever go back to an indoors cooked pizza again. :slight_smile:

10

This approach works well for changing the output size/resolution of the image on a per breakpoint basis. As it is currently manual and has to be done on a per block basis it is not really optimal for a general purpose solution for hiding images on mobile.

There are ways you can do the same as I showed in the custom code example using Cwicly’s inspector instead, that offer the same level of general applicability, using the custom code approach is probably one of the quickest and most efficient ways to target your existing blocks without requiring any other structural or stylistic changes (assuming you are using reusable global classes of course).

1 Like