Load images in different sizes for desktop and mobile

[EinfachChris]

Is there a way to load the images depending on the device?
I would like to optimize my loading times for viewing on smartphones.

I have already read this article. But it is from 2018, maybe there is already a simpler solution.

This is how you could swap out images based on browser viewport width

I just spent over an hour fighting with this, so if anybody else needs to be able to find the browser viewport width and then swap out various sized images to reduce load times on various devices this is how I did it. Required Frameworks / Components / Libraries App Connect Framework Bootstrap 4 Framework Browser Component dmxFormatter.js I have 1 Image with 4 size variations image-small.jpg @ 768px wide 1:1 image-medium.jpg @ 992px wide 4:3 image-large.jpg @ 1200px wide 16:9 image-huge.jp…

Thank you for your help

[ben]

See

Image Optimisation

[scalaris]

Use the range srcset feature. It was designed for this purpose…

Responsive images - Learn web development | MDN

[Teodor]

Responsive Images with Lazy Load and srcset

[ben]

@scalaris

Use the range srcset feature. It was designed for this purpose…

I used the Browser component mainly because Wappler does not make it easy to work with scrset The result is the same.