How do you setup responsive images for IOS and Android?

I have a client that wants to supply and use many graphics that are preset for IOS and Android. So the images are intended to be supplied like this (and this is for just one image!)

> images (folder)
    > 0.75x (folder)
        logoldpi.png (img for Android)
    > 1.5x (folder)
        logohdpi.png (img for Android)
    > 1x (folder)
        logomdpi.png (img for Android)
        logo.png (img for IOS)
    > 2x (folder)
        logoxhdpi.png (img for Android)
        logo@2x.png (img for IOS)
    > 3x (folder)
        logoxxhdpi.png (img for Android)
        logo@3x.png (img for IOS)
    > 4x (folder)
        logoxxxhdpi.png (img for Android)
    > SVG (folder)
        logo.svg

These are supposed to be the best way to take advantage of Apple’s Retina screens and other high resolution displays where the device-pixel ratio is greater than 1.

How do you manage images like this?

Is there a Wappler way to do this?

Do you use

• <img srcset=""> ?
• <picture> <source srcset="" media=""> <img srcset="" src=""> ?
• or something else?

All the images could be in one folder, and we could reduce the number of image options if that will help.