Imagine I use a different background Image on Desktop, one on Tablet, one cellphone landscape and one on cellphone portrait.
I know i can hide the pictures from the Designer depending on the media, but my question is different:
How can I ensure that we are NOT loading the ImageA on a cellphone mode, since it will be NEVER used on a cellphone?
I want to avoid loading heavy images that will never be used.
Thanks in advanced
Hiding an image using Visible on or CSS Display won’t prevent an image to load on every device, for every breakpoint.
You can control what images loads where only by using CSS background-image.
Demo : bg test
tl:dr 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.
If you want to check by yourself, start a new incognito windows on Chrome, resize it for desktop or mobile, load the demo page. The Inspect the page, Sources and Uploads, and you then see what images are really loaded.
http://vincent.polenordstudio.fr/snap/2flun.jpg
Start a new incognito session for each test and resize the window before loading the page.
Your reply is to the point.
Thanks Vincent
This topic was automatically closed after 60 days. New replies are no longer allowed.