For responsive purpose, you may want to download a different image based on the device size. The goal is to avoid a 300px width mobile to download a 2000px width image. So you may have multiple version of the same image on your server, then the browser chooses which one to download depending on the device with, and saves bandwidth/time/planet.
To achieve that, 2 main solutions:
On an , you may use srcset and sizes attributes link here. The good thing about this solution, is that it handles the pixel ratio of the device, so you don't have to bother about it. All you say is "my picture is fullscreen, and what is available is, for instance, a 480px img, a 900px, and a 2000px. So the browser will download the 900px on a 400px Iphone, and the 480px one on a "classic" 400px screen. Magic.
On
with img background, the easiest way is to use @media-query in CSS, but is not suitable for this library. So the swap would have to be through JavaScript, inside the library. Notice you have to take into account the pixel ratio. If the innerWidth is 420, on an iPhone it means you have to use at least a 840px image.
For now, the only workaround I found is to manually detect the useragent (as the library does), and disable parallax.js on them. So I may handle the static image I show for mobiles myself, and choose which image to download... But that means disabling the library so you may not call this a "workaround"...
For responsive purpose, you may want to download a different image based on the device size. The goal is to avoid a 300px width mobile to download a 2000px width image. So you may have multiple version of the same image on your server, then the browser chooses which one to download depending on the device with, and saves bandwidth/time/planet.
To achieve that, 2 main solutions:
On an![]()
, you may use
srcsetandsizesattributes link here. The good thing about this solution, is that it handles the pixel ratio of the device, so you don't have to bother about it. All you say is "my picture is fullscreen, and what is available is, for instance, a 480px img, a 900px, and a 2000px. So the browser will download the 900px on a 400px Iphone, and the 480px one on a "classic" 400px screen. Magic.On
@media-queryin CSS, but is not suitable for this library. So the swap would have to be through JavaScript, inside the library. Notice you have to take into account the pixel ratio. If the innerWidth is 420, on an iPhone it means you have to use at least a 840px image.For now, the only workaround I found is to manually detect the useragent (as the library does), and disable parallax.js on them. So I may handle the static image I show for mobiles myself, and choose which image to download... But that means disabling the library so you may not call this a "workaround"...