I am redesigning a site for an artist using Site Designer v.4. I have started setting up a modal gallery, but have run into a design snag. I would much prefer to load different size versions for each image, dependent on the device being used. For instance, I don't want the largest size version of a painting image to load unless the breakpoint is more for a desktop type computer. I'd rather, if the user is on a phone or tablet, load smaller images only. I know how to swap images in Site Designer so different ones show at different breakpoints. But the way I want to design the site is to have thumbnail images of the artworks on a page (the same thumbnails for all breakpoints), then the user clicks/taps on a thumbnail to bring up the full-size image with title, price, size, etc. info. I'd like to have the pop-up gallery all "connected" so that the user doesn't have to keep closing each larger image to see more, but can go forwards & backwards through all the images. Is there some way to, say, have a "full-size" image that is 110 pixels wide for a phone load only at that breakpoint, a 200-pixel-wide image at a tablet breakpoint, and then the largest image (say 350 pixels wide) load only for a wide breakpoint? Those images would only show up when the user taps/clicks on the corresponding thumbnail image. I don't want the 350 pixel image to load at all if the user is on a phone, & maybe take up too much time and/or bandwidth in that instance. I hope all this makes sense. Any suggestions, or is what I want not possible? Thanks in advance for any advice!

well unless I am misunderstanding, but you can use different size images for different breakpoints in a Modal reveal, just like you would if it is on the normal canvas. When I say different size images I mean the same image and same aspect ratio as the larger image just smaller.

so take your 350px image and resize it to say 100px (keeping the aspect ratio and load that for the smaller devices into your reveal

then take resize the 350px image again keeping the aspect ratio and make it 200 or 250px wide,, when you reach the medium widths replace the smaller image in the reveal with that one. finally, when you reach larger devices, change the medium image out for the larger 350px image.

In my resources, I always set up a folder exactly for this
main folder = Reveal Images
sub folder of that = thumbnails
2nd subfolder = small images
3rd subfolder = medium images
4th subfolder = large images

That way it's fairly easy & straightforward to place the right sized images in the right positon.

We are of course talking hypothetical sizes here arn't we because an image 350px wide is not a problem for small end devices (unless of course, it's 1200px high ) and would probably be too small for both medium & larger size devices