different images on mobile and desktop

webmark487

Hello!

What is best practice for the use of images on desktop and mobile - regarding performance/loading time - with BeBuilder?

I want to use images with smaller filesizes on mobile, and the big ones for desktop.

To be clear, the same image, but with different sizes.

CSS display:none would still load the images, that are not being shown.

<style>
    @media only screen and (min-width: 1025px) {
        .mobile-only {
            display:none !important;
        }
    } 
    @media only screen and (max-width: 1026px) {
        .desktop-only {
            display:none !important;
        }
    } 
</style>

Thx in advance and best regards

Markus

Phil

Hi,

You can use our Responsive options.

See the following video tutorial:

https://support.muffingroup.com/video-tutorials/responsive-editing-in-bebuilder/

Best regards

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

webmark487

Thx for your reply

I know these responsive options, but it´s not possible to define different images with it, am i right?

(only different widths for example)

Phil

If you have one image visible only for desktop and one for mobile, you can upload images with different sizes.

Or define different widths. Depends on what you want to achieve exactly.

Best regards

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

webmark487

thx.

I just want to avoid, that all of those images are loaded in parallel, and they would just be set to display:none if "responsive visibility" is not checked. Then I would achieve just the opposite effect on performance.

I will give it a try and check if an image will be loaded, if "responsive visibility" is not checked.