In the experiment below, 2 divs containing each an image are set to appear one on desktop, the other on mobile devices. If you resize your browser you can see one or the other.
— image-desktop-1.jpg appears only on desktop
— image-mobile-2.jpg appears only on mobile
Div visibility is set using the Visible on feature in the Settings tab.
image-desktop-1.jpg
image-desktop-2.jpg
In the experiment below, 1 divs with 2 CSS background-image: one is set on desktop, the other on mobile devices. Resize you browser to see the background change.
— background-image-desktop-3.jpg appears only on desktop
— background-image-mobile-4.jpg appears only on mobile
background-image-desktop-3.jpg
background-image-mobile-4.jpg
When loaded on desktop, the page sends both image-desktop-1.jpg and desktop— image-mobile-2.jpg, but only background-image-desktop-3.jpg.
When loaded on mobile, the page sends both image-desktop-1.jpg and desktop— image-mobile-2.jpg, but only background-image-mobile-4.jpg.
Images that you hide using visibility in the settings will be loaded for every breakpoint. Images that you hide using CSS will only load for the breakpoint they're defined on.
Notes:
— using CSS Display:none on an image or one of its parents doesn't prevent it image to load on every device
— setting up Visible on on the image or one of its parents has the same effect
