Display Different Images Based On Device Size

[brad]

Is there a way to display different images in a spot on the page based on device size?

I have 5 different images (one for each device size) that I would like to swap out based on device. I assumed selecting the device icon at the top of the design view would allow me to set the image based on that selected view but that’s not the case.

[TomD]

Using srcset might be an option.

[brad]

Dang that is close to what I need but it looks like it will only work with 100% width images.

[Hyperbytes]

It’s an old post but it may give you some ideas.

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…

[brad]

Thanks Brian, I’ll give that a try. The lazy load method does not appear to work. Always shows the same image.

[psweb]

Hi Brad, the Lazy Load option works BUT it is almost too clever, in other words if your images are say
300px wide
310px wide
320px wide
330px wide
340px wide

And the browser has already loaded the biggest 340px wide image, then that image is already downloaded and cached so it sees no need to load a smaller image for the other sizes, however if it only loaded the 300px wide image and the next size needed a 330px image it would load it correctly, or should load it correctly.

[brad]

I actually found a very easy to do it. Not sure how practical it is but it works.

I added all four images to the page. Then I just hide the ones for each device I didn’t want showing.

[psweb]

As far as i know that will work from a viewing perspective, so if you are not doing it for file size reduction, then great, but if you look at you inspector with that solution, it still loads all the images in the background, but only displays one to the user, so file size it is now larger than ever before, but if that is not a concern, then yes that is a nice simple solution

[Hyperbytes]

Hi Paul, thought you had died

[psweb]

lol, no, just been dealing with so much personal drama with kids, and still on this stupid deadline, and just lost a rather large monthly account, so all is going a little pear shaped right now.
I could not even find the money to renew my Pro Wappler annual membership, so pretty soon I will not have that either, haha. Just the way life goes sometimes I suppose.

[Hyperbytes]

Sorry to hear that, I am sure speak I for everyone that we all miss your contribution and more specifically bizarre questions! Hopefully something will come along and things will get better. Take care and don’t be a stranger.

[psweb]

I wont, something always comes up, so i am sure i will find a replacement pretty soon, lol.
I am happy you are missing my bizarre questions and 30 page stories though, haha.

I will be back, don’t you worry.

[brad]

but if that is not a concern, then yes that is a nice simple solution

File size isn’t that much of an issue as they will be small anyways. At least it works until I find a better solution.

[Teodor]

Please check:

Responsive Images with srcset

Intro In most cases using the “Responsive” option for images with Bootstrap works perfectly fine. However, there are some cases where you need to serve different images for different devices - one for desktop, a different one for tablets, and a third version for small devices, like phones. Also, your ultra high quality photo for desktop may be 5MB in size, which on a slower 3G connection would cause a really long loading times. In these cases you can use the Lazy Load Component with the help …