Loading varying file/pixel size versions of the same background image depending on viewing device

 Hi! Thanks for resolving my previous issue with the iPhone 5  background image scaling.

A related question: how do I keep the same image and scaling, but cause a smartphone to load a reasonably smaller file size that is still aesthetically pleasing but faster to load, and a desktop to load a high res one?

Someone else asked something similar but that was for two different background images.

Thanks in advance!

https://www.jotform.com/lenardchengtw/78

I have checked your form and the image you're currently using will load a bit slow on a mobile device, I notice that you're using the same image for desktop and mobile version of your form. 

As you already read on another workaround, I think you will need to use a different image for mobile devices, you should be able to achieve it by using some CSS codes, changing the background image based on the screen size, for example, this is a sample code that will help you to change the background image: 

@media screen and (min-width: 480px){

    .supernova{

background-image: url("URL to image here");

    }

}

Here is a link with more info about @media rule it should help you to understand how to change the background and how to change other elements based on the screen size: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp 

Doing this you will avoid to load the same image, so loading an image with a lower size than the current image you have, the form should load fine. 

Hope this helps. 

hi kevin, thanks for your answer. i tried inputting that code you provided but i think the loading times are the same.

the code you provided in language means:

load background image: url("URL") if the device screen has a minimum width of 480 px, right?

does that mean i have to add a code that says:

load background image: url("another background i upload separately that is a smaller file size") if the device screen has a maximum width of 480 px to accomodate smaller devices?

i'm trying to see if there's a way to just modify the currently uploaded background to a smaller resolution if its a handheld device, so that i can preserve the dimensions. uploading a new image seems like the last resort if i risk having it encounter rescaling problems again.

You are most welcome, Lenard, I'm glad the workaround for the image scaling worked to your satisfaction.

Yes, you are correctly reading the code that my colleague provided above - it will set an image to be loaded on screens larger than 480 pixels.

To set up a special image to be loaded on screen smaller than 480 pixels, we would instead need to use max-width in our @media query:

@media screen and (max-width: 480px) {
    .supernova {
        background-image: url("URL of the smaller image for mobile goes here");
    }
}

Having a separate smaller sized file for mobile devices should help improve loading times on mobile devices. I would recommend editing your main (high res) image in an image editor, and scaling it down to what still looks good on a mobile device. Then, upload that edited image somewhere and use it inside the above provided codes, so that devices with smaller screens will be loading that smaller image instead of the high resolution one.

If you need further assistance, please let us know. Thank you.