Display Different Images Based On Device Size

#1

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.

#2

Using srcset might be an option.

1 Like
#3

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

#4

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

#5

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

#6

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.

#7

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.

34%20PM

1 Like
#8

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

1 Like
#9

Hi Paul, thought you had died :grinning:

#10

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.

#11

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.

2 Likes
#12

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.

#13

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.

1 Like