Newbie Question

[nrgiser]

Hi all,

I have a simple question that I hope someone will be able to answer.

I want to reduce the image size for my 320px page size from what it is on the 1920px for example.

I know I can upload two of the same image one for the 1920px page and the other for the 320px page on the same web page, and then hide which image I do not want to show up on the different page size, so I would hide the smaller image on the 1920px and the larger image on the 320px page.

I am though of the understanding that even if your image is hidden on a certain page size it will still load up in the background, but will not show up. I may be wrong though.

If this is the case and the image still loads up even when hidden, on a certain page size, is there a way to prevent this from happening.

So when someone visits my site using a mobile phone the larger image for the 1920px page does not load up in the background, and does not load up at all. Thus reducing bandwidth and cellular data and getting a quicker load up time on your web page.

Thank you in advance for you help. I know it is probably a simple answer, but I thought I would ask you pro's all the same, just to make sure if there is or not a way of doing so.

Thanks.

[nrgiser]

Would the following work by any chance, if I added this into the HTML of the larger image to prevent it from loading up in the 320px web page >>

<img src="images/Ocean-Logo-Blue-Background.jpg" id="ocean-logo" alt="" <picture><source srcset="images/Ocean-Logo-Blue-Background.jpg" media="(max-width: 320px)"></picture>

Thank you for your time in this matter.

[nrgiser]

I think I have figured it out.

If I right click on the large image, then click on "objects properties", then look at miscellaneous and check "Enable Lazy Loading" then this will prevent it from downloading on the 320px page as the image is bigger than the page size.

If I am correct, can you please confirm.

Thanks.

[Pablo]

The 'Picture' object can be used to load different versions of an image in breakpoints.

[nrgiser]

Hi Pablo,

If I used "Picture" object will it only download that particular image for that breakpoint or will it load all the images even if they are hidden.

It seems though that the way I have figured it out works, if I check "Lazy Load" on the bigger image it does not download when viewing that page on a mobile phone, which is what I wanted to happen.

Thanks for your input.

You can mark this down as solved.

[Pablo]

If I used "Picture" object will it only download that particular image for that breakpoint or will it load all the images even if they are hidden.

Correct.

Related tutorial:
http://wysiwygwebbuilder.com/picture.html

[nrgiser]

Thank you for the confirmation Pablo. One last question where can I find the "Picture Object" I can easily find the "picture" to add one picture file, but then it does not allow me to add adaptive images like shown in the tutorial.

I am using version 14.1.0

Thanks

[nrgiser]

No Need to answer.

I have just updated to the latest version and now I can see it.

Thank you.